First iPhone Application

In this article, I will show you how to create your first iPhone Application. The application is created using iPhone SDK beta 8. This is how the application will look like in the iPhone simulator.

Click to open in a new window

In this tutorial you will learn to

1. Create a new project
2. Create a view
3. Create a view controller
4. To add a view to the window.
5. Event handling.
   
6. Connect the controls on the view to the view controller objects.

Create a new project
Lets get started by opening Xcode, you can close the welcome screen that you see. Create a new project by clicking on File-> New Project and selecting Window-Based Application from iPhone OS. Name your project "HelloUniverse" and save it. The window that you see in front of you is the Xcode IDE. Note: If you have named your project something else, then the name of your files will be different then the ones I speak of here.

Some of the files required to run the application is already created for you. One of the important file is called main.m and it has one method called main which takes two arguments and returns an integer. Almost any iPhone application you create, the main method will look similar to this one. The other important detail of the project is the application delegate, in our project it is called HelloUniverseAppDelegate, where the class is declared in the header file (denoted by a .h extension) and the class is implemented in the implementation file (denoted by a .m extension). You have just created your first iPhone application, click on Build and Go to find out for yourself.

What you are seeing is the application running in the iPhone simulator. This does not do anything useful, except display a white screen. Lets add some functionality to it.

Writing applications for iPhone is a completely new experience on a different device. There are few things you need to remember, when creating applications for the iPhone.

1. An iPhone application can only have one window. We will create views which can then be added to the window.
   
2. iPhone OS does not support memory management using the garbage collection feature that is in Mac OS Xv10.5 or later.

Create a view

To create a new view, we have to create a nib file. nib file is your user interface that you design using the Interface Builder. Interface Builder comes with the SDK. As the name suggest Interface Builder is visual tool which you will use to create your window, views and establish relationship between the views and other objects in the application. A nib file has a .xib extension. One file is already created for us which is the main window. The same window which we saw in the iPhone simulator.

Double click the MainWindow.xib file to launch the Interface Builder.

MainWindow.xib has four objects

1. File's Owner - This is the instance of the UIApplication.
2. First Responder - This is used to handle multi-touch events. More about this in the future tutorials.
3. Hello Universe App Delegate - Responsible for displaying the window and setting up the initial view. It is also responsible to restore the application to its previous state, handle memory warnings, responding to changes in the orientation of the device. It is set to an instance of the HelloUniverseAppDelegate class. You can find this out by selecting the delegate and click on Tools -> Identity Inspector. As shown in the image below.
4. Window - This is the window which we see when the application loads.

To create a new view using Interface Builder, click on File -> New and Select "View". You will see a new view created. First, we need to save this view and add it to our Xcode project. To do this, select the view and click on File -> Save, select the location to save the view (in your project folder) , name your view "HelloView" and click on save. As soon as you save the file, you will be prompted to add the view in your Xcode project, select the project and click on add.

Go to Xcode and drag your view under resources. This is where your nib files should be placed.

Now we have created our view. Let us add some controls to the view. You can do this by double clicking the view and adding objects to it from the library. If you do not see the library, you can open it by clicking Tools -> Library.

Let us add two text boxes, a label and a button.

Your view should look something like this

Let us set some properties of our controls. Select the first text field and select the Attributes Inspector (Tools -> Attributes Inspector). Enter "First Name" for Placeholder, Under Text Input Traits select Words for capitalize, Name Type Phone Pad for Type and Done for return key. Also select "Clear Context before Drawing" under view. This will clear the text before rewriting. Apply the same settings for the second text field as well but enter "Last Name" for placeholder.

Double click the button and enter "Click ME!!!". This can also be done by selecting the button and changing the Title property in the Attributes Inspector. Select the label and make sure that "Clear Context before Drawing: is checked. Save the View.

We have finished desigining our first view.

Create a view controller

Now we need to create a View Controller. View controllers play a very central role in create an iPhone application. They are responsible for managing a view, navigation and memory management. Every view is connected to a view controller. So let us start by creating our view controller. The UIKit provides a class UIViewController which hides most of the default behavior. To create a new View Controller select Xcode then click on classes and select File -> New File and select UIViewControllersubclass, click on Next and name your file "HelloViewController".

Now we have to create variables for the controls we defined in our view. So we can connect these variables to the actual controls on the view. To do this, open the header file and add the following code

Now if you compile your application, it should succeed but with warnings.

You notice that the controls are defined with the IBOutlet keyword, this tells the compiler to make these variables available in the Interface Builder. We also have properties defined for our variables. If a property is defined with the same name as an existing instance variable then then property ends up using that variable internally. The attribute retain while declaring the property tells the compiler to retain the object during assignment.

