Tutorial Step 11 Step 13

Creating a UI with nested layouts

Step 12: Finishing the status bar and main panel

Now let's finish the status bar and the main panels.
  1. Select panel 4 which contains all the status bar components and change its layout to GridLayout. Notice, since the labels in the status bar are empty, the status bar collapses at the bottom of the UI. To remedy this, select label 2 and do the following:

    1. Type Status: in the text property.
    2. Change the font value to "SansSerif, regular, 12"
    3. Change the foreground value to "Black"

    Notice how GridLayout changes all the status bars to exactly the same size.

  2. Select panel 4's GridLayout object in the component tree 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.)

  3. 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.

  4. Finally, select the contentPane in the component tree and change it to BorderLayout. Make sure jPanel1's constraints property is set to Center.

    If, after changing the container to BorderLayout, your entire UI design is clumped together at one edge of the frame, the panel's constraints property is not Center. Just select jPanel1 again and change its constraints property to Center.

    You're almost done. Your UI components should all be in their correct places now.

    Move on to the last step.

Tutorial Step 11 Step 13