Exercise 3: Refining a Screen 

In this exercise, you learn how to refine the look of your screen. You will change two existing text fields into radio buttons and you will add labels and boxes to define different areas of your screen. Before you begin, open the Screen Painter fullscreen editor to screen 100 .

Convert Fields to Radio Buttons

The Regular and Charter fields on your screen describe two types of flights. A flight is either one type or the other. In an interface, radio buttons are used to indicate a single choice among a set of mutually exclusive choices. To convert the text fields to radio buttons, proceed as follows:

  1. Use a "rubber-band" to select both the Regular and Charter fields.

    2. The Screen Painter indicates the fields are selected.

  2. Choose Edit ® Convert ® Radio button ® Button left.

    3. The Screen Painter converts both fields to radio buttons. Now, you need to group the buttons so that they are mutually exclusive.

  3. Select Edit ® Radio button group ® Define.

    4. The Screen Painter groups the buttons. Small handles in the shape of diamonds appear along the sides of the group . Use the square handle at the top to move the group. Use the diamond handles to reshape the group if necessary.

  4. Save your changes.

Add a Box

You can add a box around the schedule elements on your screen to indicate that they are related:

  1. Select the Frame tool from the palette.
  2. Move your cursor into the work area.

    3. The cursor changes shape to indicate you are about to draw a box.

  3. Draw a box around the flight information in your screen.

    4. Position the cursor to the left of the group. Hold down the left mouse button and drag the cursor down and to the right . The painter creates a frame around the group. When you release the left mouse button, the box remains selected.

  4. While the box is selected, use the keyboard to type Schedule .

    5. The system creates a title for your new box.

  5. Repeat steps 1 through 3 to create a box around the radio group.
  6. Title the new box Classification .
  7. Save your changes.

Convert Fields to Check Boxes

Convert some existing fields to check boxes. Check boxes are used for choices that are either set or not set. When a choice is set, a check mark appears in the box. Proceed as follows to add check boxes:

  1. Select the Snack, Meal, and Movie fields.

    2. The Screen Painter indicates both fields are selected.

  2. Choose Edit ® Convert ® Check box ® Button left.

    3. The Screen Painter converts the fields to check boxes. Because each check box is an individual choice that does not rely on the other choices, you do not need to group the check boxes.

  3. Save your changes.

Check Your Work

Take a moment to examine what you have accomplished. Test your newly refined dialog. Your screen in simulation mode appears as it will to your users . Recall that, by definition, radio buttons have logic. If one button is selected, the others must not be. As you test your dialog, you will notice the Screen Painter added the radio button logic for you.