- In Xcode
- In Interface Builder
- Back in Xcode
- Documentation
- What Have You Done?
This chapter is from the book
This chapter is from the book
This chapter is from the book
In Interface Builder
In the outline view under Resources, you will find a nib file called MainMenu.nib. Double-click on it to open the nib in Interface Builder. Lots of windows will appear, so this is a good time to hide your other applications. In the Interface Builder menu, you will find Hide Others.
Interface Builder allows you to create and edit user interface objects (like windows and buttons) and save those objects into a file. You can also create instances of your custom classes and make connections between those instances and the standard user interface objects. When users interact with the user interface objects, the connections you have made between them and your custom classes will cause your code to be executed.
The Standard Palettes
The palette window (Figure 2.7) is where you will find user interface widgets that can be dragged into your interface. For example, if you want a button, you can drag it from the palette window. Notice the row of buttons at the top of the palette window. As you click the buttons, the various palettes will appear. In Chapter 27, you will learn to create your own palettes.
)
Figure
2.7 Palette
The Blank Window
The blank window (Figure 2.8) represents an instance of the NSWindow class that is inside your nib file.
)
Figure
2.8 Blank
As you drop objects from the palettes onto the window, they will be added to the nib file. After you have created instances of these objects and edited their attributes, saving the nib file is like "freeze-drying" the objects into the file. When the application is run, the nib file will be read and the objects will be revived. The cool kids say, "The objects are archived into the nib file by Interface Builder and unarchived when the application is run."
Lay Out the Interface
I am going to walk you through it, but keep in mind that your goal is to create a user interface that looks like Figure 2.9.
)
Figure
2.9 Completed
Drag a button from the palette window (as shown in Figure 2.10) and drop it onto the blank window.
)
Figure
2.10 Dragging a Button
Double-click on the button to change its title to Seed random number generator with time.
Drag another button out, and relabel it Generate random number. Drag out the text field that says System Font Text (as shown in Figure 2.11) and drop it on the window
)
Figure
2.11 Dragging a Text Field
Make the window smaller.
The text field should be as wide as possible. Drag the left and right sides of the text field toward the sides of the window. Notice that blue lines appear when you are close to the edge of the window. These guides are intended to help you conform to Apple's GUI guidelines (Figure 2.12).
)
Figure
2.12 Resize Text Field
To make the text field center its contents, you will need to use the Info Panel (also known as the "Inspector"). Select the text field, and choose Show Info from the Tools menu. Click on the center justify button (Figure 2.13).
)
Figure
2.13 Center Justify Text Field
The Doc Window
In your nib file, some objects (like buttons) are visible, and others (like your custom controller objects) are invisible. The icons that represent the invisible objects appear in the doc window (Figure 2.14).
)
Figure
2.14 The Doc Window
In the doc window (the one entitled MainMenu.nib), you will see icons representing the main menu and the window. First Responder is a fictional object, but it is a very useful fiction. It will be fully explained in Chapter 18. File's Owner in this nib is the NSApplication object for your application. The NSApplication object takes events from the event queue and forwards them to the appropriate window. We will discuss File's Owner in depth in Chapter 9.
Create a Class
The doc window also has a simple class browser that you can use to create a skeleton of your custom class. Click on the Classes tab and select NSObject (Figure 2.15). In the Classes menu, choose Subclass NSObject. Rename the new class Foo. Interface Builder now knows that you intend to create a subclass of NSObject called Foo. NSObject is the root class for the entire Objective-C class hierarchy. That is, all objects in the framework are descendants of NSObject.
)
Figure
2.15 Foo Is a Subclass of NSObject
Class names, by convention, are capitalized.
Next, you will add instance variables and methods to your class. Instance variables that are pointers to other objects are called outlets. Methods that can be triggered by user interface objects are called actions. If you select the Foo class and bring up the inspector (use the Show Info menu item to activate the inspector), you will see that your class doesn't have any outlets or actions yet (Figure 2.16).
)
Figure
2.16 View Outlets and Actions
To add an outlet, select the Outlets tab and click Add. Rename the new outlet textField. You can set the type of the pointer in a pop-up. Here textField will be a pointer to an NSTextField object. Set its type using the pop-up as shown in Figure 2.17.
)
Figure
2.17 Create an Outlet
To add an action, select the Actions tab and click Add. Rename the new action seed. (When you press Enter, it will add a colon to the end of the action name. Thus seed: is the actual name of the method that will be created.) Add a second action, and name it generate: (Figure 2.18).
)
Figure
2.18 Create Two Actions
By convention, the names of methods and instance variables start with lowercase letters. If the name would be multiple words in English, each new word is capitalized—for example, favoriteColor.
Now you will create the files for the class Foo. In Objective-C, every class is defined by two files: a header file and an implementation file. The header file, also known as the interface file, declares the instance variables and methods your class will have. The implementation file actually defines what those methods do.
Under the Classes menu, choose Create files for Foo. . . (Figure 2.19).
)
Figure
2.19 Create
A save panel will appear. The default location (your project directory) is perfect. Save Foo.h (the header file) and Foo.m (the implementation file) there. Note that the files are being added to your RandomApp project (Figure 2.20).
)
Figure
2.20 Choose a Location for the Files
Create an Instance
Next, you will create an instance of the class Foo in your nib file. Select Foo in the class browser and choose Instantiate Foo from the Classes menu (Figure 2.21).
)
Figure
2.21 Create an Instance of Foo
Interface Builder will take you back to the Instances tab, where you will see a symbol representing your instance of Foo (Figure 2.22).
)
Figure
2.22 An Instance of Foo
Make Connections
A lot of object-oriented programming has to do with which objects need to know about which other objects. Now you are going to introduce some objects to each other. Cocoa programmers would say, "We are now going to set the outlets of our objects." To introduce one object to another, you will control-drag from the object that needs to know to the object it needs to know about. The object diagram in Figure 2.23 shows which objects need to be connected in your example.
)
Figure
2.23 Object
You will set Foo's textField instance variable to point to the NSTextField object on the window that currently says System Font Text. Control-drag from the symbol that represents your instance of Foo to the text field. The inspector panel will then appear. Choose textField in the view on the left, and click Connect. You should see a dot appear next to textField (Figure 2.24).
)
Figure
2.24 Set the textField Outlet
This step is all about pointers: You have just set the pointer textField in your Foo object to point to the text field.
Now you will set the Seed button's target outlet to point to your instance of Foo. Furthermore, you want the button to trigger Foo's seed: method. Control-drag from the button to your instance of Foo. Choose the Target/Action tab in the inspector and select seed:. Click the Connect button to complete the connection (or double-click the word seed:). You should see a dot appear next to seed: (Figure 2.25).
)
Figure
2.25 Set the Target and Action of the Seed Button
Similarly, you will set the Generate button's target instance variable to point to your instance of Foo and set its action to the generate: method. Control-drag from the button to Foo. Choose generate: in the Target/Action view. Double-click on the action name (generate:) to complete the connection. Note the appearance of the dot (Figure 2.26).
)
Figure
2.26 Set the Target and Action of the Generate Button
You are done with Interface Builder, so save the file and hide the application. Click on the Xcode icon in the dock to bring Xcode to the front.