Designing user-interfaces for Java

by David Reilly

Overview

Java gives us with the ability to design and construct platform independent user-interfaces, using standard GUI components such as labels, text-fields, buttons, lists and drop-down boxes. While the basic elements are there, the interfaces constructed often fall short of both designer and user expectations.

We have layout managers that offer simplistic control over the positioning of user-interface elements. But these layout managers make it difficult to align text-fields and labels, and the only other option is to use absolute positioning.

The next generation of user-interface design tools, one can only hope, will give designers more control, and solve some of the problems facing us to day. In the mean time, there is hope! Microsoft's Visual J++ gives developers the freedom of pixel-level control over the interface, and provides an easy to use, drag and drop GUI design interface.

Demonstration source

The entire source code, include class files and Visual J++ project information, is available for download. You should pay particular attention to the AdditionFrame class, as it contains code for displaying the dialog, and a handleEvent method to access and modify the dialog's text fields.

You can download the whole example:

• tar.gz format

Using Visual J++ Resource Editor

Designing a user-interface with Visual J++ is extremely quick and easy. I'll take you step by step through the creation of a simple dialog, that has labels, textfields and buttons. We'll use the dialog created by Visual J++ to write a simple program that adds two numbers together. While the standard Java layout managers can be used to write simple dialog boxes like this, the designer must write code to layout the interface. Visual J++ allows a designer to layout an interface graphically, and to modify it easily.

Step One - creating an dialog

1. Create a new Java project, called MyFirstDataEntryGUI.
2. From the Insert menu, select the Insert Resource menu item.
3. Highlight the Dialog option, and click on 'New' to create a new dialog box.
   
   

 

Step Two - designing an interface

1. Your screen should now show a blank dialog box, with two buttons.
   
   

2. If you don't already see the component toolbar, you will need to enable it. From the Tools menu, select the 'Customize' option. From the Toolbar tab, click on the checkbox next to the Controls toolbar. The toolbar contains simple graphical user interface elements that can be used in your dialog (though not all can be used if you want a 100% Pure application).

3. We'll modify the properties of our dialog box now. Right-click on a blank space on the dialog box, to bring up the properties menu.
   
   
   
   Change the identification to something more meaningful, such as AdditionDialog. When we convert our interface into a Java class, it will use this identification field as the class name. Set the caption to addition, and this will change the title of our dialog box.

4. Next, we'll add three labels, three edit boxes, and modify the existing buttons. Using the component menu, select a label and click on the dialog box. Repeat this process for each user interface element. By right-clicking on each element after you create it, you can change its properties. Most important of all is that you use meaningful names for the edit boxes and buttons. For this example, you should call the edit boxes 'VALUE1', 'VALUE2' and 'SUM'.
   
   When finished, your dialog box should look something like the following illustration.
   
   

Using Visual J++ Resource Wizard

Once you have created a graphical user-interface, the next step is to convert it to a Java class. Save the dialog box you have created as a resource template (with a .rct extension). You may need to select the resource template file-type using the file-type drop-down list on the save dialog box.

Now, from the Tools menu, select the 'Java Resource Wizard'. The Resource Wizard takes a '.rct' file, and converts it into a Java class. Developers who code in Visual C++ may be familiar with resource templates, and yes, resource templates for C++ can be converted into Java (though not if they use components that don't map to the standard Java AWT palette).

The Resource Wizard will create some Java source files, which you must then add to your project. Once this is done, its time to create an instance of the user-interface, and write some actual code.

Creating a dialog frame

Dialogs created by the Resource Wizard are displayed within an AWT Frame (or subclass). This is important, because it separates the code that displays the interface (classes created by the Resource Wizard), and code that handles AWT events (subclasses of java.awt.Frame created by the developer).

From the Insert menu, select 'Insert New Class', and call it 'AdditionFrame'. AdditionFrame subclasses the Frame class. To our newly created class, we will add three functions - constructor, main, handleEvent. and a member variable.

Source for AdditionFrame

The source code for AdditionFrame is well commented, and much of it is self-explanatory. When the application is run, you should see a dialog box something like this :

There are two important issues arising out of the CreateControls method of the code generated by Visual J++, which I'll now address.

CreateControls

The CreateControls method of a Resource Wizard generated dialog has the potential to throw an exception. It appears to be a fault in the code generated by Microsoft Visual J++ - basically it fails to check if a default font for the frame exists. One part of its code will generate a null pointer exception, because the font object is set to null.
This can be easily remedied by setting a font before calling CreateControls (though I'd advise leaving a try/catch block there for safety).

The second issue raised by CreateControls is that quite often the font size is set too small. You can easily fix this by editing the CreateControls method of your dialog box, and modifying the line which assigns a new font size. Its very easy to find, as there is a large comment block before it. I find on my system that size 12 works well, but you may want to make it user configurable.

Conclusion

While not perfect, Visual J++ does give developers tighter control on how their interface looks, and allows developers to align labels and text fields better than with the standard layout managers Java provides. Visual J++, with its graphical design interface, is much more conducive to the creative process than dozens or even hundreds of user-interface creation code. While not without its faults, as a user-interface development tool, it is well worth a look!

This page was last updated 06 March 1998