Visual composition is the creation of object-oriented program elements by manipulating graphical representations of components. VisualAge provides a powerful tool, the Visual Composition Editor, that enables you to visually construct applications, applets, and reusable beans.
In the Visual Composition Editor, you select and place beans to create graphical user interfaces (GUIs). These GUIs can include VisualAge beans, imported beans, and beans you create yourself. By following a few guidelines, you can design versatile beans that you can reuse in many compositions. VisualAge also enables you to use nonvisual beans to perform the business logic and data access.
Development using visual composition can include the following steps:
Visual programming fundamentals
How classes and beans are related
Visual, nonvisual, and composite beans
Free-form surface
Beans palette
Visual composition hints and tips
Property sheets
Tabbing order
Torn-off properties
Layout managers in visual composition
Visual bean basics
Composing beans visually
Adding the IBM Java Examples project
Setting a layout manager during visual composition
Managing the beans palette
Setting the tabbing order
Tearing off properties
Opening the property sheet for a bean
Visual Composition Editor
The menu bar in visual composition
Properties
Pop-up menus for the Visual Composition Editor
The free-form surface is the large open area in the Visual Composition Editor. It is like a blank sheet of paper or a work area where you can add, manipulate, and connect the beans that you use to create your composite bean.
Some of the functions you can perform on the free-form surface include:
You cannot edit on the free-form surface if the bean you are attempting to edit meets any of the following conditions:
Visual Composition Editor overview
Visual programming fundamentals
How classes and beans are related
Visual, nonvisual, and composite beans
Visual bean basics
Composing beans visually
Adding the IBM Java Examples project
Visual Composition Editor
The menu bar in visual composition
Properties
Pop-up menus for the Visual Composition Editor
The beans palette, located on the left side of the Visual Composition Editor, provides building blocks you can use to construct a program element. It consists of categories in a drop-down list, each one containing groups of beans.
You can add a bean to your program element by first selecting the category, then a bean, and then dropping it on the free-form surface, a container bean, or the beans list.
To add multiple instances of the same bean, enable Sticky by holding Ctrl while selecting the bean. Selecting a new bean or the Selection tool disables Sticky.
The status area displays the name of the selected category and bean.
The beans palette initially contains the following:
You can modify the palette by resizing it, changing the icon size, adding categories, adding separators, adding beans you have constructed yourself or beans supplied by a vendor, or removing separators, categories, or beans. In addition, the Available feature in the category menu button, loads installed features to the workspace. This may include the addition of categories and beans to the palette. Modifying the palette can increase your productivity in the following ways:
When you add a new bean to the palette, the entire visual or nonvisual bean
is represented with the default puzzle icon
unless you designate another icon in the BeanInfo Class. Once you add
beans to the palette, you can place them in the free-form surfaceVisual
Composition Editor in the same way you place beans that VisualAge
provides.
Select
the Selection tool to unload the mouse pointer and return it to
the selection pointer. The loaded mouse pointer appears as a crosshair
and carries a bean that can be added to the free-form surface, the beans list,
or to an existing container bean. When unloaded, the mouse pointer
reverts to an arrow that you use to select and perform actions on
beans. If the mouse pointer is not loaded, this tool is not
enabled..
Select
the Choose Bean tool to retrieve a bean that is not on the palette
and drop it on the beans list, free-form surface, or an existing container
bean.
Managing the beans palette
Modify Palette window
Modify Palette
Selection tool
Choose Bean window
When you place beans in the Visual Composition Editor:
It is not good interface design for one bean to overlay another bean. Completely or partially overlaying a bean can result in focus problems, causing users to see but be unable to select the bean.
By embedding composite beans into other composites, you minimize the confusing spider effect of connection lines. For example, you can create a composite bean that consists of a panel on which you have placed buttons and check boxes, and make connections. When you embed this bean in your main interface, you cannot see the connection lines. You place and work with the composite as one bean--not as a panel and separate buttons and check boxes.
If you need to edit the composite or its internal connections, you simply select Open from the pop-up and the Visual Composition Editor for the composite appears, as described in Editing beans within a composite beans.
Visual Composition Editor overview
Visual programming fundamentals
How classes and beans are related
Visual, nonvisual, and composite beans
Visual bean basics
Composing beans visually
Adding the IBM Java Examples project
Visual Composition Editor
The menu bar in visual composition
Properties
Pop-up menus for the Visual Composition Editor
The bean property sheet provides options for changing the
initial appearance and state of beans. You can open the property sheet
from the pop-up menu of a selected bean either in the Visual Composition
Editor or Beans List window. You can also select Properties from the
Tools pull-down menu or select
from the tool bar.
The left column of the bean property sheet contains a list of properties
and the right column contains the editable values. An expansion icon
to the left of the property indicates that the property has more editable
values. For example, when you expand the constraints, sizing
properties, such as x, y, width, and height, appear for editing. When
you select the value column of a property, you are provided with an editing
option. For example, if you want to modify the property for a label,
select the value field for label and enter the new label in the
entry field. If you want to change the background color for the same
bean, a small button
appears when you select the value column for background.
When you select this button, a dialog window appears with color
options. You can use the Reset button to change any property
sheet setting back to default.
You can specify the type of property editor to associate with the property by setting the propertyEditor field in the BeanInfo. For more information, see "Enabling Custom Edit Support for Your Bean."
Once you open a property sheet, you can modify properties for most beans in
Visual Composition Editor. To edit another bean select it in the Visual
Composition Editor or from within the property sheet by selecting the bean
from the drop-down list at the top of the property sheet. If you open a
property sheet after selecting multiple beans, the property sheet provides
editing options for only the common values of the selected beans. For
example, you can use this feature to set the left and top inset of several
beans in a GridBagLayout at once.
Visual Composition Editor overview
Visual programming fundamentals
How classes and beans are related
Visual, nonvisual, and composite beans
Visual bean basics
Composing beans visually
Adding the IBM Java Examples project
Opening the property sheet for a bean
Visual Composition Editor
The menu bar in visual composition
Properties
Pop-up menus for the Visual Composition Editor
The tabbing order is the order in which the input focus moves from bean to bean as the user presses the Tab key. The initial tabbing order is determined by the order in which you drop the beans. The first bean in the tabbing order receives the initial input focus. For example, if the first bean in the tabbing order is a button, that button receives the initial input focus when the application starts.
The tabbing order can be set or displayed only for beans that are placed within a composite bean. For example, if you place a row of buttons in a frame window, you can set the tabbing order for the buttons.
If the tabbing order includes each entry field in which a user can type, the user can move the input focus from one entry field to another. Arrow keys only move the cursor within an entry field; only the Tab key, backtab key, and mouse can change the input focus from one entry field to another. Read-only fields do not need to be included in the tabbing order.
Because the order in which beans are placed on a composite bean determines the tabbing order, you will probably need to change the order as you add or rearrange beans.
For example, drop three buttons and then rearrange them so that Button3 is between Button1 and Button2. The tabbing order of these buttons is Button1, Button2, Button3, even though Button3 is now between Button1 and Button2. You must change the order to have the focus move from Button1, Button3, and Button2.
The color of the tab tags reflect information about the beans that you use. Yellow tab tags represent simple beans, such as entry fields and buttons. Blue tab tags represent composite beans and container beans.
Visual Composition Editor overview
Visual programming fundamentals
How classes and beans are related
Visual, nonvisual, and composite beans
Visual bean basics
Composing beans visually
Adding the IBM Java Examples project
Setting the tabbing order
Visual Composition Editor
The menu bar in visual composition
Properties
Pop-up menus for the Visual Composition Editor
You tear off a property to gain access to the encapsulated features of a bean. This can be necessary when a property is in itself a bean and you want to connect to one of its features. The torn-off property is not actually a separate bean but a variable that represents the property itself or points to it.
For example, in an address book application you might tear off properties as follows:
Visual Composition Editor overview
Visual programming fundamentals
How classes and beans are related
Visual, nonvisual, and composite beans
Visual bean basics
Composing beans visually
Adding the IBM Java Examples project
Tearing off properties
Visual Composition Editor
The menu bar in visual composition
Properties
Pop-up menus for the Visual Composition Editor
Many container components support the use of layout managers. A layout manager is a class that implements the java.awt.LayoutManager or java.awt.LayoutManager2 interface.
You assign a layout manager to the container. In most layouts, you can then define properties for the layout that govern the specifics of the sizing and resizing behavior for the components.
In addition to those provided, you can create custom layout managers for use with your beans. Custom layout managers must inhereit from Object class and implement a LayoutManager interface. If you choose to implement LayoutManager2, you must implement public final static java.lang.Class getConstraintsClass() in your layout manager class and supply a property editor for the type. Your custom layout managers appear at the bottom of the list of available layout managers in the property sheet. For examples of using layout managers, see the com.ibm.ivj.examples.vc.customLayoutManager classes shipped in the IBM Java Examples project.
Visual composition makes it easy to try different layouts. If you prefer to lay beans out individually, you can use the null layout setting (that is, no layout) and the Visual Composition Editor alignment tools. For layout manager details, see the Java API documentation. For examples of using layout managers, see the com.ibm.ivj.examples.vc.layoutmanagers classes shipped in the IBM Java Examples project.
Alignment tools are disabled for all but null layout.
Consider waiting to set layout properties until you have settled on a layout manager. Many values are lost when you switch layouts or move the component to another container on the free-form surface.
VisualAge supports the use of the following layout managers in container beans:
BorderLayout arranges components along each edge of the container (North, South, East, and West), and one component in the center. Beans placed in BorderLayout assume the shape and size necessary to conform to the new layout.
VisualAge provides placement assistance by drawing an outline of the regions in the layout when you drag the bean. When you release the mouse button, VisualAge places the bean within the outline under the crosshair.
If you drop beans in the a layout and then switch the layout to Border, the order in which you dropped the beans determines their location. The first bean dropped fills the center, the second bean spans the top of the container bean, the third spans the bottom, the forth fills the left side, and the fifth fills the right. If you use more than 5 components, changing the container layout to border could result in overlaid components. You can use the beans list to perform tasks on the covered components.
From the property sheet, you can specify the spacing between adjacent components.
BoxLayout arranges components vertically or horizontally without wrapping. You can nest multiple panels with different combinations of horizontal and vertical BoxLayout to achieve an effect similar to GridBagLayout, without the complexity. If you are using the vertical alignment, BoxLayout attempts to make all components the same width. With horizontal alignment, BoxLayout attempts to match component height.
VisualAge provides placement assistance by drawing a bold horizontal or verticle bar in the layout when you drag the bean. When you release the mouse button, VisualAge places the bean near the line under the crosshair.
From the property sheet, you can specify whether the components are arranged vertically or horizontally.
CardLayout arranges components in a linear depth sequence similar to a deck of cards, notebook, or tabbed dialog box. Each component is called a card.
VisualAge provides placement assistance by drawing an outline of the container when you drag the bean. When you release the mouse button, VisualAge places the bean within the outlined container under the crosshair. VisualAge adds beans to the top of the card deck, making the first bean you dropped the bottom card. You can use Switch To on the pop-up menu to move through the deck, or perform tasks on the covered cards from within the beans list.
From the property sheet, you can specify the size of the verticle and horizontal frame around each component.
FlowLayout arranges components in horizontal wrapping lines.
VisualAge provides placement assistance by drawing a bold verticle bar in the layout when you drag the bean. When you release the mouse button, VisualAge places the bean to the right of the verticle bar under the crosshair.
From the property sheet, you can specify the spacing between adjacent components and the starting alignment from center, left, or right.
GridLayout arranges components in a table, all cells having the same size.
VisualAge provides placement assistance by drawing a bold verticle bar in the layout when you drag the bean. When you release the mouse button, VisualAge places the bean to the right of the verticle bar under the crosshair.
From the property sheet, you can specify the spacing between adjacent components, and the number of rows and columns.
GridBagLayout enables you to arrange components in a highly complex grid. As you add or move beans, the free space shuffles so that beans are centered on the interface, while retaining your arrangement. Grid cells are not necessarily identical in size and components can span multiple cells. You can customize grid sizing behavior down to each individual component.
Resize behavior in GridBagLayout is tied to the weightX, weightY, and fill contstraints of components within the layout. By default, the component properties are set without resize behavior. If you place components in any layout and then change the layout to GridBag, the component constraints are set to maintain the look created in the original layout.
VisualAge provides placement assistance by drawing a bold grid that is based on the beans dropped so far. VisualAge attempts to place the bean as indicated by the pointer. If the pointed-to cell is empty, all borders of the cell are highlighted. If the pointer rests on a row or column boundary, a new row or column is inserted. New rows appear below the pointer; new columns appear to the right.
You do not specify additional layout properties for a container that uses GridBagLayout. However, you can specify constraints for the components within the container.
Null layout means that no layout manager is assigned. Without a layout manager, resizing the container at run time does not affect the size and position of the components.
VisualAge provides placement assistance by drawing an outline of the container. When you release the mouse, VisualAge places the bean within the container under the crosshair.
You can customize components within the null layout by means of dragging the beans, using Tool Bar options, or through the constraints option in Properties.
To access the layout interface directly, drop a Variable bean on the free-form surface to the right of the container. Change the type of the Variable bean to that of the class implementing the layout manager interface (for example, CardLayout). Connect the layout property of the container bean to the this property of the Variable bean. Then connect to features of the Variable bean.
If you use a layout that allows for a bean to completely cover another bean, the beans list enables you to easily perform tasks on the covered components. To modify bean placement on the Visual Composition Editor from within the beans list, open the Properties for the bean and modify the Constraints.
Layout managers in visual composition
Visual Composition Editor overview
Visual programming fundamentals
How classes and beans are related
Visual, nonvisual, and composite beans
Visual bean basics
Composing beans visually
Adding the IBM Java Examples project
Setting a layout manager during visual composition
Achieving the resize behavior you want
Setting layout properties during visual composition
GridBagLayout constraints
Creating a GUI using GridBagLayout
Visual Composition Editor
The menu bar in visual composition
Properties
Pop-up menus for the Visual Composition Editor