Tutorial Step 12

Creating a UI with nested layouts

Step 13: Finalizing your layout

Everything is finished except for a little cleanup and polish. If you did change the color of any panels, now is your opportunity to change them back to their original gray.

  1. Using multiple selection in the component tree, select all the panels in your design.

  2. In the Inspector, double-click the background property and select light gray (RGB value 192, 192, 192). Don't worry about its appearance in the designer at this point. The bevels make a lot of white space. You might also want to select all the buttons and make their backgrounds the same as the panels.

Next, lets eliminate any unwanted borders.

  1. Select all the panels in your design for which you want to remove the borders and change the border property to <none>.

    This is purely your choice and may be influenced by which look and feel you decide to use. You can even customize a border by clicking the ellipses button at the right of the border property to open the Border Property Editor.

    We removed all the borders except for the following:

    Panel 1 = RaisedBevel
    Panel 2 = Etched
    Panel 3 = Etched
    Text Area = Lowered Bevel Labels 2, 3, 4 = Lowered Bevel

Now, the UI is complete except for any other finishing touches you might want to add. This is approximately how your design should look now:

And that's all there is to it! While it seems slow in the learning phase, once you become familiar with the different layouts, you'll be able to plan and implement layouts more quickly.

It is easy to see, now, that using multiple levels of panels with only the easier layouts can actually be pretty tedious and complicated. A better alternative is to take the time to learn GridBagLayout. In the end, all your UI designs will be much simpler and better controlled. You will still use nested layouts, but only one or two levels deep. GridBagLayout will control the rest of the layout behavior.

For example, the entire toolbar stack in this UI could have been replaced by one GridBagLayout container holding just three components: two GridLayout panels (containing buttons 1-8) and one button (button 9).

There are, of course, toolbar components on the component palette that you would normally use instead of panels and buttons. For the purposes of this layout tutorial, we just used panels and buttons to demonstrate how to use nested panels and layouts to get the look you want. The buttons could have been any other type of component in your design.

We strongly recommend that if you are serious about doing Java UI development, you take the time to learn how to use GridBagLayout. Once you understand it, you'll find it indispensable.

For an indepth tutorial on GridBagLayout, see the "GridBagLayout Tutorial".

To learn how to write code that responds to user events in your application, see the online tutorial called Building a Java text editor.

This concludes the tutorial.

For additional suggestions on improving this tutorial, send email to jpgpubs@inprise.com.

Tutorial Step 12