Sometimes the best way to learn is to do the work. When you reach the end of these tutorials you will have a working shipment tracking application for iOS.

Create TableView

Normally I draw a sketch of my app before I start coding. Its sound advice! But I thought we might take advantage of storyboards to see what all the fuss is about. That is actually part of the idea of storyboards. So let’s take a look.

Create an app called TRShipmentTracker and make it a Single View Application with Storyboards & ARC.

Add a TableView from the Object Library into the presented view controller scene like this. (Figure A)

Figure A

Okay now I’m going to trick you for a bit.

But it’s important because it’s a good way to understand something. Now let’s quickly add some sample code to fill our tableview. In your viewDidLoad method (vDL), of your ViewController Class, add this line.

NSArray *tempArray = [[NSArray alloc] initWithObjects:@"one",@"two", @"three", nil];
Add this block atop your ViewController.m which simply declares a private ivar.
@interface ViewController () {
 NSArray *tempArray;
}
@end

And now let’s add the tableview methods that make it all work. First add the sections and rows methods.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
 return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
 return [tempArray count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CellIdentifier"];
 if (cell == nil) {
 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"CellIdentifier"];
 }
 cell.textLabel.text = [tempArray objectAtIndex:indexPath.row];
 return cell;
}

Now change your ViewController Subclass type from UIViewController to UITableViewController.

Great! You added a tableview, change the view controller to be of type UITableViewController which requires some methods to tell the tableview how to work. You added the methods that give the tableview controller all the info needed to fill in the tableview. Now run the app and watch it crash before your very eyes.

The console reads like this:

[UITableViewController loadView] loaded the "2-view-3" nib but didn't get a UITableView.'

And the screen looked like Figure B.

Figure B

If you read carefully, XCode is telling you that UITableViewController called its method loadView, it loaded the nib (or Storyboard scene) but didn’t get a tableview back. If you go back to the first image where we dragged in the tableview, you will notice there are four panels, from left to right.

  1. Project Navigator (where your project files are displayed)
  2. A new Storyboard Hierarchy panel
  3. The storyboard panel
  4. The Inspector panel

If you notice in the hierarchy panel, you will notice there is a view inside the ViewController object. And buried inside that view is our tableview. That’s because we started out with a SingleView Application template. That created a view and a ViewController for that view. Let’s first drag our tableview out from inside the view and drop it into our ViewController object so that it looks like Figure C.

Figure C

Now your app should run just fine and you should see the cells in your tableview filled in with the values from the array.

Cool! So we have a tableview with cells populated with data. What we want is an app that allows us to add data from individual shipments we wish to keep track of. So now we will want to modify some things in our storyboard. Right now it looks like Figure D.

Figure D

So we want to be able to read our current shipments that we have saved and we also want to be able to add new shipments. We need the following functionality.

  1. Add new shipments via a button on a navigation bar.
  2. A data model that reads data from disk and parses it so it can be displayed in the tableview.

Let’s tackle the first one since its easiest and more fun. In storyboard, select the tableviewcontroller so that it has a blue rectangle around it and go to the Editor menu and select Embed in Navigation Controller. Whoa! Magic! Your storyboard should look like Figure E.

Figure E

Take a closer look. You have your tableview controller embedded in a Navigation Controller and that gives your tableview controller a navigation bar up at the top. This is because when you navigate from one level to another, the navigation bar holds navigation controls to be able to move around. At the same time that gives us a handy place to put a control such as an “Add Shipment” button.

Run your app to get some self-satisfaction.

In Part 2 of this tutorial we will work on our data model for our shipment tracker app.

Also read: