If it is not already open, open the Moon Travel Planner project.

Double-click main.nib in the Resources group in the project window.

In Interface Builder, double-click the MainWindow icon in the Instances pane.

Choose Palettes from the Palettes submenu in the Tools menu.

Click the Enhanced Controls button in the palette toolbar.

Add a PICT control to the top center of the interface. This is a container for the image of the moon. Drag a PICT box from the Enhanced Controls palette to the top center of the Moon Travel Planner window. Just use the “eyeball” method to place the PICT in the middle, but make sure it is no higher than what the blue Aqua guide (shown in Figure 5.7) suggests. We’ll explain how to lay out the interface later, in Section 5.2.5.

Figure 5-7. An Aqua guide above the PICT control

Resize the PICT control so it has the dimensions of the image you want to add. The moon image supplied with the tutorial materials is 100 by 100 pixels. (See the preface for information on where to download the tutorial materials.) With the PICT control selected, choose Show Info from the Tools menu, choose Size from the pop-up menu, and type 100 in the height and width fields, as shown in Figure 5.8. Then press Return. If the PICT pops out of place, just drag it so its top aligns with the Aqua guide.

Figure 5-8. The Size pane for the PICT control

Click the Basic Controls button in the Carbon toolbar.

Add a static text field just below the PICT. This is the label for the radio button group you’ll add later. From the Controls palette, drag the object named Static Text to just below the PICT control, as shown in Figure 5.9. Once again, let the guide show you how close to place the static text to the PICT.

Enter Mode of Transportation as the static text field’s value. Double-click the static text field, type Mode of Transportation, and press Return. If the field is too small for the text, click one of the “knobs” surrounding the text field and drag it until the text just fits.

Add a radio button group below the Mode of Transportation static text field. The user will select a mode of transportation from this group of radio buttons. From the Controls palette, drag the radio button labeled Radio 1 to the area just below the Mode of Transportation text field. The Radio 1 and Radio 2 radio buttons move as a unit because they belong to a radio button group. Use the Aqua guides as shown in Figure 5.10 to space the radio button group in relation to the Mode of Transportation text label. Don’t worry too much about centering them, because you’ll do this later.

A radio button group is a great control to use when you want users to select one, and only one, option from among many. A radio button group automatically tracks a user’s selection. Your application does not need to track, select, and deselect options; you only need to read the setting. You’ll do that in Chapter 6 when you write the code associated with the radio button group.

Figure 5-9. A static text object below the PICT control

Figure 5-10. Aqua guides for the radio button group

Increase the number of radio buttons in the radio button group to 4. With the radio button group selected, choose Show Info from the Tools menu. Choose Attributes from the pop-up menu. As shown in Figure 5.11 you can use the Size box to change the number of rows and columns of a radio group. In the Rows field, type 4, and press Return.

Figure 5-11. Radio group and info window

Resize the radio button group by dragging its corner so you can see all four radio buttons.

Label the radio buttons: Foot, Car, Commercial Jet, and Apollo Spacecraft. Double-click Radio 1 so the text becomes editable, type Foot and press Return. Use this procedure to label the other three radio buttons.

Enter MTPP as the radio button group’s signature and 130 as its ID. You should use the application signature (otherwise known as creator code) for the signature. In Section 5.1 we mentioned the official, registered creator code for the Moon Travel Planner application is MTPP. You’ll use this as the signature for any control that needs a control ID in the Moon Travel Planner application. In the Radio Group Info window, choose Control from the pop-up menu. In the Control ID box, type MTPP in the Signature field and 130 in the ID field. You’ll need these values later when your program reads the radio button group setting.

Add the Compute Travel Time button. The Compute Travel Time button issues a command that calculates the travel time to the moon in days, based on the selected mode of transportation. Drag the Push button from the palette to the area below the radio button group, as shown in Figure 5.12.

Figure 5-12. Push button added to the Moon Travel Planner window

Enter Compute Travel Time as the button’s text. Double-click the button, type Compute Travel Time, and press Return. If the text isn’t visible, select the button and choose Size to Fit from the Layout menu.

Enter tRav as the button’s command. Choose Control from the pop-up menu in the Button Info window, type tRav in the Command text field, and press Return. When the user presses this button, it sends a tRav command to the Carbon Event Manager, which in turn calls your handler for the tRav command. You’ll define the handler in the next chapter.

Make the Compute Travel Time button the default button. A default button pulses and is the button that’s selected when the user presses Return. Choose Attributes from the pop-up menu in the Button Info window and select Default as the Button Type, as shown in Figure 5.13.

Figure 5-13. Compute Travel Time button set as a default button type

Add a static text field to the area below the radio button group. This labels the field that displays the computed travel time to the moon. From the palette, drag the object named Static Text to the area below the Compute Travel Time button.

