Top of the page
Close

This is a red error

This is a red error

This is a red error

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

Ondrej Rafaj on 2009.08.20 13:50:05

Attached files
UITableView tutorial.docx Download
MyUITableView.zip Download

This tutorial will show you how to populate a table using UITableView, NSMutableArray and Navigation-Based application for iPhone and how to create detail view. Tutorial includes example code, sample project and pictures from Interface Builder.

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.

Adding DetailViewController files

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:

Interface Builder

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.

Right-click on the label you want to connect

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

Connecting the label to the File's owner

Select the myLabel and we are connected :).

Selecting the IBOutlet for the variable

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

Final application, table view

Final application, detail view

Ondrej Rafaj

Ondrej Rafaj

Technical director @ Fuerte International

Back to top Comment

Comments ... Why not to get involved!
HTML Comment Box is loading comments...

Old comments:

  • mushroom

    mushroom

    from 79.197.**.** @   

    forget the .xib files -.- they are not existing! the interface builder sucks anyway.

  • Taytus

    Taytus

    from 70.248.**.** @   

    Thanks a lot!!! I am starting with Iphone and Xcode and this is great help.

  • Ondrej

    Ondrej

    from 87.194.**.** @   

    Thanks Taytus ... :)
    Mushroom: Suuuure :)

  • SebLuRtZ

    SebLuRtZ

    from 82.237.**.** @   

    Your application is working well but when i try to create a new project by myself i have a problem :

    In Interface Builder for the RootViewController.xib file, i can't see any tableView Outlet ! (i can link the view to File's owner but can't do it on tableView as it is already done in your program)

    Is there someone with the same problem or someone who knows how to handle it ? I followed exactly the entire tutorial but this is the only thing that miss.

    Thank you for helping me.

  • Ondrej

    Ondrej

    from 90.203.**.** @   

    Double check if your root controller has correct type like it is set in detail controller, here the type is DetailViewController ... that means that the interface builder is using the correct library to get all the variables ... you can set this in preferences (last tab) after clicking on File's owner icon ... once you have this set ad you have your outlet, property for it all correct in the .m file you should see the tableView outlet, I think on the third tab in preferences for FO ...hope this helps, if not I'll try to go trough the tutorial and check if there is really everything in it :)

Back to top

IE SUCKS, DON'T USE IT :) Digg this page