• Choose a category
• All
• Classic-Fiction

Now that the code is stubbed out, it would be a good time to once again compile VillainTracker and make sure you get no warnings or errors. There’s still no point in running the app to test it out, because we haven’t made a GUI yet, but we’re about to take care of that!

Building Your Interface

Now it’s finally time to create the GUI for VillainTracker, using Interface Builder to edit the project’s main nib file. You’ll add GUI controls to match each of the outlets in the controller class, and see how to give them logical groupings and make them reposition themselves correctly when their window is resized. Finally, you’ll add an instance of our controller class to the nib, and connect everything together.

Start by locating the MainMenu.xib in Xcode’s navigation pane. You’ll find it in the Resources group, which is inside the top-level VillainTracker group. Double-click MainMenu.xib, and Interface Builder will launch and show you the contents of the nib file. In addition to the window labeled “MainMenu.xib,” which shows all the top-level contents of this nib file, you’ll see an empty window labeled “VillainTracker” (or “Window” if you’re running Leopard or an earlier version of Mac OS X), and a special window labeled just “MainMenu” which contains the application’s menu items.

If you’re running Snow Leopard, the default contents of MainMenu.xib are set to include the name of your application in several key spots, and you can skip to the next paragraph. If you’re still running Leopard, however, you’ll need to change some default values to make your app show its proper name when it runs. Go through the menu items available in the MainMenu window, and change all occurrences of “NewApplication” to “VillainTracker.” We went through all this in Chapter 3; if you’ve forgotten, look there for more details on just which menu items need to be changed.

Then, take the empty window (the one labeled either “VillainTracker” or “Window,” depending on your OS version) and make it bigger by dragging the resize control in the lower right. Make it about one-third the size of the screen, and leave enough room to still see the Library (⌘L to open it) and the Inspector (⌘I) at the same time. Don’t worry about the exact size; we’ll fine-tune it later.

Bringing Out Your Text Fields

Now it’s time to start building the GUI. We’ll do this one little piece at a time, but let’s start with a look at the completed version of the window after it’s all laid out, just so you can see what we’re shooting for (see Figure 4-2).

Figure 4-2. This is how the complete VillainTracker window will look.

The first controls we’re going to set up are a couple of NSTextFields. NSTextField is a marvelously useful class that provides text-editing capabilities worthy of a full-fledged text editor, even in spots where you are just entering a few characters. In the Library window, make sure the Objects tab is selected at the top, and inside that select either Library or its child Cocoa. Then click in the search field at the bottom of the window and type in “text field.” You’ll see that the list of available objects in the Library is whittled down to just a few, including one called Text Field. Drag one of those (Text Field, not Text Field Cell, which is a slightly different beast that you’ll encounter in Chapters 5 and 6) over to your empty “Window” window, and drop it somewhere in the upper-left portion of the window. Now, while the new text field is selected, make a duplicate of it by pressing ⌘D. A new textfield appears, overlapping the previous one. Drag the new one down a bit, and you’ll see that some blue guidelines appear in the window, helping you guide it into alignment below the previous one. Let go of it when it looks roughly like what you see in Figure 4-3.

Figure 4-3. VillainTracker’s first two text fields

Now we need to label these objects, so the user can see what they represent. Back in the Library window, click on the search field (deleting the text that was already there,