Tutorial Step 2 Step 4

Step 3: Nested Layouts

Now, let's work on the toolbars. If you look back at the picture of the finished UI design, you'll notice that there are three sets of toolbars. Two of them (File and Edit) are grouped together and left justified, and the third (the Help button) is by itself on the right. To accomplish this, we'll group the File and Edit toolbars into one panel so they'll stay together. And even though there is only one button in the Help toolbar, to ensure even button alignment across all the toolbars, we'll use the same number of panel levels for the Help button as for the other toolbar buttons.

  1. Within the new Panel 5 at the top, place two panels (Panels 7 and 8) beside each other as shown below:

  2. Next, in Panel 7, draw the two toolbar panels for the File toolbar (Panel 9) and Edit toolbar (Panel 10).
  3. Finally, in Panel 8, draw a panel to hold the Help button (Panel 11).
  4. This is a good time to save your work.

Your design should now resemble this:

Tutorial Step 2 Step 4