oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button Programming With Cocoa

Working with Tables: Writing an Address Book Application


One of the most common means of displaying and organizing data in an interface is with a table. We see this in spreadsheets, checkbook registers, train timetables, address books, and even the Finder. Tables are, after all, one of the most versatile and efficient ways to display collections of data. In this column, we will build a simple address book application centered on a table so that we can learn how to implement tables using Cocoa.

The Cocoa class that provides us with table functionality is NSTableView. NSTableView takes care of everything needed for a table such as managing table columns, drawing the table, retrieving data from data sources, displaying that data as the table contents, and much more. Putting together a table is relatively simple, although by no means obvious to the beginning Cocoa developer -- there are quite a few pieces to fit together. I spent the better part of a weekend last winter pulling out my hair when I first was trying to figure out how this all worked.

This column is a long one, so get comfortable. We're going to build this application using an interface to code and build. We'll first build and layout our GUI, then we'll create an appropriate controller class, and then wire the interface to the controller object. While in Interface Builder, we will also spend a bit of time setting up and configuring our table. Then we will go back to Project Builder and lay down the essential code needed to make this application run.

Building the interface

Before we start the interface, we need to first create a new project. So fire up Project Builder and create one. The project type will be a Cocoa Application (not document-based, mind you), and we will name this project "AddressBook". With a new project in hand, double-click MainMenu.nib under the Resources group to open the AddressBook interface in Interface Builder.

The GUI for our application consists of the following elements:

  • Four input text fields
  • Four "Message Text" text fields
  • Three standard buttons
  • One table view

Table views are found in the "Cocoa Tabulation Views" palette. This palette contains four different interface components: a browser view, a outline view, a tabbed view, and a table view. The table view is shown highlighted in the upper right of the figure below.

The NSTableView object is shown highlighted in the Cocoa Tabulation Views palette.

To use it, simply drag it from the palette onto the interface. Go ahead and drag the other components listed above onto the window. Name the Message Text fields "First Name", "Last Name", "Email", and "Home Phone", and name the three buttons "Add", "Insert", "Delete". In the image below you can see how I've set up my interface for this application (for now, don't worry about the column header names in the table view; we'll get to that soon enough).

This is how I set up my interface. You can rearrange yours in whatever way suits your fancy (just make sure you get all of the connections right later on).

The next step is to create a controller object. Remember that we do this by going to the Classes pane of nib file window and subclassing NSObject. (You can easily subclass by pressing return with NSObject selected). Name your controller object "Controller". Our application interface requires the five outlets listed below:

  • emailField
  • firstNameField
  • homePhoneField
  • lastNameField
  • tableView

and these three actions, one for each button:

  • addRecord:
  • deleteRecord:
  • insertRecord:

Comment on this articleMike covered a lot of territory in this tutorial on using tables and writing an address book app. What are the larger issues at play here?
Post your comments

Also in Programming With Cocoa:

Understanding the NSTableView Class

Inside StYNCies, Part 2

Inside StYNCies

Add these actions and outlets to Controller. Now instantiate Controller by selecting it in the Classes list and choosing "Instantiate" from the Classes menu.

With our new instance of Controller, we're ready to make the connections between Controller's outlets and actions and our interface. Recall that we wire connections by "control-dragging" from one object to another in the direction that messages would flow between the two. Wiring a table view is no different than wiring any other object. Go ahead and wire things up at this point, and save your work when you finish.

Once we've made all of the necessary connections between the Controller and our interface objects go back to the Classes tab, choose the Controller class, and select from the Classes menu "Create Files" to add the interface and implementation files for the Controller class to our project.

With that our interface is nearly finished. The last thing we need to do is configure and tweak our table view to fit our application.

Pages: 1, 2, 3, 4

Next Pagearrow