Step 1

Creating a UI with nested layouts

This tutorial steps you through creating a user interface for a hypothetical application like a simple word processor. It shows you how to create the UI with JBuilder's visual design tools, using nested panels and the simpler layouts. It uses BorderLayout, FlowLayout, and GridLayout. Due to their complexity, GridBagLayout and CardLayout are discussed in detail elsewhere.

In this tutorial, you'll use the Swing JPanel for all panel components because it has a border property (unlike the AWT Panel.) You will use the border property to add borders to the panels so you can see their boundaries when adding components to them in the designer. Once your UI design is finished, you can remove the borders wherever you like.

JPanel is on the Swing containers tab in the component palette. Throughout this tutorial, any reference to a panel implies JPanel.

Also, in this tutorial, as soon as you add a new panel to the design, you will change its layout to XYLayout (JBuilder Professional or Enterprise), or null layout (JBuilder Foundation.) These layouts make your initial design work simpler because the components stay where you put them, and their size can be adjusted. After the entire UI design is populated, then you will systematically change the layouts of all the containers to the portable AWT layouts.

Note: In general, for the best layout control in a UI design, plus a design that is simpler and less deeply nested, we recommend you use a combination of GridBagLayout and the nesting techniques demonstrated in this tutorial. For an indepth tutorial on GridBagLayout, see the "GridBagLayout Tutorial".

For specific information about each of the layouts, see "Using layout managers" in Building Applications with JBuilder.

Here is the UI you're going to design in this tutorial:

Step 1