Enter Travel Time in Days as the static text field’s value. Double-click the field, type Travel Time in Days, and press Return. If the field is too small for the text, make the field larger by dragging on of the “knobs” surrounding it.

Add a text field to the right of the Travel Time in Days label. This is the field in which the computed travel time is displayed. Drag the white box under the push button labeled Button from the Controls palette to the area next to “Travel Time in Days,” as shown in Figure 5.14.

Figure 5-14. Text field to display travel time

Enter MTPP as the text field’s signature and 129 as the text field’s ID. With the text field selected, choose Show Info from the Tools menu. Choose Control from the pop-up menu in the Edit Text Info window. In the Control ID section, type MTPP in the Signature field and 129 in the ID field, as shown in Figure 5.15. You’ll need these values later when your program writes the computed travel time to the text field.

Figure 5-15. A control ID for a text field

Add a Quit button. Drag a push button from the palette to the lower-right side of the main window. You should use the Aqua guides to place the button in the lower-right corner of the window, as shown in Figure 5.16.

Figure 5-16. Quit button and Aqua guides

Enter Quit as the button’s text. Double-click the button, type Quit, and press Return.

Select quit as the button’s command. Choose Control from the pop-up menu in the Button Info window, then choose Quit from the Command pop-up menu, as shown in Figure 5.17. When the user presses this button, the button sends a quit command to the Carbon Event Manager, which in turn calls a built-in handler that quits the application. As you can see, there are a number of other commands from which you can choose when you want to create a control that handles a standard task.

Figure 5-17. The built-in quit command from the Command pop-up menu

Choose Save from the File menu.

Copy the moon.rsrc file to the Moon Travel Planner folder. You must do this in the Finder. Drag the moon.rsrc file to the Moon Travel Planner folder.

Add the moon.rsrc file to the Moon Travel Planner project. Make the Moon Travel Planner project active by clicking the Project Builder icon in the Dock. Then choose Add Files from the Project menu, select the moon.rsrc file, and click Open. A sheet dialog appears, as shown in Figure 5.18. Select “Copy items into destination group’s folder (if needed),” then click Add. Project Builder adds the file to the Resource group based on the file’s extension. You should see the moon.rsrc file in the Resources group of the Groups & Files list. If you see the file, but it’s not in the Resources group, just drag it to the Resources group.

Figure 5-18. Add Files dialog in Project Builder

Make Interface Builder active; click main.nib in the Project Builder file list.

Click the Images tab in the main.nib window. Notice that the Images pane in Figure 5.19 appears to have a duplicate image of the graphic you added. A duplicate image is usually a preview image created by the application you used to make the PICT resource. You can ignore it, or use an application such as ResEdit to open the PICT resource file and delete the preview image.

Drag the icon that looks like the moon and is named PICT to the PICT box, as shown in Figure 5.19. When you release the pointer, the moon image takes on the dimensions of the PICT control. Your window should look similar to Figure 5.21.

Figure 5-19. Dragging a PICT resource to a PICT control

Choose Show Layout Rectangles from the Layout menu. Rectangles appear around each interface object, as shown in Figure 5.20.

Make sure the top of each object is spaced correctly from the bottom of the adjacent object. Move an object until you see an Aqua guide, then align the edge of the layout rectangle to the guide.

Use the Make Centered Column command to center the image, the Mode of Transportation text label, the radio button group, and the Compute Travel Time button. Select the items by clicking each as you press the Shift key or by clicking and dragging a selection rectangle around the items. Then choose Make Centered Column from the Alignment submenu in the Layout menu.

Use the Aqua baselines to align the Travel Time in Days text field with the Travel Time in Days label. Select the Travel Time in Days text field and move it so the baseline shown by the Aqua guides aligns with the baseline of the Travel Time in Days label.

Center the Travel Time in Days text field and the Travel Time in Days label. Use the Size pane in the Info window to make sure the Bottom Left x value of the Travel Time in Days label is equal to the Bottom Right x value of the Travel Time in Days text field.

Make sure the Quit button is aligned properly. Move the Quit button. As you approach the corner, you should see the Aqua guides appear, as shown in Figure 5.20. Make sure the top of the Quit button isn’t too close to the Travel Time in Days label and text field. If it is, you may need to adjust the window height and move the Quit button lower.

Figure 5-20. Layout rectangles around all controls, and Aqua guides for the Quit button

Choose Hide Layout Rectangles from the Layout menu.

Choose Save from the File menu.

Switch from Interface Builder to Project Builder by clicking the Project Builder icon in the Dock.

Click the Build button in the Moon Travel Application project window.

Click the Run button. The main window for the Moon Travel Planner should open and look something like the window shown in Figure 5.21.

Click Quit.