---

Refining the Layout and View Functionality

The Currency Converter window now contains all the necessary objects for it to function the way it is designed. This section guides you through formatting the window and menu to make it more user friendly.

In this section:

Configure the Menu
Aligning Objects in a Window
Finalize the Window Size
Enable Tabbing Between Text Fields
Set the First Responder Text Field

Configure the Menu

By default, Interface Builder places the term NewApplication in place of the application name in the menu bar and throughout an application’s menu hierarchy. You must change this text to the application name in all menu items that include the application name, such as the application menu and the Help menu.

1. Rename the application menu:

   1. In the MainMenu window, double-click NewApplication to highlight the text for editing.

   2. Enter Currency Converter in place of the text and press Return.

      Important: At runtime, the title of the application menu is determined by the value of the application-name property (the value of the CFBundleName information property list key), not the title you specify in the nib file. See “The Info.plist File” for details.

2. Modify items in the application menu.

   1. In the MainMenu window, which looks like a program’s toolbar, click Currency Converter, double-click About NewApplication, and replace NewApplication with Currency Converter.

   2. Change Currency Converter > Hide NewApplication to Hide Currency Converter.

   3. Change Currency Converter > Quit NewApplication to Quit Currency Converter. The Currency Converter application menu should now look like the one in Figure 4-9.

      
      

      Figure 4-9  The Currency Converter application menu

      

3. In the Help menu, change NewApplication Help to Currency Converter Help.

Aligning Objects in a Window

In order to make an attractive user interface, you must be able to visually align interface objects in rows and columns. “Eyeballing” the alignments can be very difficult; and typing in x/y coordinates by hand is tedious and time consuming. Aligning user interface elements is made even more difficult because the elements have shadows and user interface guideline metrics do not typically take the shadows into account. Interface Builder uses visual guides and layout rectangles to help you with object alignment.

In Cocoa, all drawing is done within the bounds of an object’s frame. Because interface objects have shadows, they do not visually align correctly if you align the edges of the frames. For example, Apple Human Interface Guidelines says that a push button should be 20 pixels tall, but you actually need a frame of 32 pixels for both the button and its shadow. The layout rectangle is what you must align. You can view the layout rectangles of objects in Interface Builder using the Show Layout Rectangles command in the Layout menu.

Interface Builder gives you several ways to align objects in a window:

• Dragging objects with the mouse in conjunction with the layout guides

• Pressing the arrow keys (with the grid off, the selected objects move one pixel)

• Using a reference object to put selected objects in rows and columns

• Using the built-in alignment functions

• Specifying origin points in the Size pane in the inspector

The Alignment submenu in the Layout menu provides various alignment commands and tools, including the Alignment window, which contains controls you can use to perform common alignment operations.

Finalize the Window Size

The Currency Converter interface is almost complete. The finishing touch is to resize the window so that all the user interface elements are centered and properly aligned to each edge. Currently, the objects are aligned only to the top and right edges.

To finalize the Currency Converter window:

1. Select the Amount in Other Currency text label and extend the selection (Shift-click) to include the other two labels.

2. Choose Layout > Size to Fit to resize all the labels to their minimum width.

3. Choose Layout > Alignment > Align Right Edges.

4. Drag the labels towards the left edge of the window, and release them when the layout guide appears.

5. Select the three text fields and drag them to the left, again using the guides to help you find the proper position.

6. Shorten the horizontal separator and move the button into position again under the text fields.

7. Make the window shorter and narrower until the layout guides appear to the right of the text fields.

8. Select the Window object in MainMenu.nib

9. Since you have made the window the perfect size for its components, you don’t want the user to resize the window. In the Attributes tab of the Inspector, make sure the Resize checkbox under the Controls section is deselected.

At this point the application’s window should look like Figure 4-10.

Enable Tabbing Between Text Fields

The final step in composing the Currency Converter user interface has more to do with behavior than with appearance. You want the user to be able to tab from the first editable field to the second, and back to the first. Many objects in the Interface Builder Library have an outlet named nextKeyView. This variable identifies the next object to receive keyboard events when the user presses the Tab key (or the previous object when Shift-Tab is pressed). A Cocoa application by default makes its “best guess” about how to handle text field tabbing, but this guess often produces unexpected results. If you want correct interfield tabbing, you must connect fields through the nextKeyView outlet.

To tab between text fields:

1. Select the Exchange Rate text field.

2. Control-drag a connection from the Exchange Rate text field to the Dollars to Convert text field, as shown in Figure 4-11. (To Control-drag, press Control, then drag the connection line.)

   
   

   Figure 4-11  Connecting nextKeyView outlets in Interface Builder

   

3. Select nextKeyView under Outlets. This identifies the next object to respond to events after the Tab key is pressed.

4. Repeat the same procedure, going from the Dollars to Convert text field to the Exchange Rate text field.

Now that you’ve set up tabbing between text fields, you must tell Currency Converter which text field will be selected first. You do this by setting an initialFirstResponder.

Set the First Responder Text Field

The initialFirstResponder is the default selected object when your application starts. If you do not set this outlet, the window sets a key loop and picks a default initialFirstResponder for you (not necessarily the same as the one you would have specified).

To set the initialFirstResponder outlet for the Currency Converter window:

1. Control-drag a connection from the Window instance in the MainMenu.nib window to the Exchange Rate text field, as shown in Figure 4-12.

   
   

   Figure 4-12  Setting the initialFirstResponder outlet in Interface Builder

   

2. Select initialFirstResponder.

The Currency Converter user interface is now complete.

---