Step 9: Nested Layouts
- Select Panels 7 and 8 and change their layouts to FlowLayout.
- In the Component Tree, select Panel 7's FlowLayout object (flowLayout4) and set the following properties in the Inspector:
alignment=0
hgap=3
vgap=0
- Select Panel 8's FlowLayout object (flowLayout5) and set the following properties:
alignment=2
hgap=2
vgap=0
With these changes, Panels 7 and 8 now respect the preferred width of the toolbar panels contained in them, and allow each nested toolbar panel to show all of its buttons on a single row.
Your toolbars should look something like this:
To complete the toolbars, you need to change the layout for Panel 5.
- 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.
- Select Panel 7, and in its constraints property in the Inspector, choose West. 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: