Designing a user interface

You can quickly and easily assemble the elements of a user interface (UI) for a Java application or applet using JBuilder's visual design tools. Simply construct the UI with various building blocks chosen from a palette that contains components, such as buttons, text areas, lists, dialogs, and menus. Then 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.

Important: It is wise to keep your application framework and your UI in separate Java files. When you start a project using the Application or Applet wizard, JBuilder creates two files for you: one for the runnable class, and a Frame or Panel for the UI elements.


What are components?

Components are the building blocks used by JBuilder's visual design tools to build a program. Each component represents a program element, such as a user-interface object, a database, or a system facility. You build your program by choosing and connecting these elements.

JBuilder comes with a set of ready-to-use components on the component palette. You can also supplement these components by creating new components yourself or by installing third-party components. See Managing the component palette for more information.

JBuilder components exhibit true object-oriented programming (OOP) behaviors:

Each component, therefore, encapsulates some element of a program, such as a window or dialog box, a field in a database, or a system timer. UI components must ultimately extend either java.awt.Component or extend some other class that derives from it such as java.awt.Panel or java.awt.Canvas. Other JavaBean components do not have this requirement.

JBuilder uses the JavaBean component model. To be recognized and used in JBuilder, components must conform to the JavaBeans specification.

For further details about the exact technical requirements for JavaBean components, see the JavaBeans specification at http://www.javasoft.com/beans/docs/spec.html.

To be useful in a program, a component must provide the means by which it can be manipulated or interact with other components. JavaBean components accomplish this by providing properties, methods, and events.

Properties
Information about the current state of a component is called a property of the component. Properties can be thought of as named attributes of a component that a user or program can read (get) or write (set). Examples of component properties are height and enabled.
Methods
Components generally have certain actions they can perform on demand. These actions are defined by methods you can call in code to tell the component what to do. Examples of component methods are repaint and validate.
Events
Components provide opportunities for you to attach code to certain occurrences, or events, making components fully interactive. By responding to component events, you bring your program to life. An example of a component event is actionPerformed.

All components have properties, methods, and events built into them. Some of the properties, methods, and events that components provide are actually inherited from ancestor classes, which means they share these elements with other components. For example, all UI components inherit a property called background that represents the background color of the component. Each component can also introduce its own unique properties, methods, and events. For example, the Checkbox component has a property called checkState that indicates whether the box is checked.

Component categories

JBuilder provides the following four categories of JavaBean components on the component palette:

UI components

UI components are classes that derive ultimately from java.awt.Component. These components can be used as controls in a user interface and are displayed in the UI designer when you drag and drop them from the component palette. They also appear in the component tree in the UI folder.

UI components are elements of the program that the user can see and interact with at runtime because they have the capacity to paint themselves on the screen. In general, they look the same at design time as they do at runtime, which facilitates UI layout. Whenever possible, JBuilder's UI components are "live" at design time. For example, a list displays its list of items, or a data grid connected to an active data set displays actual data.

Menu components

Menu components derive from java.awt.MenuComponent. At design time, JBuilder displays menu components in the Menu folder in the component tree and provides a special menu designer. See "Designing Menus."

Data access components

This is a feature of JBuilder Professional and Enterprise.
Data access components are non-UI components used in a database application to connect controls to data. Data access components do not appear in the UI container at design time, but they do appear in the component tree in the Data Access folder where you can select them for setting properties and attaching event handlers in the Inspector.

Other JavaBean components

Other JavaBean components are program elements that do not appear on the surface of your UI or in the UI designer. But they do appear in the component tree in the folder labeled Other, where you can select them for setting properties and attaching event handlers in the Inspector. Examples of these include pop-up UI elements, such as dialogs, or other non-UI JavaBean components.

Which component should you use?

JBuilder supplies several libraries of JavaBean components on the component palette for user interface design, including Java AWT and Swing components, plus JBuilder dbSwing in JBuilder Professional and Enterprise.

