Creating Your First iPhone Application with Interface Builder 

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.

SampleCode.zip