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

  1. Close any open projects in JBuilder, then choose File|New and double-click the Application icon in the Object Gallery.
  2. 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:

  3. 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:

Using the Applet Wizard

  1. Close any open projects in JBuilder, then choose File|New and double-click the Applet icon.
  2. 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:

  3. 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.)
  4. In Step 3, press Finish to accept the defaults for an HTML file.

    The Applet Wizard creates the following two files:

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,

  1. 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.

  2. 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,
  1. Click a component on the Component Palette.

  2. Do one of the following:
To add multiple instances of a component,
  1. Select a component on the Component Palette.
  2. Hold down the Shift key while clicking in the UI Designer, or the Component Tree, to drop the component.
  3. Continue holding down the Shift key as you click to add more instances of the component.
  4. 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:

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,

  1. Open your UI project.
  2. Choose File|Project Properties and click the Code Style tab.
  3. 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:

To select multiple components, do one of the following:

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,

  1. Select the component you want to move.
  2. Drag the component into the parent container.
  3. 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,

  1. Select the component on the Component Palette.
  2. Place the cursor where you want the component to appear in the UI.
  3. Drag the mouse pointer before releasing the mouse button.
    As you drag, an outline appears to indicate the size and position of the control.

  4. Release the mouse button when the outline is the size you want.

To resize a component,

  1. 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.

  2. Click on the appropriate outer handle and drag to resize.

To move component,

  1. Click on the component in the UI Designer or in the Component Tree to select it.
  2. Do one of the following:
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:


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:


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,

  1. Add a container to the UI. If you are working in XYLayout, you can drag to size it.
  2. 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,
  1. Click the MenuBar or PopUpMenu component on the Component Palette.
  2. 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.)
  3. Double-click on the menu component in the Component Tree to open the Menu Designer.
  4. Add menu items in the Menu Designer.
  5. 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,
  1. Click one of the dialog components on the Component Palette.
  2. Drop it anywhere onto the Component Tree, or into the UI Designer. (The Component Tree will place it in a subtree for 'Other' components.)
  3. Select the new dialog component in the Component Tree.
  4. Change the frame property to 'this' so it will be visible at runtime.
  5. 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,

  1. Click the desired component on the Data Express tab of the Component Palette.
  2. 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.
  3. 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:

You can change the look and feel for an application one of two ways:

To preview a particular look and feel in your UI design, 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:

  1. Select the component you want to serialize in the UI Designer.
  2. Right-click the component and choose Serialize Component on the pop-up menu.
  3. 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.
  4. Click OK to create the serialized file. The following things will happen:
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.

  1. Open your project and create the class you want to serialize. (Let's refer to this as Frame1.java for this example).
  2. Save and compile it.
  3. 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).
  4. 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();
    
  5. Click the Design tab to open the UI Designer on OtherFile.java.
  6. 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.
  7. 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.

  1. 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) {
        }
      }
  2. 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).

  1. 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.
  2. 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.