By comparing components that perform related tasks, you can determine which components are best suited to a particular task. In many cases, several components can perform the desired action, but you might choose one based on how it looks and works or how easy it is to use.

For example, if you are writing a simple applet, you may not need the extra features of a Swing component. Also, many of the browsers do not yet support Swing. To avoid these browser issues and to keep the file size smaller and to improve the loading time and speed of the applet (due to fewer imports and smaller classes), you might choose the AWT equivalent (if one exists) instead.

The dbSwing components are a feature of JBuilder Professional and Enterprise. dbSwing components are subclasses of the Swing components: they add a dataSet property and a columnName property to make the Swing components data-aware. All dbSwing components are lightweight, as are all Swing components.

What are containers?

Containers hold and manage other components and extend java.awt.Container. Containers generally appear as panels, frames, and dialogs in a running program. All your UI design work in JBuilder takes place in containers. Containers are also components, so as with other components, you interact with them by getting and setting their properties, calling their methods, and responding to their events.

A non-container subclass "composite" can also hold UI components. For example, you can design the Application.java file created by the Application wizard and drop panels and dialogs into it on the component tree. If a composite class has only non-UI components, it is not visible at runtime or in the UI designer.

One example is a DataModule, whose purpose is to instantiate and interconnect a set of data components and make them available to visible UI components in multiple UI containers.

Windows and Panels


JBuilder's visual design tools

JBuilder provides tools for visually designing and programming Java classes, allowing you to produce new compound or complex components.

The visual design tools consist of a component palette, an Inspector, one of three designers, and a component tree. To access the design tools, you must open a source file in the content pane, then click its Design tab to load the designers. A file is only designable in the designers if it inherits java.awt.Container.

JBuilder in design view

JBuilder visual design tools

The component tree appears in the structure pane. It displays a structured view of all the components in your source file, and their relationships. The component tree is divided into folders, and each folder is built and displayed by a designer.

Specific designers are activated by doing one of the following in the component tree:

  1. Right-clicking a node and choosing Activate Designer.
  2. Double-clicking the desired node.
  3. Selecting a node and pressing Enter.

The design view of the content pane contains the rest of the visual design tools. A short description of each of the tools and designers follows:

The component palette displays at the top of the designer and contains visual and nonvisual components you can drop into the designer or the component tree.

The Inspector displays at the right of the designer. It is 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 and immediately in the source code.

Three designers share the design surface on the Design page of the content pane: the UI designer, the menu designer, and the column designer.

The UI designer is used in assembling your visual UI components. When you first click the Design tab after opening a file in the content pane, JBuilder displays the UI designer by default. UI components appear in the UI folder of the component tree.

The menu designer is used to create menus. Menu components appear in the Menu folder of the component tree.

The column designer (The column designer is a feature of JBuilder Professional and Enterprise.) It allows you to work visually with data set components. Data set components appear in the Data Access folder of the component tree.

JBuilder keeps the visual design tools and the Java source code in sync. If you change the design visually, JBuilder automatically updates the source code, and if you change the source code, JBuilder updates the visual design.


Requirements for a class to be visually designable

If you want to use the visual design tools on a file, it must meet the following requirements:

You can use the UI designer to manipulate classes that extend java.awt.Container or that contain JavaBeans that extend java.awt.Container. (JavaBeans are public classes that have a constructor which takes no parameters.)

For example, a designable class can extend any of the following classes:

Any file that meets the above requirements can be designed using the component tree and the Inspector. This allows you to visually design a non-UI class.

Note: These requirements are all met when you create your files with the Application wizard or the Applet wizard.

When you first add a component to your design, the JBuilder visual design tools will make sure that your class has a public default constructor, a private jbInit() method, and that this jbInit() method is called correctly from the default constructor. If JBuilder doesn't find this code, it adds it. It also adds any imports needed by the component.