An Absolute Beginner's Guide to iPhone Development

So you've got a Mac, you've got an iPhone, and you really want to start writing some apps. There's tons of documentation available, but the best way to learn a ew language and framework is to simply dive right in. All of the documentation and tutorials I ran across when learning to program the iPhone depended a little too much on Interface Builder, which basically sticks a layer of magic between me and what I want to do. Frankly, I like to begin at the bottom and work my way up, which is why this tutorial is going to show you how to create a basic 'Hello World' application programmatically - without the help of a visual designer.

When I pick up any new framework that includes a designer, I like to start out building interfaces in code, because then I get an understanding of what the designer is doing behind the scenes. And honestly, I find Interface Builder about one of the most confusing designers I've ever used.

The first thing you're going to need to do is download and install the iPhone SDK. This is going to give you everything you need in order to build apps - XCode, iPhone Simulator, and Interface Builder. Downloading and installing the SDK is totally free. You'll have to pay $99 if you want to run the app on a real iPhone or distribute it to the app store. For the purposes of learning, though, the simulator works just fine.

After you've got all that stuff installed, you're ready to start. Start by launching XCode. By default it's installed in the Developer folder.

When you launch XCode you'll be presented with a welcome screen. You can either look through that or just dismiss it, none of it is particularly important. What we need is a new project. Select File > New Project to bring up the project templates.

The Window-Based Application is about as simple as it gets. What this template is going to give is a Window and an application delegate. An application delegate (UIApplicationDelegate) is an object that responds to messages from aUIApplication object. There can be only one UIApplication object, and the project template takes care of creating it for us. When you click Choose, you'll now be prompted for a project name. I named mine "HelloWorld".

Once the project is created, you'll be presented with the XCode interface and all of the files the project template has generated for you.

The important files are main.m, HelloWorldAppDelegate.h, and HelloWorldAppDelegate.m. The main function is where the single UIApplication object is created. The function call UIApplicationMain() takes care of that. You might be wondering, though, how in the world is HelloWorldAppDelegate hooked up to the UIApplication object? Well, unfortunately there's still a little magic we can't avoid. The template created a nib file for us (MainWindow.xib) that takes care of forming this relationship. You'll just have to take it for granted that the messages will be passed into our delegate.

Now let's check out the implementation of the delegate, HelloWorldAppDelegate.m. There are several messages we can get from the UIApplication object, however the template has already created the one we care about -applicationDidFinishLaunching

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

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

This function is where we'll be creating our view controller, which will eventually hold our 'Hello World' label object. In order to create a view controller, we need to add another class to our project that subclasses UIViewController. Fortunately, since creating view controllers is a common task, XCode has a template for it. Right mouse click on the Classes folder and choose Add > New File.

When you click Next, you'll be presented with some options. The only thing you should have to set is the filename. I named mine HelloWorldViewController. You might notice that the new implementation file (HelloWorldViewController.m) is full of commented out functions. View controllers are meant to be used by overriding the base implementation of various methods. In our case, we want to override loadView, which is used to manually populate a view controller.

// Implement loadView to create a view hierarchy programmatically, 
// without using a nib.
- (void)loadView {
        
}

We're getting there. We're almost ready to starting putting something on the screen. You don't add controls directly to the view controller. They're added to a UIView, which is a property of the view controller. The view, however, is not allocated yet, so we're going to start there. We need to create a UIView object that is the size of our display and set it to the view controllers view property.

- (void)loadView {
        
  //create a frame that sets the bounds of the view
  CGRect frame = CGRectMake(0, 0, 320, 480);
        
  //allocate the view
  self.view = [[UIView alloc] initWithFrame:frame];
        
  //set the view's background color
  self.view.backgroundColor = [UIColor whiteColor];
}

The first thing I do is create a CGRect object that will act as the bounds for our view. Basically I want the view positioned at (0, 0) and be the total size of the iPhone display (320, 480). View controllers have a view property that needs to be set to our new UIView object. The last thing I do is simply set the background color property to white.

