Beta 2 of the iPhone SDK made a big splash when it was announced that Interface Builder, Apple's visual gui design tool, would finally be available for iPhone developers. Unfortunately for those of us who, god forbid, tried to actually use it, no documentation was provided, save some hints in the release notes.
After messing around for a few days, I think I have a pretty good idea of the "right" way to use Interface Builder for iPhone development. A couple of blogs/forums are throwing around a Hello World example where they load the nib programatically, and subclass UIView to handle events. That will probably work, but I think this way is much cleaner.
With this method, you'll be able to take advantage of the MVC paradigm that the SDK expects you to use, and you'll be able to instantiate your UI and hook up events with nearly no code.
My one warning is that GUIs built with Interface Builder have some pretty serious flaws. In my pretty shallow tests, the biggest thing I noticed was that Interface Builder doesn't provide any way to change the text color of any widgets. This wouldn't be such a big deal, but UILabels you create in Interface Builder don't respond to the setTextColor: message either. Hopefully I'm doing something wrong, and someone can call me out, but I suspect this is a bug, because UILabels seem to respond fine to setting the font size and face. I would suggest maybe waiting for the next version of the SDK until you start building apps with Interface Builder.
That being said, here is a guide to creating a small demo app with a UIButton that, when clicked, sets a UILabel text to read "Hello World".
- First, fire up XCode and hit File->New Project...
- Select MyView.h and MyView.m and press delete. Click the "Also Move to Trash" button. We don't need these classes, we're going to make our UIView in IB.
-Open up the HelloWorldAppDelegate.h file. The code will look like this:
First, remove all the properties, and the references to MyView, since we're not using it:
Finally, we also want to add an outlet for a UIViewController to our project, which will be in control of events for UIView we will make:
#import <UIKit/UIKit.h>
@interface HelloWorldAppDelegate : NSObject {
IBOutlet UIWindow *window;
IBOutlet UIViewController *viewController;
}
@end
- Now that we have our header ready to plug in some outlets, fire up Interface Builder (I usually just type it into spotlight, and then click the icon)
- The "Choose a template" dialog should pop up. Select the "Empty" option.
- Now, save the interface builder project: Click File->Save As..., then navigate to your project's folder (HelloWorld) and give your IB Project the name MainUI
- When asked if you would like to add the file to your XCode project, click the checkbox next to your HelloWorld project, and click Add
-Click Tools->Inspector to make the Inspector viewable. Then, click on the (i) button on the top-right of the inspector window. In your project window, click the cube labeled File's Owner. Now, in the Inspector window, type UIApplication into the class field.
-Drag an Object cube from the library into your project. In the inspector, set class asHelloWorldAppDelegate
It should be in the drop-down.
-Now, set the "Hello World App Delegate" to be a delegate of "File's Owner" (our UIApplication).
To do this: Right click on "File's Owner" and drag the hole next to delegate into the "Hello World App Delegate" icon.
-Next, from the library, drag in a View Controller, a Window, and a UIView
-Double click the view to bring up the view designer. Drag a UIButton and a UILabel onto your view.
-Using the Inspector, change the title of the button to be Touch Me
-In the project window, select your view. In the inspector, make sure "User Interaction Enabled" is checked.
-In the project window, select your view controller. In the inspector, click the identity button (i), in the upper right. Input a class name of HelloViewController
-Add a class outlet: label (of type UILabel) and add an action called buttonClicked:
Interface Builder is going to generate this class for us. With our view controller still selected, pick File->Write Class Files..., and click save. Choose to add these classes to your project when prompted, by clicking the checkbox next to the HelloWorld Project, and clicking Add.
-Jump back into XCode and select HelloViewController.h
Interface Builder generates incomplete (actually, downright wrong) code, so we'll have to make a few changes. Adjust the import to UIKit/UIKit.h, intead of Cocoa/Cocoa.h, and put in the code to subclass UIViewController. When you're done, it should look like this:
#import <UIKit/UIKit.h>
@interface HelloViewController : UIViewController {
IBOutlet UILabel *label;
}
- (IBAction)buttonClicked:(id)sender;
@end
-Save your changes, and switch back to IB
-Connect the label outlet on the view controller to the label on your view
-Connect the button's "touch up inside" event to your view controller buttonClicked: action
-Connect our view to our view controller's view outlet to our view:
-Connect our App Delegate's viewController outlet to our view controller, and the window outlet to our window:
-Save your changes and switch back to XCode
-In XCode select the HelloViewController.m file. It should already have a method for the buttonClicked: action. We'll just add some code to chagne the label text here:
#import "HelloViewController.h"
@implementation HelloViewController
- (IBAction)buttonClicked:(id)sender {
[label setText:@"Hello World!"];
}
@end
- Next, select your HelloWorldAppDelegate.m
There is a lot of extraneous code in here from the original template. We remove the @synthesize lines (they deal with the properties of the class we removed earlier), the #import for the MyView.h that we deleted, and fix the dealloc code to free our outlets. In the applicationDidFinishLaunching: method, we do the minimum necessary to show our view. The final code in HelloWorldAppDelegate.m:
#import "HelloWorldAppDelegate.h"
@implementation HelloWorldAppDelegate
- (void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview:viewController.view];
[window makeKeyAndVisible];
}
- (void)dealloc {
[window release];
[viewController release];
[super dealloc];
}
@end
Next, we need to edit main.m in our project. Notice the line
int retVal = UIApplicationMain(argc, argv, nil, @"HelloWorldAppDelegate");
To tell UIApplicationMain to make our gui from the xib file, we replace it with:
int retVal = UIApplicationMain(argc, argv, nil, nil);
Finally, we have to add the lines inside our Info.plist, inside <dict> tags:
<key>NSMainNibFile</key>
<string>MainUI</string>
Finally, the coup de grace, click 'Build and Go' and....
This should really be easier...
Edit: If you want to grab a copy of the completed HelloWorld app source, you can
grab it here
