When first getting started with iOS development, there were very little resources to get up and started. And with the strict NDA Apple had over the SDK, there were actually very little resources for any level of iOS development. The goal of this tutorial is to walk you through building a simple app demonstrating the use of actions, outlets and controllers.
What you need to get started
- An Intel based Mac
- Xcode 4 with the iOS SDK
- A basic understanding of Objective C
- An iOS Dev Center account (For testing apps on real devices and App Store Submission. Not needed for this tutorial.)
Your First Project
-
Launch Xcode
Xcode is the IDE you will be using to development applications for an iPhone or iPad. It comes with a simulator the two devices. When you start up Xcode, one of the first things you will probably want to do is create a new project.
-
create a new xcode project
Here you are given a choice from different types of applications. At the bottom of the screen there will be a short description of the selected application template, but here are some examples of different uses. Navigation-based Applications would be used for Mail-like apps, Tab Bar Applications would be used for iTunes-like apps, and Split View-based Applications would be used for Mail-like apps but for the iPad.
For this tutorial, we will be using the View-based Application.
-
Choose View-based Application
Name the project "HelloWorld" and choose a location to save it. Don't worry about including unit tests.
After creating the app, you will be shown a screen which is split into many different panes. If any of the panes are hidden, there are buttons at the top-right of Xcode to toggle their display.
The left hand pane is the Navigator, which has multiple purposes. Most commonly, it will be used to display your files arranged into groups (which do not correspond to directories on the filesystem). It can also be set to show your compile errors or logs.
The bottom pane is the Debug Area, which will show log statements and exceptions.
The right pane is the Utilities Area, which is primarily useful when editing xib files.
The middle section is the main section and is where the current file will be displayed.
-
Edit HelloWorldViewController.xib
The gray box you are presented with is a WYSIWYG editor for your main view. Drag a Label from the bottom of the Utilities pane onto the view and edit the text of the label. If you don't see an option for Label in the list of elements, you might have to switch to a different tab on the Utilities pane.
You should also take this opportunity to make the label wider. This will be important later in the tutorial.
At this point, you could run the application by going to the Product Menu and choosing Run and be presented with the text of your label, but we aren't done yet!
-
Edit HelloWorldViewController.h
What we are going to do here is to define two properties. One UILabel and one UITextField. You may notice the use of IBAction and IBOutlet in the method and property declarations.
IBActions and IBOutlets
The "IB" stands for Interface Builder. An action is simply an event triggered by the user action, e.g. a button being pressed. An outlet is an object in the view that is altered by a controller. Labels are a common outlet, but even objects like buttons can be wired as outlets. An example of this would be a on/off button, where you would toggle the text of the button between clicks.
The IBOutlet in the property declaration is a way to make the instance variables available to you in the xib file. That way, when you make changes to label or text field in your code, it will show those changes in the view. The IBAction in the method declaration where the return type would normally is not actually a return type, but instead makes this method available in the xib file as a target for an event. The sender argument is an optional argument and will be the object that initiated the event. In our case, it would be the instance of the UIButton that the user pressed.
You might receive some warnings until the next step is finished. This is because we've defined methods in our header file but have not implemented them.
#import <UIKit/UIKit.h> @interface HelloWorldViewController : UIViewController { UILabel* helloWorldLabel; UITextField* nameTextField; } @property (nonatomic, retain) IBOutlet UILabel* helloWorldLabel; @property (nonatomic, retain) IBOutlet UITextField* nameTextField; - (IBAction)sayHello:(id)sender; @end -
Edit HelloWorldViewController.m
Here we are synthesizing our properties and implementing our action, which returns nothing. The sayHello action is doing a number of things in order. It's taking the inputted name from the UITextField, prepending it with "Hello " and outputting that result to the UILabel.
At this point, you should be able to compile your application without any warnings.
@implementation HelloWorldViewController @synthesize helloWorldLabel, nameTextField; - (IBAction)sayHello:(id)sender { NSString *name = [NSString stringWithFormat:@"Hello %@", self.nameTextField.text]; self.helloWorldLabel.text = name; } // Remaining code below... -
Back to HelloWorldViewController.xib
Our first version of this file only had a UILabel, so let's go ahead and add a Round Rect Button and Text Field to our view. If we were to run the app now, we would see all of our UI elements, but wouldn't do anything, because we haven't wired them to our controller.
-
Wire Up The Outlets and Actions
This is where we link our UILabel and UITextField in the controller to their corresponding objects in the view. Labels in the view correspond to instances of UILabel in the controller, Text Fields correspond to instances of UITextField in the controller, etc.
To see a list of available actions and outlets, right-click on the yellow cube, aka the "File's Owner." The File's Owner is simply the object that loaded up the xib file. In this case, it will be the HelloWorldViewController. Once you are in that menu, to wire up the label, drag from the circle to the right of helloWorldLabel to the label in the view. Do the same for your nameTextField and the Text Field in the view.
Wiring the action is a bit trickier but starts the same, with dragging the circle to the right of sayHello to the Round Rect Button. The only difference is that at the end of dragging the action to the button, you will be presented with a different menu of the possible events that the UIButton can trigger. For UIButtons, the most common event will be "Touch Up Inside." This event is fired when the user lifts their finger up inside of a button after that user pressed down the button.
-
Run It!
At this point, you should have a working app that allows you to type in a person's name and output it into a label. A github repo with a working example can be found here.
