Designing a user interface

Using JBuilder's visual design tools, you can quickly and easily assemble the elements of a user interface (UI) for a Java application or applet. You 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 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.

This chapter discusses the following elements of designing a user interface with JBuilder's visual design tools:


About components and containers

What are components?

Components are the building blocks used by Borland 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.

Borland 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 in Getting Started.

Borland 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 JavaBeans components do not have this requirement.

Borland JBuilder uses the JavaBeans component model. To be recognized and used in JBuilder, components must conform to the Java Beans specification. For further details about the exact technical requirements for JavaBeans components, see the JBuilder Component Writer's Guide, and JavaSoft's JavaBeans Tutorial at http://java.sun.com:80/nav/read/Tutorial/beans/index.html.

To be useful in a program, a component must provide the means by which it can be manipulated or interact with other components. JavaBeans 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 JavaBeans 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 will display in the UI Designer when you place them there from the Component Palette. They also appear in the Component Tree in the section labeled "UI".

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 will 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 Menus section in the Component Tree and provides a special Menu Designer. See Designing Menus

Data express components

Data express components represent non-UI components used in a database application to connect data-aware controls to data. Data express components do not appear in the UI container at design time, but they do appear in the Component Tree, in the Data Express section, where you can select them for setting properties and attaching event handlers in the Inspector.

Other JavaBeans components

Other JavaBeans components represent 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 Others section where you can select them for setting properties and attaching event handlers in the Inspector. Examples of these include popup UI elements, such as dialogs, or other non-UI JavaBeans components.

Which component should you use?

Borland supplies several libraries of JavaBeans components on the Component Palette for user interface design, including Borland JBCL components, JavaAWT and Swing components, and dbSwing components.

In many cases, the JBCL components are similar to the AWT components, the Swing components, or even the dbSwing components, and could be used interchangeably. So, how do you decide which ones to use?

Though the JBCL components are built on the Swing architecture, the JBCL components have additional advantages over the AWT and Swing components.

For example, the JBCL ButtonControl and a Swing JButton can display an image as well as text, where the AWT Button can only display text. The JBCL ButtonControl can also have a background texture, whereas neither the AWT Button nor the Swing JButton can. Many of the JBCL components use an advanced model-view that allows for large and/or remote data sources to be displayed.

By comparing JBCL, Swing, dbSwing, and AWT components that perform related tasks, you can determine which components are best suited to a particular task. In many cases there are several components that can all 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 the JBCL component. To keep the file size smaller and to improve the loading time and speed of the applet (due to less imports and smaller classes), you might choose the AWT equivalent (if one exists) instead. However, if you need maximum flexibility and database connectivity, you would choose a JBCL component.

The general advantage of the JBCL model-view components over the simpler AWT components is that the JBCL components are data aware and adapt their behavior to the data that is attached to them. JBCL components can easily be connected to sources of data by setting properties of the component. When you do this, the component automatically fills with live data from the data source.

For example, attaching a TableDataSet to a ListControl and setting the column property of the ListControl will automatically cause that ListControl to be filled with data items from the data source.

The dbSwing components are subclasses of the Swing components that add a dataSet property and a columnName property to make the Swing components data-aware.

For details about each of the components in the different libraries, see the online help reference. For more information on Borland's model-view architecture, see Model-view components in the Component Writer's Guide.

What are containers?

Containers hold and manage other components. These generally appear as panels, frames, and dialogs in a running program. All your visual design work in JBuilder takes place in containers. But it's also important to understand that 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 container has only non-UI components, it need not be a subclass of Container, and therefore is not visible at runtime. 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

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

JBuilder's visual design tools include the following:

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:
  1. It must be a Java file.
  2. It must be free from syntax errors.
  3. It must contain a public class whose name matches the file name.

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.

If you want the UI Designer to appear in the Content Pane, the class must also be a descendant of java.awt.Container. For example, it can extend Frame, Panel, DecoratedFrame, BevelPanel, Dialog, or Applet.

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 will add it. It will also add any imports needed by the component.

How JBuilder determines which designer to use

JBuilder picks the appropriate designer to use for a class as follows: