Tutorial Step 2 Step 4

Creating a UI with nested layouts

Step 3: Adding panels 7 and 8

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 and size 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 panel 5 at the top, place two panels (panels 7 and 8) beside each other as shown below:

    If you need to, enlarge the frame and its panels to make more space.

    Tip: Save time by changing the layout and border properties for both panels at one time. Hold down the Shift key and select both panels and change the properties in the Inspector. You can also do multiple selection in the component tree.

  2. Next, in panel 7, draw the two toolbar panels for the File toolbar (panel 9) and Edit toolbar (panel 10). The reason we have two here, instead of one, is to make two groups of toolbar buttons with a space between them.

  3. Finally, in panel 8, draw a panel to hold the Help button (panel 11).

  4. Change the layouts and borders.

  5. Use the options on the right-click menu to align the components.

  6. Save your work.

Your design should now resemble this:

Note: At the end of this tutorial, we'll show you how you can simplify the layout of the toolbar panels using GridBagLayout and only one level of nesting.

Tutorial Step 2 Step 4