Tutorial Step 11 Step 13

Step 12: Nested Layouts

Now let's finish the status bar.
  1. Select Panel 4 which contains all the status bar components.
  2. Change its layout to GridLayout.
    Notice how this changes all the status bars to exactly the same size.
  3. Select Panel 4's GridLayout object (gridLayout1), and change the hgap property to 2 to widen the raised area between the status bars.
    This step is purely a matter of taste, and not a necessity.
  4. Finally, select Panel 1 and change it to BorderLayout. It should assign Panel 2 to the North, Panel 3 to the Center, and Panel 4 to the South. If this doesn't happen, select each panel and correct its constraints property in the Inspector.

Tutorial Step 11 Step 13