All right, now we can actually create a label to hold our "Hello World" text.

- (void)loadView {
        
  //create a frame that sets the bounds of the view
  CGRect frame = CGRectMake(0, 0, 320, 480);
        
  //allocate the view
  self.view = [[UIView alloc] initWithFrame:frame];
        
  //set the view's background color
  self.view.backgroundColor = [UIColor whiteColor];
        
  //set the position of the label
  frame = CGRectMake(100, 170, 100, 50);
  
  //allocate the label
  UILabel *label = [[UILabel alloc] initWithFrame:frame];
  
  //set the label's text
  label.text = @"Hello World!";
  
  //add the label to the view
  [self.view addSubview:label];
  
  //release the label
  [label release];
}

Again, I need to specify where I'd like the label to be, so I create another CGRect object. I then allocate the label and initialize it with the bounds I just created. Next up I set the text to "Hello World!" and add the label to the view. Objective-C uses reference counting to automatically delete objects, so whenever you're done with a reference, you need to call release.

We now have a view controller with a label that will display the text, "Hello World". Now we need to create an instance of this view controller and add it to our application. Remember that function,applicationDidFinishLaunching that I mentioned earlier. That's where we'll be creating our view controller.

The first thing you're going to have to do it add an import statement at the top of that file (HelloWorldAppDelegate.m) so the compiler can find the declaration of that object.

#import "HelloWorldAppDelegate.h"
#import "HelloWorldViewController.h"

Just add it right under the existing import statement. Now we're ready to create the view controller.

- (void)applicationDidFinishLaunching:(UIApplication *)application {    
  
  //allocate the view controller
  self.viewController = [HelloWorldViewController alloc];
  
  //add the view controller's view to the window
  [window addSubview:self.viewController.view];
  
  [window makeKeyAndVisible];
}

Just like before, we simply allocate a new HelloWorldViewController. We don't add the view controller directly to the window, rather we add it's view property to the window. Technically we could create the view controller locally, but doing so would cause a memory leak. We need to save a reference to it somewhere so we can clean up the memory at a later time. I created a property called viewController to store the view controller.

Properties are defined in the .h file. Here's my modified HelloWorldAppDelegate.h file.

#import <UIKit/UIKit.h>

@class HelloWorldViewController;

@interface HelloWorldAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
  
  HelloWorldViewController *viewController;
  
}

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

@end

The @class HelloWorldViewController is a forward declaration. Basically we're telling the compiler a class with this name exists, but you don't need to worry about its definition right now. In the @interface section, we declare a member variable to hold our view controller. Lastly, we use @property to wrap our member variable with implicitget and set functions.

We're almost done. We now need to tell the compiler to actually create the get and set functions for our new property. We do that back in the .m file with @synthesize.

@synthesize window;
@synthesize viewController;

You should already see one for the window property. Just stick this one right underneath it. The very last thing we need to do is release our reference to the view controller when the dealloc is called. There should already be a dealloc function in the .m file. We just need to add a little to it.

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

And there you have it. The final HelloWorldAppDelegate implementation file should look like this:

#import "HelloWorldAppDelegate.h"
#import "HelloWorldViewController.h"

@implementation HelloWorldAppDelegate

@synthesize window;
@synthesize viewController;


- (void)applicationDidFinishLaunching:(UIApplication *)application {    
  
  //allocate the view controller
  self.viewController = [HelloWorldViewController alloc];
  
  //add the view controller's view to the window
  [window addSubview:self.viewController.view];
  
  [window makeKeyAndVisible];
}


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

@end

We're done. If you build and run the app (Build > Build and Go), you should see something that looks like the image below.

And there you have it. You've learned how to build a simple iPhone application entirely in code. The iPhone is a new platform for us, so as we learn we'll continue to post new tutorials. If you've got questions, feel free to post them below or leave them in our Forums.