Using the UITableViewDataSource class

In this article I will explain you how to use the UITableViewDataSource class. This class you will use when integrating a Table View into your iPhone application. The Table View is one of the most used objects.
If you own or used an iPhone, you've probably seen it multiple times when looking at your notes or contacts.

We will first start with creating a new iPhone project in MonoTouch.

As you can see, I choose the iPhone MonoTouch project and I also gave it a name (iDemo).

Double click the xib file. This is the file which holds the user interface. This will start the 'Interface Builder' which is part of Apple's iPhone development environment. It's comparable with the Visual Studio interface builder in this way that you can drag and drop controls to the window and link outlets to them. MonoTouch will pick up these outlets so you can access the objects in your code. More about that in a minute.

In the empty window, I dragged a Table View. You will end up with the view above.

Now it's time to create an outlet and link it to this table view. In the following screenshot you can see where you can create a new outlet.

On the right, go to 'classes -> other classes -> AppDelegate' and then below you can select outlets. Create a new one with a good describing name as you will have a lot of these when building bigger solutions.

You now have to hook this outlet to the table view itself. Select the MainWindow.xib window like shown below. Select 'AppDelegate' and on the left in the other window, select the outlets tab which has the arrow icon.

Now you must drag the outlet you just made to the table view in the window. A blue line will make the connection.

Save this user interface. If all goes well, MonoTouch will pick up the changes you made. In particular, the outlet and its connection with the table view.

Go back to your code. We will create a new class which will inherit from the UITableViewDataSource class. Create a new empty class file called TableDatasource. First of all, don't forget to add a new using statement 'using MonoTouch.UIKit'.
Then let the class inherit from UITableViewDataSource. This will allow us to override some necessary functions which will help us to get this table view to work.

When you are used to program in .NET, this way of working with lists might not be what you are used to. In short what we will do in the coming minutes, is to create a class which will give back the size of the dataset we want to appear in the table view and override a function which will create a particular cell and return it to the table which will place it in the correct place.

First of all create a new ArrayList variable. In the constructor fill it up with some data. For example:


data = new ArrayList();
data.Add("Data1");
data.Add("Data2");
data.Add("Data3");

Then we will override the RowsInSection function. This function will return the size of the list in the current section. This actually means you can make a two dimensional datasource but for now we will just use a one level list.


public override int RowsInSection (UITableView tableview, int section)
{
return data.Count;
}

This override will simply return the length of our arraylist with data.

Next we will override the GetCell cell. This function will create a new cell, fill it up with the correct data and return it.


public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
{

UITableViewCell cell = new UITableViewCell();
cell.TextLabel.Text = data[indexPath.Row].ToString();

return cell;

}

This function creates a new cell, gets the correct data from our arraylist using the indexPath variable and then return the newly created cell.

To test your application, set the environment to Debug/iPhoneSimulator and run the application. If all goes well, it will compile and run the application in the simulator. As you can see, the data will be loaded into the table.

This concludes this tutorial. Keep in mind that this table view is used in a lot of the solutions you might want to build. This example showed you how to use it but of course you can go as far as you want with this. Also try to take a look at the other overrides to make use of all the options that are offered to you.