Employing the JBuilder Designers
- Screen Designer
- Writing Event Handlers
- Menu Designer
- In Practice
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
JBuilder provides many different designers and wizards to allow you to be more productive in the development of your application. In this chapter, we will look at these designers and wizards to build our application efficiently and effectively. You will learn how to use these designers to produce a simple user interface, hook up events, and build navigation. As we explore these designers, you will experience the single biggest reason to use JBuilder and its available designers—productivity! We will investigate the following objectives:
Using the Screen Designer
Implementing event handling
Building a menu with the Menu Designer
Screen Designer
The JBuilder Screen Designer uses an amazing feature called a two-way designer. This allows user interfaces to be constructed either with code or by using the Screen Designer, interchangeably. This gives you the flexibility to use whatever technique works best. Often, you will find that you might switch back and forth between both, depending on what needs to be accomplished. For example, it might be easier to make changes to the code to change properties based on variables. Whereas in other instances, the designer would better meet the need to change the graphical layout of the user interface. We'll now look at the Screen Designer and see where to start.
Activating a Designer
Activating any designer, in this case the Screen Designer, is rather simple, although the response to the activation of the designer is more dramatic. This result includes parsing the user interface, building the interrelationship between all the components, and finally checking for syntactical errors. To access any of the design tools, you must open a source file (java, XML, jsp, and so on) in the Content pane and then click on its Design tab to load the appropriate designer. The designer in which the JBuilder initiates is the designer that was last used if multiple designers are appropriate for that situation. For example, if the Screen Designer, shown in Figure 3.1, was last used on a frame, the Designer pane defaults to the Screen Designer.
)
Figure
3.1 JBuilder in Design view.
JBuilder provides tools for visually designing and programming Java classes, giving you the ability to produce new complex user interfaces. Like an artist having many different tools at his disposal, the visual design tools offer many options. The designer contains four main compartments: the Component tree, an Inspector, one of three different designers, and finally a Component palette. These three designers include a Menu Designer, Screen Designer, and Database Component Designer. The Database Component Designer will be addressed in Chapter 15, "Database Connectivity."
NOTE
If you have an error in the jbInit() method of the class, you will not be able to enter the Screen Designer. This is not limited to just the Screen Designer, but also affects the Menu Designer and Database Component Designer. You may receive a variety of errors if the designer cannot parse the jbInit() method. For example, a missing semicolon on any line of code would produce com.borland.jbuilder.cmt.CmtParseException: Class '' not found, but all errors will be displayed under the Design tab of the Compiler window.
Component Tree
Let's drill down and look specifically at what the component tree offers. It is one of the most useful and often overlooked portions of the JBuilder IDE. The component tree replaces the source code Structure pane when the Design tab becomes activated. Its display contains a structured/organized view of all the components owned/contained within the frame. Its purpose is simple: to display the interrelationships between all components and containers for a given frame. The Component tree is divided into folders to allow for better organization of components within a user interface. For example, Figure 3.2 shows how the Component tree of the Screen Designer is divided into these folders.
){kind=small}
Figure
3.2 The Component tree is used to navigate either between designers or components
within a designer.
The Component tree offers a number of productive features, such as
Add and manage non-UI components from the Component palette into your class by dragging and dropping them on the Component tree.
Move the mouse over a component to identify the base class name.
Select a visual or non-UI component to modify its properties and associated events in the Inspector.
Open a visual or non-UI component's associated designer (for example, the Menu Designer or Database Component Designer).
Rename a component.
Cut, copy, and paste components in your UI design.
Reorganize the relationship of components to containers.
The tree is organized into a number of different folders to allow for easy traversal through the frame design. These folders enable you to have an organized view of all components contained within this module. The following is a list of each of the folders and its containership rules:
UI components—This folder contains all the user interface components of a frame. More specifically, it demonstrates visually the relationship between containers and components.
Menu components—All menu components and containers appear under this folder. This includes pop-up menus in addition to fixed menus.
Data Access components—All nonvisual data model components appear in this location.
Other—Any JavaBean that is not defined in one of the three preceding categories (for example, Socket component).
Component Palette
The Component palette will be the most used section of JBuilder's Screen Designer. The palette divides all the building blocks, components, and other JavaBeans, of an application into a number of different categories and offers the ability to add many of your own. These building blocks are organized into different categories depending on the requirements and capabilities of the component. Each component ultimately represents a program element as a user-interface object, a database, or a system facility (see Figure 3.3). Each component, therefore, represents a true implementation of object-oriented behavior with properties, methods, and events.
)
Figure
3.3 ToolTip text represents the component under design. The hierarchies
represent the containership of each component in the tree. Each component is
grouped into similar types of components in the tree (UI, Menu, Data Access,
and Other).
Component Palette Organization
The organization of the Component palette is actually simple. Each component is grouped into an interrelated set. The following is a list of many of these sets:
Swing—This grouping contains all the components of swing that are not a container.
Swing Container—This set contains all the container swing level components.
DataExpress—The DataExpress tab contains all the Borland DataExpress JavaBeans.
db*—Any of the tabs that start with db contain swing or AWT components that have been extended to support a data model.
XML, CORBA, JClass, and many more—These will be discussed in subsequent chapters.
Managing the Component Palette
One of the great features of JBuilder is its capability to be customized and extended. One extension enables you to add new components to the Component palette. For example, you might want to include your own custom controls or add new components from third-party vendors. To do this, choose Tools, Configure Palette from the menu. This allows you to configure your palette properties either by reorganizing the existing components or adding new components under the Add Components tab. Figure 3.4 demonstrates the folder's visual. From this Palette Properties page, you have access to the following:
Add/reorganize component groups—To add a component group, select any existing component group and choose the Add button. You can also reorganize the order of the components within a group.
Add a new component—Choose the Add Components tab of the Palette Properties page. You can use this tool to add JavaBean components from a third-party class library or JavaBean-compliant object you have created.
Add a component image—Each component may have an associated image to aid in its functional clarity.
)
Figure
3.4 The Configure palette enables you to customize any component group or
component in addition to inserting new components.
Inspector
The Inspector displays to the right of the design window. Its purpose is to display and manipulate the properties of a given component at design time. As changes are made in the Inspector, source code is immediately written to implement the change. As in the Screen Designer, the Menu Designer is also a two-way tool. In Figure 3.5 for example, the code written to configure the menu is also shown in the Menu Designer.
){kind=small}
Figure
3.5 The Inspector is used to change any design-time property and the designer
interprets it to code.
The associated properties available to the Inspector for any given component are implemented in the BeanInfo class. This class defines for the Inspector what name and attribute types each property must be. In any case, JBuilder's Inspector reads the appropriate properties when the component is selected, in addition to making an appropriate custom editor available or using the default editors. In Listing 3.1, notice that when we changed the text for jButton1 in the Inspector, it created the code that is in bold.
NOTE
In Listing 3.1, notice that as you build your user interface, no custom tags are included in your source code; that is the magnificence and simplicity of JBuilder and its patented two-way tool technology.
Listing 3.1 The Results of Changing the Property Text for jButton
private void jbInit() throws Exception {
//setIconImage(Toolkit.getDefaultToolkit().createImage(
_ FrmDemo.class.getResource("[Your Icon]")));
contentPane = (JPanel) this.getContentPane();
contentPane.setLayout(xYLayout1);
this.setSize(new Dimension(400, 300));
this.setTitle("Designer Demo");
//Code to setup the menu
contentPane.addMouseListener(new FrmDemo_contentPane_mouseAdapter(this));
jButton1.setText("Exit");
contentPane.add(jButton1, new XYConstraints(82, 63, -1, -1));
}
NOTE
Properties not exposed in the BeanInfo class remain hidden. This means that they will not be displayed in the Inspector property list. The designer does not know about them unless a property manipulated for a given attribute was manipulated within the jbInit() method. In this case, the property will then appear in the Inspector, but only the default editors will be enabled for that attribute.