Tutorial Step 3 Step 5

Step 4: Nested Layouts

Now, add the buttons to the toolbar panels and label them.
  1. Using the Button from the AWT tab on the Component Palette, put four buttons into Panel 9, which will form the File toolbar. (See the picture below.)
  2. Select each button in turn, and change its label property in the Inspector as follows:
  3. Now, add four AWT buttons to Panel 10 and change each label as follows:

  4. Put one AWT Button (button9) into Panel 11 and change its label to Help.
  5. Save your work again.

Your design should now look something like this:

If necessary, adjust the positions and sizes of the buttons and/or their containers, so you can see what you are doing. The buttons will probably be irregular sizes and shapes. Don't worry about getting it perfect at this point, because when you change the panels to FlowLayout later, the layout manager will realign the buttons. FlowLayout determines the height and width of each button based on the text of its label. Since all the buttons have the same font size, they will automatically be the same height.

The important thing now is that the buttons are fully nested inside their panels. To be sure they are all embedded properly, check the Component Tree to see if each button is indented under the correct panel in the tree outline. If any buttons did not get nested inside their panels, you'll see them in the Component Tree at the same level of indentation as their panels. Move those buttons slightly with the mouse until they do nest properly inside the panels. Most of the button must be inside the panel to be contained by it.

Tutorial Step 3 Step 5