Laying out your UI
The user interface is the collection of visual windows, menus, and controls the user interacts with to control your program. This section explains the fundamental tasks you perform as you create the user interface using JBuilder's visual design tools. If you're already comfortable using controls in a graphical user interface environment, much of the material discussed here, such as selecting, sizing, and deleting components, might be familiar to you.
This section covers the following topics:
Basic design tasks
At the simplest level, designing a user interface consists of the following basic tasks:
JBuilder assists with this process by providing wizards to create the basic framework of files for your project, and visual design tools to speed up the UI design process.
Starting your UI project using wizards
The first step in designing a user interface with JBuilder is to create or open a project that includes a designable container class, such as a Frame or a Panel. While almost any class is designable, the fastest way to create a project with such a container is to use the Application Wizard or the Applet Wizard.
If you don't already have a project open, when you run one of these wizards, it automatically invokes the Project Wizard to create the project, then add the files to it you need to begin designing your UI. See Creating and Managing Projects in Getting Started.
Using the Application Wizard
- Close any open projects in JBuilder, then choose File|New and double-click the Application icon in the Object Gallery.
- The Project Wizard appears first, suggesting a default path and project name. Enter a new path and project name, or press Finish to accept the defaults.
Note: The part of the path between Jbuilder\myprojects and the project file is the equivalent of the package name that will be suggested in the Application Wizard. For example, if you create a project called JBuilder\myprojects\mypackage\myprojects.jpr
, the Application Wizard will suggest using a package name of mypackage
.
For more information on packages, see Packages.
The Project Wizard creates the following two files:
- A project file.
- An HTML file that contains default project information. You can edit this to record any pertinent information about the project you want to display. The contents of this file always display on the Source tab when the project file is selected, even if you remove the file from the project.
- Next, the Application Wizard automatically starts, consisting of two steps. Check the features you want in each step then press Finish. For more details, see the Application Wizard.
The Application Wizard creates two files:
- A startup class for your application, called Application1.java by default. This class contains the main() method for the application. At runtime, this startup class creates an instance of the UI class for the application.
- A UI class, called Frame1.java by default, that extends DecoratedFrame.
This class is your main UI container, to which you'll add UI components using the UI Designer. It uses BorderLayout for the DecoratedFrame, and contains a BevelPanel, in XYLayout, which is the drawing surface for your UI design. This class can also optionally contain a menu bar, a status bar, a toolbar, and an about box.
Using the Applet Wizard
- Close any open projects in JBuilder, then choose File|New and double-click the Applet icon.
- The Project Wizard appears first, suggesting a default path and project name. Enter a new path and project name, or press Finish to accept the defaults.
Note: The part of the path between Jbuilder\myprojects and the project file is the equivalent of the package name that will be suggested in the Applet Wizard. For example, if you create a project called JBuilder\myprojects\mypackage\myprojects.jpr
, the Applet Wizard will suggest using a package name of mypackage
.
For more information on packages, see Packages.
The Project Wizard creates two files:
- A project file.
- An HTML file with a name matching the project that contains default project information. You can edit this to record any pertinent information about the project you want to display. The contents of this file always display on the Source tab when the project file is selected, even if you remove the file from the project.
- Next the Applet Wizards starts. Press Next to accept the defaults in both Step 1 and Step 2. (You don't need to enter any applet parameters in Step 2 unless you want to.)
- In Step 3, press Finish to accept the defaults for an HTML file.
The Applet Wizard creates the following two files:
- An HTML file containing an Applet tag referencing your Applet class. This is the file you should select to run or debug your applet.
- A Java class that extends Applet. This is your main UI container, to which you'll add UI components using the UI Designer.
The wizards import all the packages necessary for designing a UI. All you need to do is select the Frame or Applet file, click the Design tab and start adding components in the UI Designer.
Opening the UI Designer
To open the UI Designer and the other visual design tools,
- Select a visually designable Java file in the Navigation pane, such as a Frame, Panel, Applet, or Dialog file.
Note: To quickly get a designable Frame or Applet file, use the Application Wizard or the Applet Wizard.
- Click on the Design tab at the bottom of the AppBrowser. The Component Tree and UI Designer display in the AppBrowser, and the floating Inspector appears at the right.
The source code is still accessible on the Source tab of the AppBrowser, so you can view and edit your source code in parallel with designing your UI. Because of JBuilder's Two-way Tool, any changes made in the UI Designer or Inspector are immediately reflected in the source code, and vice versa.
Adding components to the UI container
To add a component,
- Click a component on the Component Palette.
- Do one of the following:
- Click in the UI Designer to drop the component at its default size.
- Drop the component onto the desired container in the Component Tree. Doing this, however, gives you no control over where the component appears in the container.
- Drag the component in the UI Designer to the desired size.
Note: Dragging to a specific size is only appropriate when using XYLayout for a container. Ultimately, the layout manager for each container in your UI will determine its components' sizes and positions.
For more information on layout managers, see "Using layout managers" in Building Applications with JBuilder.
To add multiple instances of a component,
- Select a component on the Component Palette.
- Hold down the Shift key while clicking in the UI Designer, or the Component Tree, to drop the component.
- Continue holding down the Shift key as you click to add more instances of the component.
- Clear the selection when you are done by clicking the cursor button on the Component Palette, or by releasing the Shift key before adding the last instance of the component.
Note: Be careful to clear the selection, otherwise, you may inadvertently click in the Component Tree or the UI Designer, and create an unwanted component.
Code generated by the UI Designer when adding a JavaBean
When you visually add a JavaBean component to your design in the UI Designer, JBuilder generates an instance variable for that component, and adds it to the source code. Also, when you delete a component, the UI Designer deletes the associated lines from the code.
JBuilder allows you to specify one of two source code styles for the UI Designer to use when instantiating a JavaBean:
- Using
new
, and a parameterless constructor to instantiate the Bean.
- Using Beans.instantiate.
Example 1: using 'new' plus a parameterless constructor
For example, if you create a BevelPanel, then add a ButtonControl to it, the UI Designer adds the following code to the container's declaration statement:
ButtonControl buttonControl1 = new ButtonControl();
and this code to the jbInit() method, which is called from the container's constructor:
bevelPanel1.add(buttonControl1, new XYConstraints(35, 61, 108, 22));
Note the constraints for the height, width, and x,y coordinates will be different for each button.
Example 2: using Beans.instantiate
Using the same ButtonControl example, JBuilder adds the following to the container's declaration statement:
Button button1;
and this code to the jbInit() method, which is called from the container's constructor:
button1 = (Button) Beans.instantiate(getClass().getClassLoader(), Button.class.getName());
bevelPanel2.add(button1, new XYConstraints(55, 62, 100, 47));
To specify which code style to use for instantiating a JavaBean,
- Open your UI project.
- Choose File|Project Properties and click the Code Style tab.
- Check or uncheck Use Beans.instantiate. (The default is unchecked.)
For more information on using Beans.instantiate(), see Instantiating serializable JavaBeans under "Serializing JavaBeans" in the Component Writer's Guide.
Selecting components in your UI
Before attempting to select an existing component in your UI, be sure the selection arrow on the Component Palette is depressed. Otherwise you may accidentally place a component on your UI.
To select a single component, do any one of the following:
- Click the component in the UI Designer.
- Select the component in the Component Tree.
- With focus on the Designer, tab to the component (Tab = forward; Shift+Tab = backward).
To select multiple components, do one of the following:
- Hold down the Shift key, and click the components in the UI Designer one at a time.
- Hold down either the Shift key or the Ctrl key while selecting the components in the Component Tree.
- Hold down the Shift key, and drag around the outside of the components in the UI Designer, surrounding the components with a rectangle, or "lasso".
When this rectangle encloses all the components you want to select, release the mouse button. If necessary, you can then use Ctrl+click to individually add or remove components from the selected group.
Notice that as you move the mouse over a component in the UI Designer, the right side of the status bar at the bottom of the AppBrowser displays the name of the component. This is especially useful if the component you are trying to select is hidden or invisible in the designer (such as an AWT Panel, or one of the panels in a CardLayout stack.) If the panel containing the component is in XYLayout, it also displays the x,y coordinates.
Adding components to nested containers
There might be times when you want to drag a component into the parent container of pair of nested containers (for instance, to drag a panel from elsewhere in your design into a parent BorderLayout container which is already filled with two other panels). You need a way to indicate to the UI Designer which container should actually receive the selected component.
To do this,
- Select the component you want to move.
- Drag the component into the parent container.
- Hold down the Alt key, then release the mouse button.
Once the component is in the new container, you can modify its constraints to specify its exact placement.
Moving and resizing components
For many layouts, the layout manager completely determines the size of the components by constraints, making sizing in the UI Designer have no effect. However, when working with XYLayout, you can size components when you first place them in your UI, or you can resize and move components later.
To size a component as you add it,
- Select the component on the Component Palette.
- Place the cursor where you want the component to appear in the UI.
- Drag the mouse pointer before releasing the mouse button.
As you drag, an outline appears to indicate the size and position of the control.
- Release the mouse button when the outline is the size you want.
To resize a component,
- Click on the component in the UI Designer or in the Component Tree to select it.
When a component is selected, small squares, called sizing handles or nibs, appear on the perimeter of the component, and for some containers, a move handle appears in the middle of the component.
- Click on the appropriate outer handle and drag to resize.
To move component,
- Click on the component in the UI Designer or in the Component Tree to select it.
- Do one of the following:
- Click anywhere in the component, and drag it any direction to move it. If the component is a container completely covered with other components, use the center move handle to drag it.
- Hold down the Ctrl key, and use one of the arrow keys to move the component one pixel in the direction of the arrow.
- Hold down the Shift+Ctrl keys, and use one of the arrow keys to move the component eight pixels in the direction of the arrow.
See also:
Building Applications with JBuilder: Determining the size and location of your UI at runtime.
Cutting, copying, and pasting components
To cut, copy, or paste components in the UI Designer, select the component(s) in either the UI Designer, or the Component Tree, then do one of the following:
- Use the appropriate shortcut keys for the function.
Cut - Ctrl+X
Copy - Ctrl+C
Paste - Ctrl+V
- Right-click the selected component(s), and choose cut, copy, or paste from the pop-up menu.
Deleting components from your UI
To delete a component, select the component in the UI Designer or the Component Tree. Press DEL, or Ctrl+X.
Undo/Redo
To undo or redo an action in the UI Designer, do one of the following:
- Right-click anywhere in the UI Designer or the Component Tree, and choose Undo or Redo from the pop-up menu.
- Click anywhere in the UI Designer or the Component Tree and use the appropriate shortcut keys for the function.
Undo - Ctrl+Z
Redo - Ctrl+Shift+Z
Grouping components
JBuilder provides a number of container components on the Palette that can be used to group components together so they behave as a single component at design time.
For instance, you might group a row of buttons in a Panel or GroupBox to create a tool bar. Or you could use a container component to create a customized backdrop, status bar, or check box group.
When you place components within containers, you create a relationship between the container and the components it contains. Design time operations you perform on the containers, such as moving, copying, or deleting, also affect any components grouped within them.
To group components by placing them into a container,
- Add a container to the UI. If you are working in XYLayout, you can drag to size it.
- Add each component to the container, making sure the mouse pointer falls within the container's boundaries. (The status bar at the bottom of the AppBrowser displays which container your mouse is over.) You can drop a new component from the Component Palette, or drag an existing component into the new container.
As you add components, they appear inside the selected container in the UI Designer, and under that container in the Component Tree.
Tip: If you want the components to stay where you put them, change the container's layout to XYLayout before adding any components. Otherwise, the size and position of the components will change according to the layout manager used by the container. You can change to a final layout after you finish adding the components.
Adding non-UI components (menus, dialogs, and database components)
Components that do not descend from java.awt.Component, such as menus, dialogs and database components, are treated differently from UI components during class design. They are represented on the Component Palette, just like UI components, but when you add them to your class, they are visible only in the Component Tree and they use different designers. You can select them in the Component Tree to change their properties in the Inspector, or double-click on them to open the associated designer.
Adding menus
To add menus to your UI,
- Click the MenuBar or PopUpMenu component on the Component Palette.
- Drop it anywhere onto the Component Tree, or into the UI Designer. (The Component Tree will place it in a subtree for menus and menu components.)
- Double-click on the menu component in the Component Tree to open the Menu Designer.
- Add menu items in the Menu Designer.
- Attach events to the menu items using the Inspector, or by manually typing source code.
For more details on creating menus, see the chapter called "Designing menus."
Adding dialogs
To add dialogs to your program,
- Click one of the dialog components on the Component Palette.
- Drop it anywhere onto the Component Tree, or into the UI Designer. (The Component Tree will place it in a subtree for 'Other' components.)
- Select the new dialog component in the Component Tree.
- Change the frame property to 'this' so it will be visible at runtime.
- Attach events to the associated menu item that will surface the dialog at runtime. Use the Events tab in the Inspector, or create the source code manually.
For information on how to hook up menu events to dialogs, see "Working with events" in Getting Started. The Filer, FontChooser,and ColorChooser dialogs are demonstrated in the tutorial "Building a Java text editor" in Getting Started.
Adding database components
Database components are JavaBeans components that you never see in the UI. They are objects for controlling data and are often attached to data-aware UI components, such as a Grid control. These components are, however, conveniently located on the Data Express tab on the Component Palette so you can visually add them to your program.
To add a Database component to your class,
- Click the desired component on the Data Express tab of the Component Palette.
- Drop it onto the Component Tree or into the UI Designer. You will see the component appear in the "Data Express" sub tree in the Component Tree. It will not be visible in the UI Designer.
- Modify any properties and add event handlers as with other components.
For complete information about using Database components, see the chapter called "Developing database applications" in the Database Applications Developer Guide.
Changing the look and feel of your UI
JBuilder 2.0 includes the Swing 1.0.1 GUI components. All JBuilder's JBCL components are all based on this new architecture. The Swing classes give you the capability of specifying a look and feel for a program's user interface. You can take advantage of this new Java pluggable look and feel to create applications that will have the look and feel of a user's native desktop for Windows or Solaris machines. You can also ensure a uniform look and feel in your applications across platforms with the Java Metal look and feel.
You have three look and feel choices available to you in JBuilder:
When you create an application with JBuilder's Application Wizard, the following main() method is automatically generated in Application1.java which sets the default look and feel to Windows:
public static void main(String[] args) {
try {
UIManager.setLookAndFeel(new com.sun.java.swing.plaf.windows.WindowsLookAndFeel());
//UIManager.setLookAndFeel(new com.sun.java.swing.plaf.motif.MotifLookAndFeel());
}
catch (Exception e) {
}
new Application1();
}
}
Several things are important to note about this code:
- The line of code for the look and feel statement is inside the try/catch block. This is necessary for it to compile.
- This code needs to be run before any of the components are instantiated. That is why it is placed in the Application1.java static main() method.
- The class UIManager lives in the com.sun.java.swing package.
You can change the look and feel for an application one of two ways:
- You can modify the Application1.java file to specify the look and feel by commenting/uncommenting the appropriate lines of code as follows:
- To get Metal (since it is the default for the JFC Swing classes), comment out the Windows line as well as the Motif one.
- To get Motif, comment out the Windows line, and uncomment the Motif line.
- To get Windows, comment out the Motif line.
- You can manually add the appropriate lines of code to your application file (if it was not created with the Application Wizard).
- To get Metal, enter nothing (since it is the default for the JFC Swing classes).
- To get Windows, add
try {
UIManager.setLookAndFeel(new com.sun.java.swing.plaf.windows.WindowsLookAndFeel());
}
catch (Exception e) {
.
- To get Motif, add
try {
UIManager.setLookAndFeel(new com.sun.java.swing.plaf.motif.MotifLookAndFeel());
}
catch (Exception e) {
To preview a particular look and feel in your UI design,
- Open the UI Designer on the UI frame file.
- Right-click in the UI Designer and choose Look and Feel.
- Select the look you want from the menu list.
The UI Designer repaints to display the selected look and feel.
Serializing components in the UI Designer
About serialization
Serializing an object is the process of turning it into a sequence of bytes that is neither a .java nor a .class file. That sequence of bytes can be saved as a file on a disk or sent over a network. When a request is made to restore an object from a file, or on the other end of a network connection, the sequence of bytes is deserialized into its original structure.
For JavaBeans, serialization provides a simple way to save the initial state for all instances of a type of class, or bean. If the bean is serialized to a file, and then deserialized the next time the user uses it, the bean is restored exactly as the user left it.
Warning:
Use extreme caution when serializing components. Don't attempt it until you know exactly what it entails and what the ramifications are.
For more complete details about serialization, and instantiating serialized JavaBeans, see Serializing JavaBeans in the Component Writer's Guide.
Also see Sun's "Object Serialization" Web site at http://java.sun.com/products/jdk/1.1/docs/guide/serialization/.
Fast track to serializing
JBuilder makes it easy to serialize JavaBeans from the UI Designer. First, modify the bean using the Component Inspector so it has the settings you want to keep. Then follow these steps:
- Select the component you want to serialize in the UI Designer.
- Right-click the component and choose Serialize Component on the pop-up menu.
- A message box displays, showing you the path and name for the new serialized file. It will have the same name as the original component, but will have a .ser extension.
- Click OK to create the serialized file. The following things will happen:
- If the file exists, you will receive another confirmation dialog.
- The .ser serialization file is created starting at the first directory named on the source path, and it creates the appropriate package subdirectory path (for example
myprojects\java\awt
).
- The serialization file is added to your project as a node so it can be deployed with your project.
- Run|Make will copy the .ser file from the Source Path to the Out Path.
The next time you instantiate that bean using Beans.instantiate(), the .ser file is read into memory.
Serializing a 'this' object
The rule for serialization is simple: to serialize, you need a live instance of the object you want to serialize. This presents a problem for a 'this' object, because it is not instantiated the same way as components you add to the UI Designer. Therefore, you need an alternate way to get a live instance of 'this'.
Of course you can serialize in code, but you generally serialize an object after you have used a RAD tool (like an Inspector), or a Customizer to make changes to it.
The following example shows you how you can serialize a 'this' UI frame. You can modify these steps to serialize any type of object, such as a panel, class, dialog, or menu.
- Open your project and create the class you want to serialize. (Let's refer to this as Frame1.java for this example).
- Save and compile it.
- Open another file in your project that already has a class in it which can be, or has been, visually designed by JBuilder. (Let's refer to this as OtherFile.java in this example).
- Select OtherFile.java in the Navigation pane, and create the following field declaration (instance variable) inside its class declaration, after any other declarations:
Frame1 f = new Frame1();
- Click the Design tab to open the UI Designer on OtherFile.java.
- Right-click the "f" instance variable in the 'Other' folder of Component Tree, and choose Serialize Component. A message box appears, indicating the path and filename for the new serialized file.
- Click OK.
To use the serialized file when you instantiate Frame1 in your application, you have to instantiate it in the Application file using Beans.instantiate() as follows.
- Change the constructor for Application1.java from
public Application1() {
Frame1 frame = new Frame1();
//Validate frames that have preset sizes
//Pack frames that have useful preferred size info, e.g. from their layout
if (packFrame)
frame.pack();
else
frame.validate();
frame.setVisible(true);
}
to
public Application1() {
try {
Frame1 frame = (Frame1)Beans.instantiate(getClass().getClassLoader(), Frame2.class.getName());
//Validate frames that have preset sizes
//Pack frames that have useful preferred size info, e.g. from their layout
if (packFrame)
frame.pack();
else
frame.validate();
frame.setVisible(true);
}
catch (Exception x) {
}
}
- You also need to add the following import statement to the top of Application1.java:
import java.beans.*;
Using Customizers in the UI Designer
Part of the JavaBeans Specification says that a JavaBean can name its own Customizer, which is an editor especially tailored for this class of object. During design time in JBuilder, any JavaBean that has a Customizer will cause a new dialog to appear when you right-click the component in the UI Designer or the Component Tree, and choose Customizer. This dialog is a wrapper around the Customizer which lets you modify the object like you would in a property editor invoked from the Inspector. The presence of a Customizer does not preclude the presence of a normal Inspector. The JavaBean will hide any properties it does not want the Inspector to see.
One way to persist the results of a Customized bean is through serialization. Therefore, whenever you commit the customizer, JBuilder will prompt you to save the object to a new .ser file (or overwrite the old).
- If a Bean is loaded with Beans.instantiate() in the UI Designer, and is further modified by the Customizer, it can be saved again, either over the old name, or into a new file.
- If a Bean is loaded with Beans.instantiate() in the UI Designer, and is further modified by the Inspector, JBuilder will still use its old technique of writing Java source code for those property modifications. This means a customized (and serialized) bean can be further modified with the conventional Inspector.
JBuilder attempts to generate code for any property changes the Customizer makes. Depending on how closely the Customizer follows the JavaBean specification, this may or may not be sufficient. Some sophisticated Customizers make changes to the object which cannot be represented in code, leaving serialization as the only way to save the changes.
See also:
Keyboard shortcuts in the UI Designer
Below are keyboard shortcuts you can use when doing visual design in JBuilder:
|
Keystroke |
Action |
|
Shift+Drag |
Drag a lasso around multiple components to select them in UI Designer. |
Ctrl+Click |
Individually select/deselect multiple components in Component Tree or UI Designer. |
|
|
Tab |
Move forward through the components in UI Designer to select. |
Shift+Tab |
Move backward through the components in UI Designer to select. |
|
|
Shift+Click |
Drop multiple instances of a component into the UI Designer. |
Ctrl+X |
Cut a selection from the UI Designer or the Component Tree to the clipboard. |
Ctrl+C |
Copy a selection to the clipboard from the UI Designer or the Component Tree. |
Ctrl+V |
Paste the contents of the clipboard into the UI Designer or the Component Tree at the location of the cursor. |
Click+Drag |
Drag the component to a new location. |
Ctrl+Drag |
Drag a copy of the selected object to a new location. |
Ctrl+Arrow key |
Move the selected component one pixel in the direction of the arrow. |
Ctrl+Shift+Arrow |
Move the selected component eight pixels in the direction of the arrow. |
Drag+Shift |
Limit the move to orthoganal directions (up, down, right, left or at 45 degree angles). |
Drag+Alt |
Drag a component into a parent container. |
|
|
Ctrl+Z |
Undo the most recent action. |
Ctrl+Shift+Z |
Redo the most recent undo. |
|