iPhone Application Developmen : Using the View-Based Application Template (part 1)

The easiest way to see how Xcode and Interface Builder manage to separate logic from display is to build an application that follows this approach. Apple has included a useful application template in Xcode that quickly sets up an empty view and an associated view controller. This View-Based Application template will be the starting point for many of your projects, so we’ll spend the rest of this chapter getting accustomed to using it.

Implementation Overview

The project we’ll be building is simple: Instead of just writing the typical Hello World app, we want to be a bit more flexible. The program will present the user with a field (UITextField) for typing and a button (UIButton). When the user types into the field and presses the button, the display will update an onscreen label (UILabel) so that “Hello” is seen, followed by the user’s input. The completed HelloNoun, as we’ve chosen to call this project, is shown in Figure 1.

Figure 1. The app will accept input and update the display based on what the user types.

Although this won’t be a masterpiece of development, it does contain almost all the different elements we discuss in this hour: a view, a controller, outlets, and actions. Because this is the first full development cycle that we’ve worked through, we’ll pay close attention to how all the pieces come together and why things work the way they do.

Setting Up the Project

First we want to create the project, which we’ll call HelloNoun, in Xcode:

1.	Launch Xcode from the Developer/Applications folder.
2.	Choose File, New Project.
3.	You’ll be prompted to choose a project type and a template. On the left side of the New Project window, make sure that Application is selected under the iPhone OS project type. Next find and select the View-Based Application option from the list on the right, be sure that iPhone is selected, as shown in Figure 2, and then click Choose. Figure 2. Choose the iPhone View-Based Application template.
4.	Choose a save location and type HelloNoun when prompted for a file name. Click Save to generate the project.

This will create a simple application structure consisting of an application delegate, a window, a view, and a view controller. After a few seconds, your project window will open (see Figure 3).

Figure 3. Your new project is open and ready for coding.

Classes

Click the Classes folder and review the contents. You should see four files (visible in Figure 3). The HelloNounAppDelegate.h and HelloNounAppDelegate.m files make up the delegate for the instance of UIApplication that our project will create. In other words, these files can be edited to include methods that govern how the application behaves when it is running. By default, the delegate will be responsible for one thing: adding a view to a window and making that window visible. This occurs in the aptly named application:DidFinishLaunchingWithOptions method in HelloNounAppDelegate.m, shown in Listing 1.

Listing 1.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after app launch [window addSubview:viewController.view]; [window makeKeyAndVisible]; return YES; }

You won’t need to edit anything in the application delegate, but keep in mind the role that it plays in the overall application life cycle.

The second set of files, HelloNounViewController.h and HelloNounViewController.m, will implement the class that contains the logic for controlling our view—a view controller (UIViewController). These files are largely empty to begin, with just a basic structure in place to ensure that we can build and run the project from the outset. In fact, feel free to click the Build and Run button at the top of the window. The application will compile and launch, but there won’t be anything to do!

By the Way

Notice that when we create a project, Xcode automatically names the classes and resources based on the project name.

To impart some functionality to our app, we need to work on the two areas we discussed previously: the view and the view controller.

XIB Files

After looking through the classes, click the Resources folder to show the XIB files that are part of the template. You should see MainWindow.xib and HelloNounViewController.xib files. Recall that these files are used to hold instances of objects that we can add visually to a project. These objects are automatically instantiated when the XIB loads. Open the MainWindow.xib file by double-clicking it in Xcode. Interface Builder should launch and load the file. Within Interface Builder, choose Window, Document to show the components of the file.

The MainWindow XIB, shown in Figure 4, contains icons for the File’s Owner (UIApplication), the First Responder (an instance of UIResponder), the HelloNoun App Delegate (HelloNounAppDelegate), the Hello Noun View Controller (HelloNounViewController), and our application’s Window (UIWindow).

Figure 4. The MainWindow.xib file handles creating the application’s window and instantiating our view controller.

As a result, when the application launches, MainWindow XIB is loaded, a window is created, along with an instance of the HelloNounViewController class. In turn, the HelloNounViewController defines its view within the second XIB file, HelloNounViewController.xib—this is where we’ll visually build our interface.

Any reasonable person is probably scratching his head right now wondering a few things. First, why does MainWindow.xib get loaded at all? Where is the code to tell the application to do this?

The MainWindow.xib file is defined in the HelloNoun-Info.plist file as the property value for the key Main nib file base name. You can see this yourself by clicking the Resources folder and then clicking the plist file to show the contents (see Figure 5).

Figure 5. The project’s plist file defines the XIB loaded when the application starts.

Second, what about the HelloNounViewController.xib tells the application that it contains the view we want to use for our user interface? The answer lies in the MainWindow XIB file. Return to the MainWindow.xib Document window in Interface Builder.

Click once on Hello Noun View Controller to select it in the list, and then press Command+1 or choose Attributes Inspector from the Tools menu. A small window will appear, as shown in Figure 6. Expand the View Controller section and you should see that the NIB Name field is set to HelloNounViewController. This means that the view controller loads its view from that XIB file.

Figure 6. After the MainWindow.xib instantiates the view controller, it loads its view from HelloNounViewController.xib.

In short, the application is configured to load MainWindow.xib, which creates an instance of our view controller class (HelloNounViewController), which subsequently loads its view from the HelloNounViewController.xib. If that still doesn’t make sense, don’t fret; I guide you through this every step of the way.