Tutorial Step 7 Step 9

Step 8: Nested Layouts

At this point, you have completed the first phase of the UI design work, adding all the components to XYLayout containers, starting with the larger outside containers and working down to the smallest components inside these containers. Next you'll work from the inside out, converting panels to more portable layouts and making various adjustments as needed as you go along.

To make this part go more quickly, whenever possible select multiple components to change a common property for them all at the same time. Selecting multiple components in a complicated UI is often much easier done in the Component Tree than in the UI Designer, and it is the only way you can select layout manager components.

Let's start at the top of the design with the toolbars.

  1. Holding down the Ctrl key, in the Component Tree, click each panel that contains toolbar buttons: Panel 9, Panel 10, and Panel 11.
  2. With all three panels selected, change the layout property in the Inspector to FlowLayout.

At this point, your toolbars might look like this:

Don't be concerned if changing to FlowLayout causes some buttons to disappear or be clipped. They may wrap out of sight onto a hidden row because the panels containing them aren't wide enough, or because the default alignment and gap settings are too big. They also might be clipped at the bottom or top because the vertical gap needs to be adjusted. Rather than adjust the size of the toolbar panels right now, let's just modify the alignment and gap properties for the FlowLayout panels. Other problems may disappear when you change the layout of the parent containers to something besides XYLayout, as the new layout managers will make adjustments to the toolbar panels based on the toolbar panels' preferredSize.

First, set the alignment for each of these three panels. According to the original design, there is some gap between each of the three toolbars. This is why we put the toolbar buttons into three separate panels. You can create some of the gap between the three sets of toolbars by changing the horizontal gap and alignment properties for the FlowLayout object controlling each panel.

  1. Using the same multiple selection technique as before, in the Component Tree, select the new FlowLayout objects for Panel 9 (flowLayout1) and Panel 10 (flowLayout2).
  2. Select Panel 11's FlowLayout object (flowLayout3).
Now your toolbars should be similar to this:

It's not completely right yet, but changing the layout for the next panel layer will fix it.

Note: If you need to, you can change the order of the buttons in your FlowLayout panel. To do this, right-click a button and choose Move to First or Move to Last.

Tutorial Step 7 Step 9