Step 1

Tutorial: Creating a UI with nested layouts

This tutorial steps you through the design and construction of a UI for a hypothetical application like a simple word processor. The purpose of this tutorial is to show you how you can create a UI with JBuilder's visual design tools using nested panels and the simpler layouts. It uses BorderLayout, FlowLayout, and GridLayout. Due to their complexity, CardLayout and GridBagLayout are discussed separately.

In this tutorial we use Borland's BevelPanel for all panel components, rather than the AWT Panel. Unlike the AWT Panel, the BevelPanel (found on the Controls tab of the Component Palette) has beveled edges which makes it visible in the UI Designer. Throughout this tutorial, any reference to a panel implies BevelPanel. Once your design is finished, you can remove the beveled edges wherever you like.

Also, in this tutorial, as soon as you add a new panel to the design, you will change its layout to XYLayout to make your design work simpler.

The components for our UI design will come from the AWT tab and the Controls tab of the Component Palette.

Here is the UI we're going to design:

To move among the steps of the tutorial, click the forward and backward navigation buttons at the top or bottom of each step.

Step 1