Lesson 2 - Creating Your First iPhone Application with Interface Builder
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.
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.
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 anIBAction, again for Interface Builder. The final item for the header is adding that our controller implements theUITextFieldDelegate.
@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)deallocmethod. With these updates our file looks like the following:
@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 firstchangeGreeting handles updating the label with our hello phrase. It starts by saving the input from the user in our nameproperty. 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.
@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.
@class SimpleUIViewController;
@interface SimpleUIAppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
SimpleUIViewController *viewController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) SimpleUIViewController *viewController;
@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.