Tutorial Step 4 Step 6

Step 5: Nested Layouts

  1. Inside Panel 6, put two ChoiceControl components from the Controls 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 property editor.
  4. In the items property editor, type in the three following font names: Helvetica, Courier, and Times Roman.

  5. Press OK. 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.
  6. Repeat the same process, for choiceControl2, typing the following list of font sizes: 8, 10, 12, 14, 16, 18, 20, 22, 24.
  7. 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