In the last chapter, you set up the main window for the Moon Travel Planner application. Now, you’ll add objects to the main window so the window looks like the one we specified in Chapter 2. You’ll need to do the following:
Open the nib file.
Add an item from the Enhanced Controls palette.
Add items from the Controls palette.
Add a PICT resource to the project.
Align objects.
Check the interface.
As you did in the last chapter, you’ll open the nib file from the Moon Travel Planner project window:
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.
As you recall, our sketch of the main window in Chapter 2 shows a graphic image at the top of the window, so let’s start with that. To accomplish this, you’ll add one object from the Enhanced Controls palette—a PICT control. A PICT control is really just a container for an image; you use it to lay out the interface. Later, you’ll drag the image you want to appear in the interface on top of the PICT control.
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.
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.
The Controls palette has most of what you need to complete the Moon Travel Planner window: static text objects, a text field, buttons, and a radio button group. You’ll start adding these at the top and work down:
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.
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.
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.
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.
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.
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.
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.
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.
Choose Save from the File menu.
Your interface almost looks like the sketch in Chapter 2 except there is a PICT control instead of an image of the moon. Now it’s time to add the moon image.
The image must be a PICT resource. You can create a PICT resource file with a graphics application, such as Adobe Photoshop. Make sure you save the file as a PICT resource file (not simply a PICT file)
with the extension .rsrc
.
Once you have a PICT resource, you must add it to your Project Builder project. Then Project Builder adds it automatically to your Interface Builder nib file.
For the Moon Travel Planner application, use the moon.rsrc
file provided with the tutorial materials (see the preface for information on how to download the materials):
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.
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.
If you’ve been using the Aqua guides as you’ve added interface objects, you only need to do a few more things to finish laying out the interface. You’ll use layout rectangles and the Alignment menu along with the Aqua guides to complete the layout:
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.
Choose Hide Layout Rectangles from the Layout menu.
By now, the Moon Travel Time window should be laid out properly. What will it look like to the user? You can check the interface by building and running the application in Project Builder. That’s what you’ll do next:
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.
We’ve taken a look at the interface objects—controls, windows, menus, data views—available on Interface Builder’s palettes. We’ve seen how Aqua guides and other layout tools can be used to align an interface fairly quickly while staying within the guidelines specified by the Aqua Human Interface Guidelines. You’ve also had an opportunity to use the palettes and layout tools to finish the main window for the Moon Travel Planner application. You should have a great-looking interface and an application that doesn’t do much. Next you’ll write some code to make the Moon Travel Planner main window interface spring to life.