Using The Table View in a Storyboard: Part 2 of 3

In this workshop, you’ll do the following:

  • Create a new Xcode project
  • Rename the View Controller class
  • Add a Navigation Controller scene on the storyboard
  • Add a new scene on the storyboard
  • Add a new View Controller class in the project
  • Connect the new View Controller class to the new scene
  • Design and code the List View Controller scene

Create a New Xcode Project

The first thing you should do is launch Xcode and create a new project. Use images shown in Figure 1 as a guide when you create the project. I assume you’ll save it in the iOS7 Projects folder on your computer.

storyboard-tableview-fig00
Figure 1

Rename The ViewController Class

What you need to do now is, use Xcode’s Refactor menu item to change the ViewController class name throughout the GroceryList project.

  1. Click the Symbol Navigation icon, indicated by the pink circle in the image below. Click the ViewController class.
    refactor-class -step1
  2. Choose Edit > Refactor > Rename…
  3. Enter ListViewController, then click the Preview button.
    refactore-clas-step2
  4. The preview action sheet, shown below, allows you to view side by side all the proposed changes to your files. Click the Save button.
    refactore-clas-step3
  5. Click the Enable button and you’re done!
    refactore-clas-step4

Add a Navigation Controller Scene on The Storyboard

What you need to do now is add a Navigation Controller scene on the storyboard. We’ll use it to navigation the application’s View Controllers and their scenes.

  1. Click the Main.storyboard file to load it in Interface Builder.
  2. Click the List View Controller scene’s Dock. It is the black rectangle below the scene.
  3. Choose Editor ➤ Embed In ➤ Navigation Controller.
    xcode-menu-embedin

Xcode added the Navigation Controller scene on the storyboard so your workspace look like this now.

grocerylist-scene4

Add a New Scene on The Storyboard

You need to add a new scene on the storyboard. It will serve as the Add Item scene. Here’s how to do it.

  1. Click the storyboard background to deselect the Navigator Controller Scene.
  2. Drag a View Controller object from the Object Library to the right-hand side of the List View Controller scene. Hold it there for a second, and the existing scene will shift to the left. Once it does, place the new View Controller to the right of the List View Controller scene that has shifted to the left.

Your workspace should look something like this now.

grocerylist-scene5

Now, rename the class to AddViewController by executing step in above section entitled, Rename The ViewController Class.

Add a New View Controller Class in The Project

Now, you’ll have to use Xcode’s Objective-C class template to add a new View Controller class in the project. It will server as the Add View Controller scene’s code files.

  1. In the Project Navigator pane, select the GroceryList folder, the one with the yellow folder icon.
  2. Follow instructions shown in this image to create a View Controller class file in the project.
    add_objectivec-classfile
  3. When you get to step 3 in above image, enter information shown below.
Class:  AddViewController
Subclass of: UIViewController
Check boxes: Leave them unchecked

Note that the two new files (AddViewController.h and .m) were placed below the Supporting Files folder. Drag them back above the folder so they appear with the rest of the files.

Connect The New View Controller Class to The New Scene

You’ve added a new View Controller class called AddViewController in the project. Now, you need to associate it with the storyboard’s Add View Controller scene. Here’s how to do it.

  1. Click the Main.storyboard file to load it in Interface Builder.
  2. Click the Add View Controller scene’s Dock. It is the black rectangle below the scene.
  3. In the Identity Inspector pane, select AddViewController in the Class attribute.

By setting the Add View Controller scene’s Class attribute in Interface Builder, you’ve associated it with the AddViewController class files. You can add code in these files to implement any required functionality for Add View Controller Scene.

Design and Code The List View Controller Scene

In this section you will design the List View Controller Scene’s user interface. You will add code in the List View Controller class files to display items in the scene’s Table View rows.

Step 1: Add a Table View on The List View Controller Scene

Click the List View Controller Scene’s Dock to make its scene the active object. Now, drag a Table View Control from the Object Library on the scene. Make sure it covers the scene’s surface. In the Size Inspector pane, enter 480 in the Height attribute, so the Table View look like this now:
grocerylist-listviewscene00
By making the Table View object shorter than the View object, enables the Table View to scroll in the simulator; thus revealing item names in the table’e view area. The number 480 is not some random number I can up with. Here’s how I figured out how much scrolling space to create at the bottom of the scene.

I clicked the Document Outline pane’s toggle button to show it. I then clicked the Size Inspector button to show it as well. Now, I did the following:

  1. I clicked the List View Controller Scene’s View object in the Document Outline. I wrote its Height attribute (568) on a piece of paper.
  2. I clicked the List View Controller Scene’s Table View Cell object in the Document Outline and wrote its Height attribute (44) on the paper.
  3. I clicked the Navigation Controller Scene’s Navigator Bar object in the Document Outline and wrote its Height attribute (44) on the paper.
  4. I performed this calculation to come up with the new height for the Table View object: 568 – (44 + 44) = 480
Step 2: Configure The Table View Cell

