Tutorial Step 6 Step 8

Step 7: Nested Layouts

Create a status bar in Panel 4 at the bottom as follows:

Add three StatusBar components from the JBCL tab to Panel 4 as shown in the image below. Don't worry about their sizes. Just make sure they are contained by Panel 4. This panel will change to GridLayout later which will make the status bars the same size.

To achieve a three dimensional look seen in many status bars, the StatusBar component is based on a BevelPanel for which you can control the amount of inner and outer bevel on the panel edges. The two properties involved are called bevelInner and bevelOuter. The values possible for these properties are:

We're going to change these values to make Panel 4 flat, and the status bars lowered, although you won't see the final result until you change the layout to GridLayout where you can set the horizontal gap (hgap).

  1. Select Panel 4.
  2. In the Inspector, change the values for both the bevelInner and bevelOuter properties to Flat.
  3. Now, selecting each StatusBar component in turn, change both the bevelInner and bevelOuter properties to Lowered.
  4. Save your work.

Your status bar should look something like this:

Tutorial Step 6 Step 8