iPhone Programming Tutorial – UITableView Hello World

July 26th, 2008 Posted by: - posted under:Tutorials

In this tutorial I will walk to you through creating a simple “Hello World” application using a UITableView for the iPhone. There are many ways that a Hello World program could be made on the iPhone, I am going to show you the simplest. This tutorial assumes you have a basic understanding of Objective-C. Apple has provided a very simple and straight forward tutorial on Objective-C. You can find it here.

You will learn how to:

This tutorial assumes that you have already installed the iPhone SDK. If you are unsure how to do this, click and follow the steps.

Creating a New Navigation-Based Application

Open Up Xcode

You will be doing all of your development in Xcode. Then close the Welcome window (if it shows up)

Start a new iPhone OS Project
Click Xcode > New Project and a window should pop up like this:

Make sure Application is selected under iPhone OS and then select Navigation-Based Application. Click Choose… It will ask you to name your project. Type in “Hello World” and let’s get started.

Learn About the Default Files

What is all this stuff?
There are quite a few files that get added to your project. At first glance, this looks kind of intimidating. Don’t worry, we only need to edit one of them. Here is a quick explanation of the different files.
You don’t have to read this part but having this many files is what confused me the most when I started developing for the iPhone.

  1. CoreGraphics.framework, Foundation.framwork, UIKit.framework – You guessed it, this is a set of library functions provided by Apple that we use in our application. We use these as includes similar to any other language that includes library functions.
  2. HelloWorld.app – This is your app that gets installed on the iPhone. We don’t really need to worry about this right now
  3. Hello_World_Prefix.pch – This is another include file that gets compiled separately from your other files so you don’t need to include it on each file. It contains some code to include the data inside the frameworks.
  4. Hello_WorldAppDelegate.h – This is a header file that contains all of our definitions for variables that we will be using. It’s very similar to a header file in C or C++;
  5. Hello_WorldAppDelegate.m – All of the magic starts here. Consider this file our starting point for execution. The main.m file invokes this object.
  6. Info.plist – This contains various meta information about your program. You won’t really need to edit this until you are ready to start testing on the iPhone
  7. main.m – Like most programming language, this file contains our main function. This is where execution begins. The main function basically instantiates our object and starts the program. You shouldn’t need to edit this file.
  8. MainWindow.xib – This contains the visual information of our main window. If you double click on it, it will open in a program called “Interface Builder”. We will get to this a little later. Just on thing to note is this file does not contain any code.
  9. RootViewController.h, RootViewController.m - These are files for a view controller that gets added to our main window. Basically, Apple has already created a simple interface when you clicked on Navigation-Based Application. Since most navigation-based applications use a Table View, Apple has provided it for us to use.
  10. RootViewController.xib – This is a view that Apple has provided that emulates a table. It has rows and columns. We will be displaying our “Hello World” text inside one of these rows
Now, all of these files together create a basic program. Go ahead and click on the Build and Go button at the top of Xcode. Make sure the drop-down on the top left says Simulator | Debug, this tells Xcode that we are testing on the iPhone simulator.
You will see the iPhone simulator start and your program will launch. It’s not very interesting at the moment. All it shows is the Table View that Apple has added for us. So what we are going to do is add a row to this table view.

Update the UITableView Cells to Display “Hello World” Text

Let’s write some code
Start by opening RootViewController.m. This is the view controller that Apple added to our main view. All of the functions you see already created in here are functions that have been overridden from the Table View super class. Since we are editing a table, all of these functions will be related to editing a table. So find the function called numberOfRowsInSection.
This function tells the application how many rows are in our table. Currently, it returns 0. Let’s change that to return 1. This will tell the application that we want 1 row in our table. Now go down to the function called cellForRowAtIndexPath. This function gets called once for every row. This is where we define what content to display in a given row. In this case we want the row to be a string that says “Hello World”.
What this function is doing is creating a new cell object and returning it. The code between the i(cell==null) block checks to see if we have created a cell before, if not build a new cell, otherwise use the one we created before. This helps in performance so we don’t need to build new cells each time we visit this function. So right before the // Set up the cell comment add the following code:
[cell setText:@"Hello World"];
We are basically calling the setText method of the cell object and pass in the string “Hello World”. As you should know from reading Apples Objective-C overview, strings begin with an “@” symbol.
That’s it! Click the Build and Go button again to launch the iPhone simulator. You should now see a screen like this:
You can now use this code as a base for creating a Navigation Based application. In a later tutorial, I will detail how to populate this table view with an array of strings to create navigation for a simple program. If you get lost at any time, you can download the sample code for this program here hello-world. I hope you enjoyed the tutorial and if you have any questions, feel free to leave them in the comments. Happy Xcoding!