Event handling
We have also declared a method to handle the button click event. This method is declared with a special keyword called IBAction, which tells the compiler to make this method available in the Interface Builder. The method takes a parameter of type id (generic type) and returns void (denoted by IBAction).

Now we need to implement the method and also synthesize the properties. Basically telling the compiler to create the getter and the setter methods.

Open the implementation file (HelloViewController.m file) and add the following lines after the @implementation HelloViewController line.

Now write the following code to display a message to the user.

The variable sTemp is an object created with the message alloc and initialized with initWithFormat message. As you can see %@ is a place holder in the string for the nth variable position. The logic checks every combination to find out what type of message to display based on the user input. Since the string is an instance of NSString and created using alloc, we have to deallocate it manually. This is done by passing the release message to the receiving object (usually on the left hand side).

Also we have three properties to hold the text fileds and the label on the view. Since they are declared with the retain attribute we need to release their memory too. This is done in the dealloc method, as shown below. dealloc method is used to release the memory of the Objective-C objects we create.


Add view to the window

Now, we have to add the view as a sub view to the existing window which shows up in the simulator. To do this open HelloUniverseAppDelegate.h file and create a variable of type HelloViewController and also create a property. Since we are using HelloViewController type in the header file, we have to tell the file about our view controller. We do this by adding a forward declaration, which tells the compiler that the class is defined somewhere else and do not bother looking for it now. Forward Declaration is added before the interface begins using @class classname.

In the implementation file, we need to synthesize the property and also release its memory in the dealloc method.

It is in the applicationDidFinishLaunching method we will add our view as a sub view to the window. This is the method which is called when the application is finished loading and this is where we should set up the initial view the user will see or restore the application.

Add the view as a sub-view to the main window.

1. Create an object of type HelloViewController using the alloc message and instantiate using initWithnibName loading the nib file HelloView from the main bundle. A bundle is not relevant to this article, but most of the nib files will be loaded from the main bundle.
   
2. Set the view in the property.
   
3. Release its memory.
   
4. Then we get the view from the view controller and add that view as a sub view to the window. Here the view message is passed to the view controller and the returned view is added as a sub-view to the window.
   
5. Then we make everything visible.
   

Connect the controls on the view to the view controller objects

Now we need to connect the controls on the view to the objects we created. To do this double click the HelloView.xib file, which will open the Interface Builder.

We first have to set the view controller to the File's Owner Proxy Object. To do this select the File's Owner and then select Identity Inspector and from the Class drop down select HelloViewController. If we take a second to look at this page, under Class Outlets we will see all of our variables defined in the header file are present here. Now we need to connect the view controller to the view. To do this click on view and select Connections Inspector, here we will see all our variables defined and it will look something like below.

Next to the view you see an empty circle, click the circle and drag it over to the view and release. You will notice that a connection has been made from the view variable to the view. We need to do the same for the variables lblMessage, txtFirstName, txtLastName.

When do you that, the connection inspector will look like this

Now we need a connection to invoke our display message method when the button is clicked. To do this select the view and its connection inspector. There will be event called "Touch Up Inside" which is the button click event. Click the empty circle and drag it over to the File's Owner object and when you release it, you will be presented with one option and that is the displayMessage action, select it to create a connection. Your connection should look like something below.

That is all we need to do. Go back to Xcode and click on Build and Go. The application should compile without any errors and no warning messages. Enter your first and last name and click on the button and the message will show up. But we do have a problem, it looks like the text editor does not know that we are done editing and does not close itself. To fix this, we need to implement a protocol in our view controller.

The way we implement a protocol is within the <> symbol after the super class name in the interface file. The protocol we need to implement is UITextFieldDelegate. Using this protocol we can set the File's Owner as a delegate from the two text fields. Your interface declaration in the interface file should look something like this

Now we need to implement the method which will handle the closing of the text editor when the done button is clicked.

To do this add the following method to your implementation file.


We check from what field this method is being called (as on a view we can have multiple controls) and if it is either the first name text field or the last name text field we will send a resignFirstResponder message and return YES, which is similar to returning bool.

Now we have to tell the text field's to use the File's Owner as a delegate. To do this, select the view and click on the first name text field and select the Connections Inspector. We will see a field called delegate, click on the empty circle and drag it over to the File's Owner proxy object and release it and a connection will be created. Do the same for the last name text field.

Save your view and click on Build and Go in Xcode. Now the application performs as expected.

You have now successfully created your first iPhone application. Also included with this article is the source code for the application, this is the same source code I used when writing this application. Click here to download the source code.

Please feel free to let me know your likes and dislikes about the tutorial.

My next tutorial will show you how to use the tab bar, where we will create more then one view.