Building a user interface
Using JBuilder's visual design tools, you can quickly and easily create a user interface (UI) for a Java application or applet. You construct the UI using a palette that contains components such as buttons, text areas, lists, dialogs, and menus. Then you set the values of the component properties and attach event-handler code to the component events, telling the program how to respond to UI events.
The AppBrowser and the UI designer
JBuilder's visual design tools
Design tools |
Description |
UI designer |
Provides a surface for placing and editing panels and other UI components. To view the UI designer for an open file, select the Design tab at the bottom of the content pane. |
Component palette | Contains visual and nonvisual Java components. Components on the palette vary by JBuilder edition. |
Component tree | Displays a structured view of all the components in your source file and their relationships. This is shown in the structure pane at the lower left of the AppBrowser. |
Inspector | Used to inspect and set the values of component properties and to attach methods to component events. Changes made in the Inspector are reflected visually in your design. |
Menu designer | Used to design menus on the design surface. To invoke it while in the UI designer, double-click a JMenuBar or JPopupMenu component in the component tree, or select the component and press Enter. |
Column designer | Allows you to work visually with data set components. To invoke it, double-click a data set. Available in JBuilder Professional and Enterprise. |
For more information, see "Tutorial: Building an application" in the Quick Start. You can also see the online tutorials, "Building a Java text editor" and "Creating a UI with nested layouts." Additionally, look at "Designing a user interface" in Building Applications with JBuilder.
Using the UI designer
JBuilder provides tools for visually designing and programming Java classes, allowing you to produce new compound or complex components.
To use the visual design tools, a file must meet the following requirements:
- It must be a Java file (excluding Inner and Anonymous classes).
- It must be free from syntax errors.
- It must contain a class whose name matches the file
name.
Note: The class cannot be an Inner class or an Anonymous class.
The UI designer is used to manipulate JavaBeans that extend java.awt.Container
. For example, the JavaBean can extend any of the following classes:
JFrame
JPanel
JDialog
JApplet
Note: These requirements are all met when you create files with the Application wizard or the Applet wizard.
Viewing a file
- Double-click a Java file in the project pane. The file opens the source editor in the content pane.
- Select the Design tab at the bottom of the content
pane. The file changes to the design view, or the designer. The component palette and the Inspector become available.
Adding and manipulating components
- Click a component in the component palette to select it.
- Click either in the designer or on the appropriate parent in the structure pane to drop the chosen component into the designer.
- Use the component tree in the structure pane to keep track of where your UI components are in relation to each other. Cut and paste components in the component tree to stack and nest them the way you want them.
- Select the container you want to apply a layout manager to, then select
layout
in the Inspector to choose and apply the desired layout manager.
- Double-click the right column fields of the Inspector to view available values or activate text fields.
Note: JBuilder keeps the designer
and the Java source code synchronized. When you change the design in the UI
designer, JBuilder automatically updates the source code, and when you change
the source code, the change is reflected in the UI designer.
For more information, see "JBuilder's visual design tools" in "Designing a user interface" in
Building Applications with JBuilder.
Designing menus
JBuilder includes a menu designer that makes it easy to create menus. You can visually design both drop-down and pop-up menus.
To access JBuilder's menu designer,
- Double-click a Java file in the project pane to open it.
- Select the Design tab at the bottom of the content pane to change to the designer.
- Add a menu component by clicking a menu component from the component palette then clicking in your design.
- Double-click the new menu component in the component tree to activate the menu designer.
To return to the UI designer, double-click any component in the UI folder of the component tree.
For more information, see "Designing menus" in Building Applications with JBuilder.
Setting component properties and events
The Inspector in the UI designer allows you to visually edit component properties and attach code to component events. You can make changes to the properties and events in the Inspector and the appropriate code is automatically inserted into your source code.
For more information, see
"Designing a user interface" in Building Applications with JBuilder.
Using the Inspector, you can:
- Set the initial property values for components in a container and for the container and its layout manager (initialization code).
- Create, name, and delete event listeners in a container that will receive events from the component in the container (event handling code).
- Save
text
property String
values to a ResourceBundle, or revert a resourced String
back to a String
constant.
- Change the level of properties exposed in the Inspector.
- Expose a property as a class level variable so you can
change it in the Inspector.
Any changes you make in the Inspector are reflected immediately in the source code and in the UI designer.
For more information, see "Handling events" in Building Applications with JBuilder.
Opening the Inspector
To display the Inspector,
- Select a Java file in the project pane and press Enter to open the file in the content pane.
- Select the Design tab at the bottom of the AppBrowser to access the designer. The Inspector is displayed at the right of the content pane.
- Adjust the width of the Inspector by dragging its left border.
For more information, see "Using the Inspector" in Building Applications with JBuilder.
Designing layouts with layout managers
A program written in Java might be deployed on more than one platform. If you were to use classic UI design techniques that specify absolute positions and sizes for your UI components, the UI might not look as you intended on all platforms. What looks fine on your development system might be unusable on another platform. To solve this problem, Java provides a system of portable layout managers.
Layout managers give you the following advantages:
- Correctly positioned components that are independent of fonts, screen resolutions, and platform differences.
- Intelligent component placement for containers that are dynamically resized at runtime.
- Ease of translation with different sized strings. If a
string increases in size, the components stay properly aligned.
JBuilder provides the following layout managers from Java AWT and Swing:
JBuilder Professional and Enterprise also provide these custom layouts:
XYLayout
, which keeps components you put in a container at their original size and location (x,y coordinates)
PaneLayout
, used to divide a container into
multiple panes
VerticalFlowLayout
, which is very similar to FlowLayout
except that it arranges the components
vertically instead of horizontally
BoxLayout2
, a bean wrapper class for Swing's BoxLayout
, which allows it to be selected as a layout in the Inpsector
OverlayLayout2
, a bean wrapper class for Swing's OverlayLayout
, which allows it to be selected as a layout in the Inspector
You can create custom layouts of your own, or experiment with other layouts such as those in the java.awt
classes, new or third-party layout managers. Many of these are public domain on the Web or accessible to members of the OpenSource community. If you want to use a custom layout in the UI designer, you may have to provide a Java helper class file to help the UI designer use the layout.
Most UI designs use a combination of layouts, nesting different layout panels within each other.
For more information, see "Using layout managers" in Building Applications with JBuilder.