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

Last week you designed the List View Controller Scene and added code in its class files to add data in the Table View’s dataSource. Here’s what the List View Controller Scene look like now.

Create and Configure a Segue for Navigation Bar + Button

The first thing you have to do is create a segue for the List View Controller Navigation bar’s + button.

1. Click the Main.storyboard file.
2. Control-click from the Navigation Item and drag resulting blue line to the Add View Controller scene.
3. Release your mouse when the scene is highlighted in blue.
4. Select push from the Selection Segue menu.
   

What you need to do now give the segue you just created a name, so you can reference it in the Storyboard’s prepareForSegue: method you’ll implement in the ListViewController.m file.

1. Click the segue, indicated by the pink arrow in the image below.
2. Click the Attribute Inspector button to show it.
3. In the Identifier attribute box, enter showAddView.

You’ve created a segue for the Navigation Item and given it a name, now you need to add code in the ListViewController and the AddViewController class file for the segue. Start by entering this import statement at the top of the ListViewController.m file

#import "AddViewController.h"

The last thing you have to do is define the Storyboard prepareForeSegue method, in the ListViewController.m file. As you already know, it is called just before the segue transition the user to the Add View Controller scene.

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
  if ([[segue identifier] isEqualToString:@"showAddView"]) {
  }
}

That’s it. Run the application, click a click the Grocery List’s Navigation Bar’s + button. The segue you created for the bar’s button transition you to the Add View Controller scene.

Configure The Add View Controller Scene’s Navigation Bar

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

1. Click the Main.storyboard file.
2. Click the Add View Controller’s Navigation Item and make sure the Attribute Inspector is showing.
3. Enter Add Item in the Title attribute.
4. Enter UIBa in the search box at the bottom of the Utilities pane.
5. Drag the Bar Button Item from the Object Library and drop it in the right corner of the Navigation Item.
6. In the Attribute Inspector, set the button’s Identifier attribute to Save.

Design The Add View Controller Scene

You need to design the Add View Controller Scene to enable the operator to add an item in the Table View Cell.

1. Drag a Text Field control from the Object Library and drop it on the scene. Adjust its width to what’s shown in the image below.
2. Make sure the Attribute Inspector is showing.
3. In the Placeholder attribute, enter Item Name.
4. Select Appears while editing for the Clear Button attribute.
5. Use the Assistant Editor to create the outlet shown in the second image below, for the Text Field control.

Take the app for a spine. Here’s what the Add Item View Controller Scene look like in the simulator.

The Navigation Controller scene is responsible for creating the Grocery List button you see on the Navigation Bar. Clicking it return you to the Grocery List view.

The Add Item Scene’s Save Method

Now is a good time as any to use the Assistant Editor to create this action connection for the Add View Controller Scene’s Save button.

Next, add this code in the method.

- (IBAction)saveButtonClicked:(UIBarButtonItem *)sender
{
  // Remove white space and newline from the Text Field
  NSString *trimmed = [self.itemNameTextField.text stringByTrimmingCharactersInSet: [NSCharacterSet whitespaceAndNewlineCharacterSet]];

  // Validated the Text Field
  if (trimmed.length == 0) {
    // Clear out the textField control
    self.itemNameTextField.text = nil;

    // Display an error message in an Alert View object
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"OOPS!"
    message: @"The Item Name is required."
    delegate: nil
    cancelButtonTitle: @"OK"
    otherButtonTitles: nil];
    [alert show];
  } else {
    // Data valid, initiate an unwind segue
    [self performSegueWithIdentifier:@"returnToListViewScene" sender:self];
  }
}

Above method’s code is pretty straightforward except for the else block’s statement. What it does is initiate an unwind segue which we will defined in the ListViewController.m file. The first parameter, returnToListViewScene is the segue identifier. The second parameter, sender is the object that initiated the segue and it is the AddViewController class.

Here’s the unwind segue method to add in the ListViewController.m file.

// This is the unwind segue method for the Add View Controller Scene's Save button
-(IBAction)unwindFromAddViewScene:(UIStoryboardSegue *)segue
{
  NSLog(@"Just returned from the Add View Controller Scene.");
  AddViewController *source = segue.sourceViewController;
  ListViewController *destination = segue.destinationViewController;

  if ([segue.identifier isEqualToString:@"returnToListViewScene"]) {
    // Add the new item (itemNameTextField) in the tableDataSource array
    [destination.tableDataSource addObject:source.itemNameTextField.text];

    // Refresh the Table View control
    [self.tableView reloadData];
  }
}

I want you to add this statement in the AddViewController.m file as well. You are calling the unwind segue every time the Add View Controller’s Scene is loaded in the simulator.

[self performSegueWithIdentifier:@"returnToListViewScene" sender:self];

What you need to do now is create a manual unwind segue in Interface Builder. Here’s how to do it.

1. Click the Main.storyboard file.
2. Control-click from the Add View Controller button and drag resulting blue line to the green Exit button, as shown in this image.
   
3. Release your mouse.
4. Select the unwindFromAddViewScene: method, as shown in this image.
   

Once you’ve created the manual unwind segue, you need to give it a name by doing the following.

1. Select the unwind segue in the Document Outline, as shown in the image below.
2. Make sure the Attribute Inspector pane is showing.
3. Enter returnToListViewScene in the Identifier attribute, as shown in the image below.

Run The Application

Run the application again, then use the Add Item View controller’s view to add an item in the Table View Control-see Figure A below.

As you can see in Figure B below, the new item shows up as the last row in the Table View control. The NSLog() function’s message: Just returned from the Add View Controller Scene. is displayed in the Debugger window as well. Go ahead and comment out that statement in the unwindFromAddViewScene: method.

Now, to test the alert view message, just click the Save button without entering an item name in the Text Field control-see Figure C below.

Figure A	Figure B	Figure C

Display The Selected Item in An Alert View

Now, when the user tap a row of the Table View control, we want to display it in an Alert View object, as shown in this image:

To accomplish above task, you’ll have to add this delegate method of the Table View control, in the ListViewController.m file.

 (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
  // Get the item name the user selected from the table view
  self.selectedItemName = self.tableDataSource[indexPath.row];

  // Display the selectedItem in an alert view
  UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"You Selected"
  message: self.selectedItemName
  delegate: nil
  cancelButtonTitle: @"OK"
  otherButtonTitles: nil];
  [alert show];
}

Display a Checkmark in The Table View Row

Say you wanted to display a checkmark in the sixth row of the Table View control, as shown in this image.

You’ll have to replace above method’s code with this:

//Check to see if the operator selected the sixth table cell, if so then display a check mark in it
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
if (indexPath.row == 5)
  cell.accessoryType = UITableViewCellAccessoryCheckmark;

Delete The Table View Row

If you want the operator to delete rows from the Table View control, you’ll have to add this delegate method of the Table View control in the ListViewController.m file.

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
  if (editingStyle == UITableViewCellEditingStyleDelete) {
    // Remove the selected item from the table's dataSource object
    [self.tableDataSource removeObjectAtIndex:indexPath.row];

    // Delete the cell the user tapped from Table View control and animate the deletion operation
    [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationRight];
  }
}

Run the application and click-drag your mouse to the left of the table row to display the Delete button, as shown in this image.

Now, click the Delete button to remove that item from the Table View control. Repeat above steps to delete other rows in the Table View control. Now, the next time you run the application, rows you’ve deleted from the Table View control will appear in the table again. That’s because you’ve hard coded the Table View control’s dataSource in the ListViewController’s viewDidLoad method.

This conclude the tutorial series, Using The Table View in a Storyboard.