Learn Objective-C on the Mac - Mark Dalrymple [25]
Figure 3-12. Our application’s main window with the three buttons placed.
Next, we need a label so that we can tell the user which button was clicked. A label is a GUI object that can display a piece of text, in the font and size of our choosing. From within our application code, we can programmatically change the label’s text any time we want. Grab a label from the library. Remember, the label is under Cocoa➤Views & Cells➤Inputs & Values or you can just use the search box. Drag the label to the upper left of the window and use the guides to place it properly against the top and left margins.
Click the resize handle on the right of the label, and drag it to the right until you get to the blue guidelines on the right side of the window and let go. With the label still selected, press ⌘1 to bring up the attribute inspector, and center the text using the text alignment button. Then press ⌘T to bring up the standard font window and change the font size to 36. Your application window should now look like Figure 3-13. All that’s left is to double-click the label, which will put it in editing mode, then hit the delete key to delete the text. We don’t want this label to say anything until a button has been pressed.
Figure 3-13. Our application’s interface is nearly complete.
Connecting the Outlet
Back in Xcode, we declared an outlet called label. It’s now time to connect that outlet with the label we just added to our interface. The way we do that is to hold down the Ctrl key and click on the Main Controller icon in the nib’s main window. Keep the Ctrl key and mouse button pressed down and move the cursor away from the icon. You should see a line from the icon to your cursor (Figure 3-14). This is called a “Ctrl-drag,” and it is the primary mechanism we use to connect outlets and actions in Interface Builder. Keep dragging toward our application’s main window, until your cursor is over the label. You won’t be able to see the label because we deleted the text it contains, but it’s still there and when your mouse is over it, it will highlight (Figure 3-15).
Figure 3-14. Ctrl-dragging from an icon in the nib’s main window to an object on the user interface is how we connect an outlet to an object on the user interface.
Figure 3-15. As you Ctrl-drag over an item, it will become highlighted, even if it would otherwise be invisible.
Once your mouse is over the label (your screen should look similar to Figure 3-15), let go of the mouse button and you will be presented with a small grey menu showing the outlets that are available for this particular object (Figure 3-16). There should only be one available outlet, called label. Select it.
Figure 3-16. After Ctrl-dragging, if there are one or more outlets that are appropriate for the object you dragged to, they will be presented in a gray popup menu.
Now, your outlet called label points to this label on our interface. If you call any methods on this pointer it will affect the appearance of this particular label.
Connecting the Buttons to Our Action
We also need to indicate that each of the three buttons we just added to our interface will trigger the action method called buttonPressed:. We accomplish this in a very similar manner to connecting outlets, but instead of Ctrl-dragging from the controller class to the interface, we’re going to Ctrl-drag from the buttons down to the controller. Hold down the Ctrl key and click on the button labeled Right. Drag from that button to the Buttons_App… icon in the nib’s main window. When you release the mouse button, another grey popup menu should appear. Because our controller class has only one action, a popup