Creating Your First iPhone Application with Interface Builder

Interface Builder is good tool for building complex user interfaces for the Mac and iPhone platform. It is, however, a non intuitive program when you first start using it - at least it was for me. This tutorial is here to explain how to use Interface Builder to build your first iPhone application. You can also check out our tutorial on building an iPhone application without using Interface Builder if that seems more up your alley.

Today's tutorial will end with a simple "hello world" application being built. The application will take a name in and spit out a simple hello phrase with your name included. This is done using just a text input, label, and single button. You can check out a quick little video our of application below.

The first thing we are going to do is get our project started, which we do in Xcode. This is easily done, go to File > New Project and choose "Application" under iPhone OS. Click "Choose" and give it a name and we're good to go.

Well, now it is time to open up Interface Builder. The first item on the agenda is to create our main view. Go to File > New, select User Interface on the left and choose "View XIB", I named mine SimpleUIView. Once created we can add our text input, label, and button to it. I also update the background color on the view to give it a little bit of personality. Below is a video demonstrating setting up the interface.

The next step is creating the view controller that will handle the bulk of our logic. We are going to go back to Xcode to handle this. We add the file by going to File > New File, select Cocoa Touch Class on the left and then choose "UIViewController subclass" as the template. I also made sure that "With XIB for user interface" wasn't selected. Once chosen I named mine "SimpleUIViewController".

Starting in the header file "SimpleUIViewController.h", we add the properties and instance variables we are going to use for our application. We add a variable and property for the label and text input. In order for Interface Builder to know about these we need to mark them as an IBOutlet, as seen below. We also add a variable and property for storing the name entered. A method for changing the label that will be hooked up to our button is also added. The method needs to be tagged as an IBAction, again for Interface Builder. The final item for the header is adding that our controller implements the UITextFieldDelegate.

#import <UIKit/UIKit.h>

@interface SimpleUIViewController : UIViewController <UITextFieldDelegate> {
  UITextField *textInput;
  UILabel *label;
  NSString *name;
}

@property (nonatomic, retain) IBOutlet UITextField *textInput;
@property (nonatomic, retain) IBOutlet UILabel *label;
@property (nonatomic, copy) NSString *name;

- (IBAction)changeGreeting:(id)sender;

@end

The implementation file "SimpleUIViewController.m" starts with a number of commented out methods. We don't need any of them so you can delete them if you would like. To have Objective-C handle creating our getters and setters we use @synthesize. Our properties need to have their memory released, this is done inside the overridden -(void)dealloc method. With these updates our file looks like the following:

#import "SimpleUIViewController.h"

@implementation SimpleUIViewController

@synthesize textInput;
@synthesize label;
@synthesize name;

- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  // Release anything that's not essential, such as cached data
}

- (void)dealloc {
  [textInput release];
  [label release];
  [name release];
  [super dealloc];
}

@end

Along with the above we also need to implement our action method and a text field delegate method. The first changeGreeting handles updating the label with our hello phrase. It starts by saving the input from the user in our name property. Then it will default the name to "Inigo Montoya" if the name is of length 0 (nothing was entered). After this we create a greeting and update it with the phrase of the day. The label's text is then updated and a tib bit of clean up is required.

The second function is not nearly as complex, it simply checks to see if the passed in text field is equal to our property. If this is the case we return YES which in turn closes the software keyboard.

#import "SimpleUIViewController.h"

@implementation SimpleUIViewController

@synthesize textInput;
@synthesize label;
@synthesize name;

- (IBAction)changeGreeting:(id)sender {
  self.name = textInput.text;

  NSString *nameString = name;
  if([nameString length] == 0) {
    nameString = @"Inigo Montoya";
  }
  NSString *greeting = [[NSString alloc] 
                        initWithFormat:@"Hello, my name is %@!", nameString];
  label.text = greeting;
  [greeting release];
}

- (BOOL)textFieldShouldReturn:(UITextField *)theTextField {
  if(theTextField == textInput) {
    [textInput resignFirstResponder];
  }
  return YES;
}

- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning]; 
  // Release anything that's not essential, such as cached data
}

- (void)dealloc {
  [textInput release];
  [label release];
  [name release];
  [super dealloc];
}

@end

Having the controller created is only one part of it, we now have to do two more things to have it actually work. The first is to update our application delegate ("SimpleUIAppDelegate.h" and "SimpleUIAppDelegate.m") to create the controller and initialize it.

The header for the delegate needs to have an instance variable and property created for our controller. In order for this to work correctly we need to tell the file about our class using @class SimpleUIViewController. This leaves us with a pretty simple header file.

#import <UIKit/UIKit.h>

@class SimpleUIViewController;

@interface SimpleUIAppDelegate : NSObject <UIApplicationDelegate> {
  UIWindow *window;
  SimpleUIViewController *viewController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) SimpleUIViewController *viewController;

@end

The default implementation of the application delegate already overrides applicationDidFinishLaunching which is where we are going to allocate and initialize our controller. The controller is initialized using the instance method initWithNibName with the first parameter equal to the name our view nib which is equal to the name of our view, in my case "SimpleUIView". Before leaving the file we need to make sure we @synthesize our property and import the SimpleUIViewController header. The last thing we need to do in the implementation file is make sure to import the "SimpleUIViewController.h" file.

#import "SimpleUIAppDelegate.h"
#import "SimpleUIViewController.h"

@implementation SimpleUIAppDelegate

@synthesize window;
@synthesize viewController;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

  // Override point for customization after application launch
  SimpleUIViewController *aViewController = [[SimpleUIViewController alloc] 
                                             initWithNibName:@"SimpleUIView" 
                                             bundle:[NSBundle mainBundle]];
  self.viewController = aViewController;
  [aViewController release];

  [window addSubview:[viewController view]];

  // Override point for customization after application launch
  [window makeKeyAndVisible];
}

- (void)dealloc {
  [window release];
  [super dealloc];
}

@end

The final piece is done inside of Interface Builder. We have to open up our view again and this time literally connect our view controller to our view components. Once you have the view ("SimpleUIView.xib") open again in Interface Builder we need to set the File's Owner to be an instance of our controller. This is done in the identity inspector, once completed we have to drag lines from the connection inspector the appropriate items on our view.

Now this can be somewhat confusing so I create the video below to help walk through it. There are a couple tips though. First, Outlets should connect to actual components on the view or the view itself. Second, Actions connect to object events like the "Touch Up Inside" message on our button. Last, but not least, Referencing Outlets set the owner as a delegate of an object in the view. Well, go ahead a take a minute to see for yourself.

If everything has gone correctly you should now be able to run the simulator from Xcode and see something like the demo at the top of the post. That pretty much wraps it up.

Source Files:

• SimpleUI.zip