UINavigationBar tutorial with UITable, pushing detail view using didSelectRowAtIndexPath and all XCode example source files

First thing we need to do is to create a new project, Navigation-based Application and call it for example “MyUITableView”.

Open RootViewController.h and create new variable NSMutableArray called myList

//
//  RootViewController.h
//  MyUITableView
//
//  Created by Ondrej Rafaj on 20.8.09.
//  Copyright Home 2009. All rights reserved.
//

@interface RootViewController : UITableViewController {
	
	NSMutableArray *myList;
	
}

@end

Open the RootViewController.m and uncomment and edit the viewDidLoad function. First you need to initialize the mutable array and than add few objects in it. In this example we’ll create a list of different programming languages.

- (void)viewDidLoad {
    [super viewDidLoad];
	
	// initializing 
	myList = [[NSMutableArray alloc] init];
	
	// adding objects to the array
	[myList addObject: @"Objective-C"];
	[myList addObject: @"PHP"];
	[myList addObject: @"C#.NET"];
	[myList addObject: @"VB.NET"];
	[myList addObject: @"C++.NET"];
	[myList addObject: @"C"];
	[myList addObject: @"JavaScript"];
	[myList addObject: @"ActionScript"];
	[myList addObject: @"Python"];
	[myList addObject: @"RubyOnRails"];
	[myList addObject: @"Java"];

}

Now we need to edit the tableView, numberOfRowsInSection function to return number of rows in the array instead of just “0”. It will look like that:

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [myList count];
}

And we can’t forget to release the array from memory once we are done. Just edit the dealloc function and add [myList release];.

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

Last thing we need to do to make the basic TableView working is to configure the cell in tableView, cellForRowAtIndexPath function. You will do that by replacing the “// Configure the cell.” Comment with:

NSString *cellValue = [myList objectAtIndex:indexPath.row];
cell.textLabel.text = cellValue;

The entire function will look like that:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }
    
    // Set up the text for your cell
	NSString *cellValue = [myList objectAtIndex:indexPath.row];
	cell.textLabel.text = cellValue;
	
	
    return cell;
}

Just be careful if you were following some older tutorials, you can find the cell.text = cellValue; instead of cell.textLabel.text = cellValue; which is deprecated in SDK 3.0.

You can now run your application and see the table filled with those different programming languages, but to e honest this is not very useful, we want to do some interaction with the table … am I right? ? … ok, let’s do that …

Part two, creating the detail view for every single language.

Now rightclick on the classes folder (Group) and add new file “Add -> New file …”, select “Cocoa Touch Class” and “UIViewController subclass”. Make sure that the “With XIB for user interface” checkbox is ticked.

Call this file for example DetailViewController.m and click finish. This created three new files .m, .h and .xib file. To keep everything organized, move the .xib file into the Resources folder (Group).

Open the DetailViewController.h file and add IBOutlet for label, one NSString and their properties. This file wil than look like that:

//
//  DetailViewController.h
//  MyUITableView
//
//  Created by Ondrej Rafaj on 20.8.09.
//  Copyright 2009 Home. All rights reserved.
//

#import 


@interface DetailViewController : UIViewController {
	
	IBOutlet UILabel *myLabel;
	
	NSString *myProgLang;
	
}

@property (nonatomic, retain) IBOutlet UILabel *myLabel;
@property (nonatomic, retain) NSString *myProgLang;

@end

Open the DetailViewController.m file and synthesize those two variables. Synthesizing will create all set and get functionality for you that you don’t need to do that manually. Start of the file will look like that:

#import "DetailViewController.h"

@implementation DetailViewController

@synthesize myLabel;
@synthesize myProgLang;

Now uncomment the viewDidLoad function and set that the text of the label will equal your myProgLang variable, function will look like that:

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
	myLabel.text = myProgLang;
}

And the last thing (which we need to always do) is to release all used variables from the memory in the “dealloc” function.

- (void)dealloc {
	[myLabel release];
	[myProgLang release];
    [super dealloc];
}

Now we are going to build the actual interface for our detail view. Double click the DetailViewController.xib file, this will start your Interface Builder. Add to labels on to the view. Something like that:

Once you have your labels on the stage, we need to connect “There will be my lang” label to the IBOutlet UILabel variable we’ve created in XCode. Just right-click the label.

Drag the small circle from “New Referencing Outlet” and drop it on the “File’s owner” element in .xib’s tree view.

Select the myLabel and we are connected :).

Save the file, go back to the XCode because now we need to create the “on click functionality” to show the detail view.

Open the RootViewController.m file and uncomment the tableView, didSelectRowAtIndexPath function.

// Override to support row selection in the table view.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
	
	// get the selected language
	NSString *selectedLang = [myList objectAtIndex:indexPath.row];
	
	//Initialize the detail view controller and display it.
	DetailViewController *myDetViewCont = [[DetailViewController alloc] initWithNibName:@"DetailViewController" bundle:[NSBundle mainBundle]]; // creating new detail view controller instance
	// you can use this as well the .xib file has the same name as your controller class:
	// DetailViewController *myDetViewCont = [[DetailViewController alloc] init];

	myDetViewCont.myProgLang = selectedLang; // assigning the correct value to the variable inside DetailViewController
	[self.navigationController pushViewController:myDetViewCont animated:YES]; // "Pushing the controller on the screen"
	[myDetViewCont release]; // releasing controller from the memory
	myDetViewCont = nil;
	
}

Oh yes, I’ve tried to run the application and it did not work :) … Do the same thing and think why?! …

It didn’t work because we forgot to include the DetailViewController.h file on the top of the file. You can do it like that:

//
//  RootViewController.m
//  MyUITableView
//
//  Created by Ondrej Rafaj on 20.8.09.
//  Copyright Home 2009. All rights reserved.
//

#import "RootViewController.h"
#import "DetailViewController.h" // importing the detail view controller header file


@implementation RootViewController

And what can we do next?! … Run the application and start working on your CV because you are now the iPhone developer :)

Start following us on Twitter, get our RSS feed and stay tuned, another tutorial will follow soon :)

You can download this tutorial in Word (.docx) format here as well as the sample application.

Ondrej