A Table View Based App for iPhone (Part 3)

In part 2 [link to Friends2 blog post] of this blog, we looked at using a custom table view cell in a table view. If you have been following along, this part of the blog starts with the application as we left it in part 2. You can download the part 2 app [link to Friends2 code .zip file] here, and the full source for this third part of the blog is available [link to Friends3 code .zip] here.

Load the source code for the second part of the blog by double clicking the Friends.xcodeproj file. We’ll start with deletion – deleting rows from a table view is extremely simple, but we must also remember to delete the entry from the underlying data source as well.

To enable deletion of a row, we simply enable editing of the table view by uncommenting a couple of items in the UITableViewController class definition. Open FriendsViewController.m. First, uncomment the line shown here in viewDidLoad:




This will give us an edit button in the title bar of the table view. Next, uncomment the tableView: commitEditingStyle: forRowAtIndexPath: method as shown:




Important: if you run the app now, you will be able to delete the row, but since we’ve not added any code to delete the entry in the NSDictionary, the app will get “out of synch.” and kill itself. This isn’t the desired behavior!

Since we’re managing the underlying data in the Friends class, let’s add a method to delete an entry from the dictionary to Friends.h:




and define it in Friends.m:




We make a mutable copy of the self.friendsDictionary object in order to delete the entry, then copy that back into the friendsDictionary object and delete the reference to the mutableCopy by setting it to nil.

Now we can use this method in the tableView: commitEditingStyle: forRowAtIndexPath: method in FriendsViewController.m:




We locate the proper label (the one having a tag value of 1) in the custom cell, then get its text in the name string. This string is used as the key for the dictionary object to be deleted: we pass this key to the new method deleteEntryWithKey: in the self.friends object, which removes this entry from the dictionary. Finally, we call the saveFriendsToPlist: method to save out the newly altered dictionary.

If we run the app now, we can delete the entry:

After deletion, if we re-run the application, it will show an empty table view because we’ve saved out the (now empty) dictionary. Now would be a good time to add code allowing us to add a new entry! It’s also a good idea to go into the CustomCell.xib file and scoot the labels a bit to the right, so the editing control doesn’t overwrite the text of the labels:

In order to be able to add entries, we’ll need another view controller with a view allowing us to enter a name, email, and phone number. Create a new UIViewController class and name it AddingViewController. Make it a subclass of UIViewController, and create it with a XIB file. Now open the AddingViewController.xib file and add three labels, three text fields, and a button as shown:

We’re going to push this new view controller from within FriendsViewController, but in order to do so, we’ll need to put a new bar button for adding in the title bar of FriendsViewController. Here’s the code to add in the viewDidLoad method of FriendsViewController.m:




The array rightBarButtonItems contains all button items we want to display in the title bar. The edit button is a given, we just need to define the addButtonItem. In FriendsViewController.h, we need to import the AddingViewController class and make a property:




Returning to FriendsViewController.m, we can lazily instantiate the addingViewController object (after synthesizing it) and write the definition of displayAddingViewController:




Running the app now allows us to test pushing the new view controller:

So far, so good, but if we try to add an entry, nothing happens. We’ve not done anything to AddingViewController at all!

Open AddingViewController.h and add a protocol, four properties, and two method headers as shown:




In AddingViewController.xib, change the tag values of the three text fields (from top to bottom) to 1, 2, and 3. Wire up all three of the text field’s Did End On Exit events to the textEntered: method, and wire the button’s Touch Up Inside event to the addButtonPressed: method:

Now open AddingViewController.m and make these changes:




We’ll need to adopt the AddingDelegate protocol in FriendsViewController, and implement the userDidAddFriend: email: phone: method there as well. Here’s the change to FriendsViewController.h:




That’s right, all we have to do is adopt the protocol… Now, make these changes to FriendsViewController.m. First, in initWithStyle, set the addingViewController’s delegate to self:




Then, define the userDidAddFriend: email: phone: method:




Of course, this will generate compiler errors: the Friends class has no addEntryWithKey: andValue: method. We’d better add that now. Here’s the method as it should appear in Friends.m (add the header for the method to Friends.h, too):




Save all your work and run the app. Now we can both add and delete our friends!

We promised to show how to group the table view, but this blog is getting a bit long. So we’ll extend the series to four parts. In the next part, we’ll show the technique of sorting the entries alphabetically and grouping them into sections. Stay Tuned!

Leave a Comment: