Tutorial Step 9 Step 11

Creating a UI with nested layouts

Step 10: Modifying more layouts

Congratulations! You've just completed the hardest part of the tutorial. Changing the rest of the layouts in the design is quite simple.

Let's finish the top section of the UI.

  1. Select panel 6 which contains the two JComboBox components and change its layout to FlowLayout. Notice that the components in this panel move to the center. This is the default alignment for FlowLayout.

  2. Select panel 6's FlowLayout object and change the properties to the following values:

    alignment = LEFT
    hgap = 10
    vgap = 2

  3. Next, select panel 2 which holds the top third of the UI design and change it to BorderLayout.

  4. Select panel 5 which contains the toolbars and set its constraints property to North.

  5. Select panel 6 and make sure its constraints property is South.

Tutorial Step 9 Step 11