This chapter is from the book
This chapter is from the book
This chapter is from the book
6.2 Layout
First, we will use Interface Builder as a pure layout tool for our human interface. We'll start by getting rid of that "Your document contents here" placard. Click it, and press the Delete key. It's gone.
Next, let's add the buttons. If the palette window doesn't show "Cocoa – Controls" as its title, click the second toolbar icon—the one that shows a button and a slider. At the top left of the palette is a regular Aqua-style button labeled Button. Drag this button from the palette into the window we're building for MyDocument (Figure 6.3). As you drag the button into the upper-left corner of the target window, blue lines appear at the window's margins. The Aqua human-interface guidelines specify certain margins between controls and within windows, and Interface Builder puts up guides to help you place your elements properly.
)
Figure 6.3 Placing a button in Interface Builder. Drag the button from the Cocoa–Controls palette to the window being built. Lines will appear in the window when the button is placed properly according to the Aqua human-interface guidelines.
Button is not an especially informative title for a control. Our design calls for this button to be named Add. The easiest way to change the label is to double–click the button, making the text editable, and replace the title. Instead, we'll take this opportunity to have our first look at Interface Builder's Inspector. Select Show Info from the Tools menu. A new utility window opens, offering a number of options for configuring the current selection—in this case, the button we just dragged in (Figure 6.4). The field at the top of the inspector is labeled Title: and shows the current value, Button. Edit this to say Add, and press Tab or Enter to complete the edit. The button is now named Add.
)
Figure 6.4 The Interface Builder Inspector, as a simple push button is selected. The default label for the button (Button) is replaced by Add.
Leave the Inspector window open. It will change to keep up with the currently selected element in the Nib, and we'll be needing it later.
Repeat the button–dragging twice more, for the Remove and Compute buttons. Name the new buttons accordingly.
Next, we add the table of data to the window. Click the fifth icon at the top of the palette to reveal Interface Builder's repertoire of data–display views. The table view (NSTableView) is in the lower–left of the Cocoa–Data palette. Drag this view into the window we're building. Lines will appear that allow you to place the table view a short distance below the buttons and just off the left edge of the window. Small blue knobs appear at the edges and corners of the view to let you resize it. Make the view wide enough to display two columns of numbers comfortably and deep enough to trigger a line at the bottom of the window.
What you've added to your document window is much more than simply an NSTableView. Look at the main Nib MyDocument window, which should be at the lower left of your screen if you haven't moved it. Make sure that the Instances tab is selected. At the top of the scroll bar at the right edge of window are two small buttons. The upper one, with four small boxes in it, is now highlighted; click the other one, with horizontal lines, to highlight it.
The Instances view changes to a hierarchical display of the Nib contents. MyDocument and First Responder come first, followed by an NSWindow with a disclosure triangle next to it. Clicking the disclosure triangle shows that a Cocoa window contains one NSView, the content view, which, because it contains other views, also has a disclosure triangle. If we open all the disclosure triangles we see, we end up with something like Figure 6.5. What we last dragged into the window was in fact an NSScrollView, containing an NSTableView, which in turn contained two NSTableColumns.
)
Figure 6.5 The hierarchical view of the MyDocument Nib in progress. You reach this view by selecting the Instances tab and then the list–view button just above the scroll bar at the right edge of the window. It can sometimes be easier to select views in this list than in the window display. The yellow caution badges on the screen indicate that "outlets"—links to other objects—in the flagged views have not yet been filled.
Select the header of the first column of the table. Using your mouse, click once to select the scroll view, double–click to get inside to the table view, double–click again to get down to the header view, and click once more to bring up the text field editor. Alternatively, simply keep clicking rapidly on the header until it turns white and a blinking insertion point appears. Type x. In the second header, type y. Putting the mouse between the headers will allow you to drag the boundary between them, so you can resize the columns to equal size.
The last element we'll put in the window is an NSForm, a simple array of labeled text fields that we'll use for the results of the regression. Find the form element in the third panel of the IB palette (Cocoa–Text), at bottom center. Drag it into the right half of the window you're building, under the Compute button. As supplied, the form has two big defects: It's too narrow, and it shows only two items. The width problem is easy to solve: Drag the handles on the sides of the form until they hit the spacing guidelines.
Dragging the handles on the top and bottom, however, gets you a taller form with two entries (Undo is your friend here). NSForm turns out to be a subclass of NSMatrix, a Cocoa class that manages an array of controls. You can add rows or columns to an NSMatrix in Interface Builder by dragging a resize handle while holding the Option key down. An Option–drag downward on the bottom handle of the form gets us our third row.
Click repeatedly on the labels in the form until they become editable, and change them to Slope:, Intercept:, and Correlation:. You'll probably have to resize the form when you're done.