iPhone Programming: Displaying Data with the Table View : Page 3

Displaying the Item Selected

So far, you've seen how to populate the Table View with items. Now you'll see how to let users make selections in a Table View.

Implement the tableView:didSelectRowAtIndexPath: method in the RootViewController.m file as follows:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:
(NSIndexPath *)indexPath {
    
    NSString *stateSelected = 
      [listOfStates objectAtIndex:[indexPath row]];
    NSString *msg = [[NSString alloc] initWithFormat:
    @"You have selected %@", stateSelected];
    UIAlertView *alert = 
      [[UIAlertView alloc] initWithTitle:@"State selected" 
         message:msg 
         delegate:self 
         cancelButtonTitle:@"OK" 
         otherButtonTitles:nil];    
    
    [alert show];     
    [alert release];
    [stateSelected release];
    [msg release]; 
}

The didSelectRowAtIndexPath: method gets called whenever the user selects a row in the Table View. One of the even parameters is of type NSIndexPath, which represents the path of a specific item in a nested array collection.

Figure 9. Selected Row Alert: You'll see this alert when you select a row in the Table View.

To know which row has been selected, you simply call the row property of the NSIndexPath object (indexPath) and then use the row number as an index into the listOfStates array:

NSString *stateSelected = [listOfStates objectAtIndex:[indexPath row]];

Press Command-R to test the application on the iPhone Simulator. When you select a row by tapping on it, you'll see an alert view showing the selected row (see Figure 9).

Navigating to Another View When a Row Is Selected

One very common operation with a Table View when a user selects a row is to display details of the selected row in another View window. To do that, add a new XIB file and its corresponding view controller to your project. Right-click on the Classes folder in Xcode and select Add → New File….

Under the Cocoa Touch Class category, select the UIViewController subclass template, ensure the “With XIB for user interface” option is selected (see Figure 10), and click Next.

Figure 10. Adding a New View: The figure shows the screen for adding a new UIViewController subclass item to the project.

Figure 11. New View Files: Creating the new View adds three files to the sample project.

Name the new class DetailsViewController.m, and click Finish. Xcode should now have three additional files as shown in Figure 11.

Figure 12. New View with Label: Add a Label view to the View window and resize it as shown here.

Double-click the DetailsViewController.xib file to edit it in Interface Builder. Drag and drop a Label view onto the View window (see Figure 12).

Type the following statements in the DetailsViewController.h file:

#import <UIKit/UIKit.h>
@interface DetailsViewController : UIViewController {
    IBOutlet UILabel *label;
    NSString *textSelected;
}
@property (nonatomic, retain) UILabel *label;
@property (nonatomic, retain) NSString *textSelected;
-(id) initWithTextSelected:(NSString *) text;
@end

Next, enter the following statements in the DetailsViewController.m file:

#import "DetailsViewController.h"
@implementation DetailsViewController
@synthesize label;
@synthesize textSelected;
-(id) initWithTextSelected:(NSString *) text {
    self.textSelected = text;
    [label setText:[self textSelected]];
    return self;
}
- (void)viewDidLoad {
    [label setText:[self textSelected]];
    self.title = @"Movie Details";
    [super viewDidLoad];
}

Figure 13. Making Connections: Connect the label outlet to the Label view.

- (void)dealloc {
    [textSelected release];
    [label release];
    [super dealloc];
}
@end

Save the project in Xcode. Back in Interface Builder, control-click and drag the File's Owner item onto the Label view (see Figure 13). Select the label.

Figure 14. Navigating to Another View: Selecting a state row now navigates to a second View window that displays the selected state.

Back in Xcode, add the following statements to the RootViewController.h file:

#import "DetailsViewController.h"
@interface RootViewController : UITableViewController {
    DetailsViewController *detailsViewController;
}
@property (nonatomic, retain) 
   DetailsViewController *detailsViewController;
@end

Finally, add the code in Listing 2 to the RootViewController.m file.

Press Command-R to test the application. Now, selecting a row redirects you to another View window that displays the selected state (see Figure 14).