The
MainMenu.nib
file created by PB and opened in IB above is called, aptly enough, a
nib file
(nib stands for NeXT Interface
Builder — a holdover from the pre-Apple life of this
development environment). A nib file stores information about all of
the user interface objects in your program, including the windows,
controls, and menus; the connections between those objects; and some
other objects that IB knows about. When you compile and link the
application you are building, the application’s nib
file (or files, if the program uses more than one) gets bundled
together with the program’s executable code and
stored in a package, or app
wrapper
, folder. This folder has a
.app
extension and
looks like an executable application in the Finder.
The nib files are stored in an undocumented Cocoa proprietary binary format. Fortunately, it doesn’t need to be documented — all of the nib-file management is done by IB. IB is basically a nib editor: when it opens a nib file, it reads the specifications and displays the associated objects. After you make your modifications to the program, IB writes out a new nib file, replacing the old one.
Now that we’ve created the project, we’ll add and customize the windows, panels, and menus needed for our Calculator’s user interface.
The main window in the Calculator’s interface, currently titled “Window”, doesn’t look anything like a calculator: it’s the wrong shape, it shouldn’t have a resize handle, and it doesn’t even have the right name! Fortunately, these are all properties that we can easily change by using IB’s NSWindow Info dialog.
To see this Info dialog for a particular window, you must first select the window by either clicking in its background or clicking on its icon in the Nib File window’s Instances pane. If you click on an object (e.g., a button) inside a window object in IB, the button, not the window, will be selected.
In general, the title and contents of IB’s Info dialog change in response to which object in the interface is selected. When the Info dialog changes in response to a selection, you may still have to choose which aspect of the object you want to inspect: its attributes, its connections, or something else. You can make this choice by dragging to it in the Info dialog’s pop-up menu or by typing Command-1 for Attributes, Command-2 for Connections, and so on.
Next, we’ll go through the steps to customize our Calculator’s window in IB.
Select the newly created empty window in IB by clicking in its background.
Choose Tools → Show Info to display the NSWindow Info dialog. If necessary, press the pop-up list button in the NSWindow Info dialog and select Attributes. (You can accomplish both of these actions by simply typing Command-1.)
The NSWindow Info dialog should now look like the one shown on the left in Figure 5-7.
Change the title from “Window” to “Calculator” and hit Return.
Turn off the Close and Resize attributes in the NSWindow Info dialog’s Controls box by clicking their checkboxes so the checkmarks disappear (see the resulting Info dialog on the right side of Figure 5-7 — the arrows indicate where the changes were made).
Although the red close button and resize handle do not disappear from the Calculator window in IB, they will no longer be present when the application is running.
Resize the Calculator window so that it is about three inches square.
Next, we’ll drag the buttons and text display area that the Calculator application will need from IB’s Palettes window into the main Calculator window:
Make sure the Cocoa-Views palette is visible by clicking the Views button at the top of IB’s Palettes window.
Drag an NSTextField object from the Palettes window and drop it near the top-right corner of the Calculator window. Use the blue guidelines to position the object. (If you release the dragged object when it is near a guideline, the guide will actually grab and align the object, helping make your layout visually attractive.)
When you are finished, your window should look like the one shown on the left in Figure 5-8. A border in the current selection color surrounds the NSView object that is ready to accept the new NSTextField.
Drag the NSTextField’s left-middle selection handle to the left to widen the NSTextField object so that it is almost the width of the Calculator window, as shown in the window on the right in Figure 5-8.
Drag an NSButton object from the Palettes window and drop it in the lower-left corner of the Calculator window, as shown in the window on the right in Figure 5-8. Use the blue guidelines.
Double-click the center of the NSButton object, change the text “Button” to the digit “0”, and hit Return.
Make the width of this button smaller by clicking the button once and then dragging the button’s right-middle handle to the left until the button stops getting smaller. (When necessary, you can make buttons even smaller using the NSButton Info dialog.)
Make sure the cursor is positioned in the window, and press the Option key on the keyboard to see the layout information, as shown in the window on the left in Figure 5-9. Note that the guidelines gave us a 20-pixel buffer between the button and each edge near it. Release the Option key.
Next, we’ll create the Calculator’s keypad, using the great power of IB!
While pressing the Option key on the keyboard, drag the upper-right handle of the NSButton up and to the right. Release the mouse button when there are four rows and three columns of buttons, as shown in the window on the right in Figure 5-9.
Congratulations — you’ve just created a matrix (NSMatrix) of buttons (NSButtons)! The NSMatrix is one of the classes provided by the Cocoa Application Kit. An NSMatrix object is a two-dimensional array containing other objects that are subclasses of the NSCell class.
Every Cocoa NSControl subclass, including NSButton, NSSlider, and NSTextField, has an associated NSCell subclass (e.g., NSButtonCell, NSSliderCell, and NSTextFieldCell). These cell objects do the actual drawing of the controls that we put into the window. When you drag a button, slider, or text field off the IB palette and into your window, you are actually dragging out two objects — an NSControl and a corresponding NSCell.
You can also display NSCell objects in a rectangular NSMatrix. As before, the NSCell objects handle the drawing. When you drag one of the resizing handles with the Option key pressed, IB automatically converts the NSControl and its associated NSCell into an NSMatrix and a whole set of NSCell objects.
The NSControl object is used for handling events from the keyboard or mouse. IB hides this split between the NSControl and NSCell from us and makes the control and its associated cell look like a single object. This is often a source of confusion for programmers new to Cocoa.
Now we’ll resize the NSMatrix as a whole to fit the area we want:
Drag the right-middle handle of the NSMatrix to the right so that the NSMatrix is almost the same width as the NSTextField. This time, all 12 of the buttons titled “0” will get wider simultaneously. (Don’t worry about being exact at this point in the interface.)
When you drag a handle on a matrix object, one of three things can happen, depending on which modifier key is pressed (we saw the first two of these in the previous example):
- None
Changes the size of all cells in the matrix
- Option (Alt)
Changes the number of cells in the matrix
- Command (Apple)
Changes the spacing between cells
These values can also be changed using the NSMatrix Info dialog.
The buttons in the NSMatrix we created will be used to represent digit keys on our Calculator, and thus we’ll change their names from “0” to the 10 decimal digits (and disable the remaining 2 buttons). We also need to set some less obvious attributes of the buttons, called tags , to make the buttons work properly. In order to explain how tags work and help you better understand why we make certain choices while creating an interface, we’ll postpone finishing the interface for now to discuss the Objective-C class that we’ll create to handle the button clicks.