Tutorial Step 8 Step 10

Creating a UI with nested layouts

Step 9: Completing the toolbar

  1. Select panels 7 and 8 and change their layouts to FlowLayout.

    Note: If one of the toolbars disappears, adjust panel 7's hgap to a lower number to make both toolbars fit in the panel.

  2. In the component tree, select panel 7's FlowLayout object and set the following properties in the Inspector:
    alignment=LEFT
    hgap=5
    vgap=0

  3. Select panel 8's FlowLayout object and set the following properties:
    alignment=RIGHT
    hgap=2
    vgap=0

Your toolbars should look something like this:

To complete the toolbars, you need to change the layout for panel 5.

  1. Select panel 5 which contains all the toolbars and change it to BorderLayout. BorderLayout forces panel 7 to the Center area and panel 8 to the East. While this will probably work fine, let's change the constraints for panel 7 in this BorderLayout.

  2. Select panel 7 and choose West for its constraints property in the Inspector. By doing this, you guarantee that when the user resizes the frame, the extra space will go in the gap between the second and third toolbars.
Now your UI should look similar to this:

Tutorial Step 8 Step 10