Go to the profile of Szabolcs Toth
Szabolcs Toth

Simple CPTableView tutorial

This is the first Cappuccino tutorial. I assume you have already read the official tutorial, so I will skip the very basic steps. One of the basic thing you’d normaly like to create a tableview to organize the information. Let’s create a very simple one.

Part 1

In the description of the CPTableView API you can read the following:

CPTableView object displays record-oriented data in a table and allows the user to edit values and resize and rearrange columns. A CPTableView requires you to either set a data source which implements numberOfRowsInTableView: and tableView:objectValueForTableColumn:row: , or alternatively to provide data through Key Value Bindings.

Step 1

Let’s define the required instance variables:

@implementation AppController : CPObject
{
    @outlet CPWindow theWindow;
    @outlet CPTableView tableView;
    CPArray nameArray @accessors;
}

Step 2

Our data source will be an array:

- (id)init
{
    if (self = [super init]);
    {
        nameArray = [[CPArray alloc]initWithObjects:”Alpha”, “Beta”, “Charlie”, “Delta”];
    }
    return self;
}

Step 3

Then we implement the two necessary methods:

- (int)numberOfRowsInTableView:(CPTableView)aTableView
{
    return [nameArray count];
}
- (id)tableView:(CPTableView)aTableView objectValueForTableColumn:(CPTableColumn)aColumn row:(CPInteger)aRowIndex
{
    return [nameArray objectAtIndex: aRowIndex];
}

Step 4

Now, let’s build the UI with Xcode/Interface Builder. Remove the current elements and add Table View instead. Be sure, that you change the Table View ‘Content mode’ to ‘Cell based’. We need only 1 column.

Step 5

Finally we have to connect the code and the interface. Important to connect the dataSource and delegate outlets too.

Step 6

When you check it in the browser you will see that our app works.

The easiest way to run a webserver locally to use the python command below:

python -m SimpleHTTPServer

Part 2

So far so good, but what if I want to add elements to our list.

Step 1

We have to add two objects from the library. One is Text Field, the second one is Push Button.

Step 2

Define the Text Field as an outlet in the Appcontroller:

@outlet CPTextField textField;

Step 3

Define the Push Button as an action.

- (@action)addItem:(id)sender
{
    [nameArray addObject: [textField stringValue]];
    [textField setStringValue:””];
    [tableView reloadData];
    CPLog(nameArray);
}

Step 4

Connect our newly added outlet and action.

Now, it works.

Part 3

If we are able to add, we would like to remove items as well. To reach this we need to modify our codes since CPArray allows only to add elements but remove.

Step 1

@implementation AppController : CPObject
{
    @outlet CPWindow theWindow;
    @outlet CPTableView tableView;
    @outlet CPTextField textField;
    CPMutableArray nameArray @accessors;
}
- (id)init
{
    self = [super init];
    if (self)
{
    nameArray = [[CPMutableArray alloc]initWithObjects:”Alpha”, “Beta”, “Charlie”, “Delta”];
}
    return self;
}

Step 2

We need to add a button.

Step 3

By selecting a row, we define the element we want to remove. If we are able to tell the row number we can easliy pick the element and delete with ‘array removeObject: object’.

Create the @action method:

- (@action)removeItem:(id)sender
{
    // selectedRow returns with -1 if no row is selected
    if ([tableView selectedRow] > -1)
    {
  
      [nameArray removeObject: [nameArray objectAtIndex: row]];
    }
    [tableView reloadData];
}

Step 5

Connect the button and the action:

Now, you can add and remove items to your list.

You can find the source code here.