Mobile Programming - Lecture 13

Cay S. Horstmann

Table Views

• Tables are everywhere
• 

Table Views

• Table view instance of UITableView
• Each row is instance of UITableViewCell
• 
• Table gets data from object conforming to UITableViewDelegate protocol
• Row data from object conforming to UITableViewDataSource protocol
• Row data is cached but needs to be re-supplied on demand

Table Styles

• Grouped, plain, indexed
• 
• Each division is a section

Table Classes

• UITableViewDelegate describes visual appearance, manipulation options
• UITableViewDataSource describes contents of table (2 required methods)
• numberOfRowsInSection gives rows in a particular section
• cellForRowAtIndexPath gives UITableViewCell for NSIndexPath
• Need reuse identifiers for enabling cell reuse. Can use same identifier if all cells look the same.

Lab

• Bring your laptop to each class
• You will work with a buddy
• One of you writes code, the other types up answers
• Switch roles each lab (not each day)
• Submit lab work to Piazza

A Table

• Make a new project, this time starting with an empty project, but otherwise with the same settings as before. Call it Quiz.
• Note: These instructions are for XCode 4.
• File -> New -> File ... -> Objective-C Class. Name SJSUFirstViewController, superclass UITableViewController
• Edit SJSUAppDelegate.m. Add #import "SJSUFirstViewController.h". Below // Override point for customization after application launch., put

              SJSUFirstViewController *first = [[SJSUFirstViewController alloc] init];
              UINavigationController *navigation = [[UINavigationController alloc]
                                                          initWithRootViewController:first];
              self.window.rootViewController = navigation;

• Place Quiz.plist into the Quiz directory of your project. Right-click on the project and select Add Files to "Quiz". Add the file. Click on it to explore what's inside.
• Add the following instance variable to SJSUFirstViewController, right above the first method:

              NSArray *questions;

• Add this code below // Custom initialization in initWithStyle:

                  self.title = @"Quiz";
                  NSString *path = [[NSBundle mainBundle] pathForResource:@"Quiz"                                                                         ofType:@"plist"];
                  questions = [NSArray arrayWithContentsOfFile:path];

• Change numberOfSectionsInTableView to return 1 and tableView:numberOfRowsInSection to return [questions count]
• Under // Configure the cell... in tableView:cellForRowAtIndexPath, put

  cell.textLabel.text = [[questions objectAtIndex: indexPath.row] objectForKey: @"text"];

• Add this call to register the cell prototype in viewDidLoad:

      [self.tableView registerClass:[UITableViewCell class]
                   forCellReuseIdentifier:@"Cell"];

• Run the program. What happens?
• Click on a row. What happens? Why?

Navigating to the Next Level

• File -> New -> File ... -> Objective-C Class. Name SJSUSecondViewController, superclass UITableViewController
• In SJSUSecondViewController.h, below the @interface line, add

  @property (copy, nonatomic) NSArray *choices;

• In SJSUSecondViewController.m, make the appropriate settings, following the previous slide:
  • Set the title: self.title = @"Question";
  • Change numberOfSectionsInTableView to return 1 and tableView:numberOfRowsInSection to return [self.choices count]
  • If you are using iOS 6 or later, register the cell prototype
  • To show a cell, call cell.textLabel.text = self.choices[indexPath.row];
• In SJSUFirstViewController.m, make these changes:
  • Add #import "SJSUSecondViewController.h"
  • In didSelectRowAtIndexPath, add

                SJSUSecondViewController *controller = [[SJSUSecondViewController alloc] init];
                controller.choices = [[questions objectAtIndex: indexPath.row] objectForKey: @"choices"];
                [self.navigationController pushViewController:controller animated:YES];

• Run again and select a question. What happens?
• How do you get back to the questions?
• Extra time? Change the background color of a choice that the user picked to red or green if the user answered it, depending on whether the answer was correct or not. Hint: cell.textLabel.backgroundColor = [UIColor colorWithRed: 0.0 green: 1.0 blue: 0.0 alpha: 1.0]