Tutorial Step 4 Step 6

Step 5: Nested Layouts

  1. Inside Panel 6, put two ChoiceControl components from the JBCL tab on the Component Palette, one for Font Name (choiceControl1), and one for Font Size (choiceControl2). Size each of them to be about half the width of the panel.

    Note: You can also just drop the ChoiceControl components onto the panel and let them be their default size for now (which is very small). When this panel becomes FlowLayout, the layout manager will adjust the size of each component to accommodate the longest item in its list.

    Let's add some items to these ChoiceControl components so the FlowLayout manager will know how to size them.

  2. Select choiceControl1, in either the Inspector or in the UI Designer.
  3. In the Inspector, double-click choiceControl1's items property and click on its ellipsis button to bring up the Items Property Editor.

  4. Press the Add button in the Items Property Editor to add Item 1. Click on Item 1 to change the highlighted text to an edit box. Type in the font name Helvetica, then press Enter.
  5. Repeat the previous step to add two more items, Courier and Times Roman.

  6. Press OK when you are finished.

    Notice that only the first item in the list displays in the UI Designer. At runtime, when you click on the down arrow at the right of the ChoiceControl component, the entire list will be displayed.

  7. Repeat the same process, for choiceControl2, typing the following list of font sizes: 8, 10, 12, 14, 16, 18, 20, 22, 24.
  8. Save your work.
Your UI should resemble the one below:

Now run your program to see these in action. Click the down arrow on the ChoiceControl components and select a different item.

Tutorial Step 4 Step 6