You need to add a Table Cell object on the Table View object and  configure some of its attributes in Interface Builder. The Table View Cell object is basically a prototype of the Table View’s cells (or rows). These cells are for displaying data in the Table View object.  Do the following to add a Table View Cell on the Table View object.

  1. Click the Table View object in the Document Outline pane.
  2. Click the Attribute Inspector button to show it.
  3. Enter the number 1 in the Prototype Cells attribute.
  4. Click the Table View Cell in the Document Outline.

Your workspace should look like this now.

grocerylist-fig01

Take a look at the Document Outline pane in above image and note the hierarchy of objects place on the View so far. First you have the Table View, then the Table View Cell. From now on, I will use names shown in the Document Outline pane to reference a scene’s objects. For example, I will say something like this, “Click the Table View object.” I assume you will select it from the Document Outline pane. Got that? Good, let’s move along.

Do the following to configure a few attributes of the Table View Cell.

  1. Click the Table View Cell.
  2. In the Attribute Inspector pane, click the Style menu and select Basic. Notice the Table View Cell now display the text Title.
  3. Enter tableCell in the Identifier attribute. We will reference it in code later on.
  4. Select the Disclosure Indicator for the Accessory attribute
  5. That’s it! Save your work (command + S).
Step 3: Declare and Connect an IBOutlet Property For The Table View

What you need to do now is use the Assistant Editor to create an IBOutlet property for the Table View object. Why? Because you’ll be referencing it in code.

  1. Click the ListViewController.h file to load it in the Standard editor.
  2. Click the Utilities panel to hide it.
  3. Click the Assistant Editor button. Xcode split the editor in two and you should see the Main.storyboard in the right editor. If not, then select it from the right editor’s Jump bar.
  4. Click the Navigator button to hide the Navigator pane.
  5. In the right editor, click the List View Controller object and your workspace should look like this now.
    grocerylist-fig02
  6. Control-click the Table View object in the right editor and drag resulting line to the area immediately beneath the @interface directive as illustrated in this image.
    grocerylist-fig03
  7. Release your mouse and you will see the configuration window illustrated in the image below. Enter tableView in the Name field then click the Connect button.
    grocerylist-fig04
  8. The Assistant editor create and connect an outlet for the Table View object, as shown in this image.
    grocerylist-figh05
  9. While you are in the Assistant editor, add this code in the ListViewController.h file, which declare a property for holding data we’ll load in instances (copies) of Table View Cell. When you’re done return to the Standard Editor by clicking the Standard editor button.  
    @property (strong, nonatomic) NSMutableArray *tableDataSource;
Step 4: Connect The Table View dataSource and Delegate

What you need to do now is connect the Table View dataSource and delegate outlet to the List View Controller Scene’s View Controller object. Here’s how to do it in Interface Builder.

  1. Click the Main.storyboard file.
  2. Locate the List View Controller Scene, click its Dock.
  3. Right-click the Table View object to bring up the Connections inspector window.
  4. Click from the dataSource circle and drag resulting blue line to the View Controller object, as illustrated in this image.
    grocerylist-fig06
  5. Repeat above step to connect the the delegate outlet to the View Controller object.
Step 5: Define The Table View DataSource Methods

What you need to do now is, add code shown below in the ListViewController.m file, which define two method of the Table View object.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
  return self.tableDataSource.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"tableCell"];
  // Configure the table cell
  cell.textLabel.text = [self.tableDataSource objectAtIndex:indexPath.row];
  return cell;
}
Step 6: Initialize The Table View dataSource Object

The last thing I want you to do is, add this statement in the ListViewController.m file’s ViewDidLoad method, which initialize the Table View control’s dataSource object.

self.tableDataSource = [NSMutableArray arrayWithObjects:@"Fruits",
@"Lettuce",
@"Tomatoes",
@"Potatoes",
@"Green Peppers",
@"Garbage Bags",
@"2% Milk & Soy Milk",
@"Ice Cream",
@"Hot Dogs and Buns",
@"Bottled Water",
nil];

Run The Application

Here comes the moment of truth. Run the application and you will see this output in the simulator. Notice nothing happens when you click the table rows. We will take care of that in next week’s workshop.
grocerylist-fig07a

Configure The List View Scene’s Navigation Bar

As you can see, nothing is displayed on the scene’s navigation bar. To fix that, you’ll have to set the bar’s Title attribute and add a Bar Button Item on it.

  1. Click the List View Controller’s Navigation Item and make sure the Attribute Inspector is showing.
  2. Enter Grocery List in the Title attribute.
  3. Enter UIBa in the search box at the bottom of the Utilities pane-see image below.
  4. Drag the Bar Button Item from the Object Library and drop it in the right corner of the Navigation Item, as shown in the image below.
  5. Configure the Bar Button Item’ s Identifier attribute a + sign.

grocerylist-fig08
This concludes the second part of the tutorial series, Using The Table View in a Storyboard. Next week we will work on part 3 of the series. Until then, happy coding! 🙂