Duration

15 minutes

Goals

The primary goal of this lab will be to populate the Table Views you created in the first exercise with data. We will work with both of the screens to show both of the mainstream techniques for supplying data to a Table View.

Required assets

There are some additional source and data files contained in the Exercise 2 folder as well as a completed version of the exercise if you'd like to compare your solution when you are finished. If you did not complete the first exercise, you can use the Completed project located in the Exercise 1 folder.

Challenge

You will be continuing from the prior exercise. Here are the high-level steps for this exercise. Use these to work through the lab and refer to the step-by-step instructions that follow for any additional guidance you need.

1. Add the data which will drive the application. There is an EmailServer.cs source file and a words.txt data file which need to be added to your project. Place the data file into the Resources folder.
2. The EmailServer.cs class is a simple data generator that "fakes" an email server. It has an Email property which provides an IList<EmailItem> that you will use to populate the Table View. Each EmailItem has a Subject property which we will use as the text.
3. You will implement the data source in a UITableViewSource as well as in your UITableViewController class to try out both approaches.
4. Implement the RowsInSection method to return the number of emails in the list. Code the GetCell method to create a UITableViewCell, populate the TextLabel and return the created cell.

Steps

Below are the step-by-step instructions to implement the exercise.

Add the data to the application

There are two files in the Exercise 2 folder - EmailServer.cs and words.txt which need to be added to the project.

1. Let's start with words.txt, this is just a data file with a variety of words in it used to generate email text. It needs to be placed into the Resources folder of our application. Right click on the Resources folder and select Add > Add Files.

2. Navigate to the Exercise 2 folder and select words.txt. If you are using Visual Studio for Mac, select "Copy" when prompted; Visual Studio on Windows does the correct action by default.
3. Make sure the added file has a Build Action of "Bundle Resource". In Visual Studio on Windows, check the Build Action for the file in the properties page. In Visual Studio for Mac, right-click the file (or click the gear next to it) and select Build Action from the menu.

4. Add the EmailServer.cs file to the root of the project. The build action will be "Compile" (and should be set by default).

Using the UITableViewController to populate a TableView

In this part, we will use the EmailServer and override methods in our UITableViewController to provide data for the Table View. We'll start here because it's the initial view controller, later we'll switch to our code-behind version.

1. Open the TableViewController.cs source file - this is the file we created from the designer in the first exercise. This should be the initial view controller if you did all the instructions from that first exercise. If not, make sure to set it to be the starting screen.
2. Notice that the view controller derives from UITableViewController - this will allow us to implement the data-source methods directly in this one class.
3. Add a new EmailServer field to the class. Name it emailServer. Initialize it with a new server object.
4. Next, let's implement the RowsInSection method - this is a virtual method of the UITableViewController class. It should return the number of emails available (emailServer.Email.Count).

Show Code

partial class TableViewController : UITableViewController
{
    ...

    EmailServer emailServer = new EmailServer();

    public override nint RowsInSection(UITableView tableview, nint section)
    {
       return emailServer.Email.Count;
    }
}

5. Next, implement the GetCell method - again, this is just a virtual override. You will need to perform the following steps:
   • Create a new UITableViewCell to represent the row visually. You can pass CGRect.Empty to the constructor as it will be sized automatically by the Table View.
   • Find the proper EmailItem in the Email array - use the passed NSIndex to get the correct row.
   • Populate the TextLabel.Text using the Subject from the email.
   • Return the created cell.

Show Code

public override UITableViewCell GetCell(UITableView tableView, 
                                        NSIndexPath indexPath)
{
    UITableViewCell cell = new UITableViewCell(CGRect.Empty);
    var item = emailServer.Email[indexPath.Row];

    cell.TextLabel.Text = item.Subject;
    return cell;
}

6. Run the application to see the results. If you don't see any data, make sure the proper screen is selected as the initial view controller.

Using UITableViewSource to populate a TableView

In this second part, we will use the same email list along with a custom UITableViewSource to provide data for our Table View in code behind.

1. Open the original View Controller where you created the Table View in code. In the completed lab, this is named ViewController.cs but it might have a different name in your project.
2. We need to create a new class that derives from UITableViewSource. You can place this class into its own file, or make it a nested class of the view controller where it is used - you will see this approach done quite often in sample code. Name the class "EmailServerDataSource".
3. Inside your new class, instantiate a new EmailServer and implement the RowsInSection and GetCell method just as you did earlier. In fact, you can just copy/paste the implementation into this class, just make sure to add any missing namespaces such as Foundation and CoreGraphics.

Show Code

class EmailServerDataSource : UITableViewSource
{
    EmailServer emailServer = new EmailServer();

    public override nint RowsInSection(UITableView tableview, nint section)
    {
        return emailServer.Email.Count;
    }

    public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
    {
        UITableViewCell cell = new UITableViewCell(CGRect.Empty);
        var item = emailServer.Email[indexPath.Row];

        cell.TextLabel.Text = item.Subject;
        return cell;
    }
}

4. Add a field to the View Controller to hold your data source.
5. In the ViewDidLoad override, create the data source and assign it to the TableView.Source property, as well as your field.
6. Finally, before you run the app to test it, open the Main.storyboard and change the initial view controller back to the first screen (move the arrow from the currently selected screen to the other one).
7. Run the application and verify the results, you can change the tableView.BackgroundColor to UIColor.Yellow (or some other color) just to make sure you are looking at the right screen - this color will be used to fill the empty spaces.

Summary

In this exercise, you have populated two UITableView instances with data using the two most popular methods - UITableViewController and UITableViewSource.