Last listened to The Getaway by Immortal Technique (on 10 Mar 2010, 14:39)

Selecting a contact from the Address Book with MonoTouch

This screencast shows how to programmatically select a contact from the address book in a MonoTouch iPhone application, in only 5 minutes.

The key bit of code is to create an ABPeoplePickerNavigationController, and then take advantage of its SelectPerson event. The brief idea is shown in this code snippet:

var picker = new ABPeoplePickerNavigationController();

picker.SelectPerson +=
    delegate(object sender, ABPeoplePickerSelectPersonEventArgs e) {
        ABPerson selectedPerson = e.Person;
        // do something with 'selectedPerson'
};

Hope you found this screencast helpful.

Deleting cells from a UITableView with MonoTouch

This screencast shows the end-to-end process of how to create a simple iPhone application with MonoTouch. The application displays data in a table, and gives the user the ability to delete cells from the table.

The application consists of a UINavigationController, a UITableViewController and of course some UITableViewCells which can be deleted from their containing table.

Some things I mention in the screencast are:

  • Just like in my UINavigationController RSS example, I am using a template for UITableViewControllers which is based on the one I found at Code Snack.
  • Swipe to delete is enabled simply by overriding the CommitEditingStyle method in your UITableViewDataSource class.

The key bit of code from this example is the CommitEditingStyle method:

class DataSource : UITableViewDataSource
{
    EmployeesTableViewController tvc;

    // ...    

    public override void CommitEditingStyle(UITableView tableView,
                                            UITableViewCellEditingStyle editingStyle,
                                            NSIndexPath indexPath)
    {
        if (editingStyle == UITableViewCellEditingStyle.Delete)
        {
            tvc.Employees.RemoveAt(indexPath.Row);
            tableView.DeleteRows(new [] { indexPath }, UITableViewRowAnimation.Fade);
        }
    }
    // ...

MonoTouch code snippet - Application Icon Badge Number

Another MonoTouch code snippet: how to set the "new items" number on your iPhone apps badge:

UIApplication.SharedApplication.ApplicationIconBadgeNumber = 11;

That will give you this result:

MonoTouch code snippet - Network Activity Indicator

The network activity indicator is in the status bar at the very top of the screen on an iPhone. You can see it just to the left of the time in this screenshot:

Network Activity Indicator in an iPhone app

In Objective-C, you can control when this is shown or not by this code:

// Show
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
// Hide
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;

With MonoTouch and C# the code is almost identical:

// Show
UIApplication.SharedApplication.NetworkActivityIndicatorVisible = true;

// Hide
UIApplication.SharedApplication.NetworkActivityIndicatorVisible = false;

This is the second part of a two-part tutorial showing you how to create a simple RSS Reader application for the iPhone using C# and MonoTouch. The application will use a UINavigationController to navigate back and forth between a news list (in a UITableView) and a second view showing more details about the news article that the user selects.

In this part of the tutorial we are going to finish this app by doing the following:

  • Create a second view, which will display more information about the news article.
  • Navigate forward to that view when the user selects an item

The first thing we need to do is to create a new view. We want to show this view when the user selects a news story from the list, where we will show more information about that news story. Click File -> New File and select the "View Interface Definition with Controller" option. Name the view "DetailsViewController":

Double-click the .xib file and go into Interface Builder. Drag a UILabel onto the view, at the top. This will be for the headline, so make the font bold, a bit bigger, and allow the number of lines to be 2 or 3 (the default is 1). Then drag a UITextView onto the view, below the UILabel you just created.

Next, we need to create two outlets for these UI components we just created - it will be these outlets that we can work with in the C# code. This is done in the same way as the outlet for the UINavigationController was created in the first part of this tutorial. I have named the UILabel "headlineLabel" and the UITextView "contentTextView". When you are finished it should look like this (note, you can see the outlets are connected correctly to the UI components in the "outlets" section, at the top-right of this picture):

Save and quit Interface Builder, we are finished with it for this tutorial.

We are not quite finished with MyDetailsViewController. Open up the MyDetailsViewController.xib.cs file. We want to load this view from the XIB file when the constructor is called. We can do this by calling a base constructor, passing in the XIB file name:

public DetailsViewController() : base("DetailsViewController", null)
{
    Initialize();
}

We also want to have a public instance property of a NewsArticle in this MyDetailsViewController class, and bind the NewsArticle to the labels we created. The actual binding occurs in the ViewWillLoad method. This event gets raised just before the view loads, as the name suggests.

public NewsArticle CurrentNewsArticle;

public override void ViewWillAppear(bool animated)
{
    base.ViewWillAppear(animated);
    BindItem();
}

private void BindItem()
{
    headlineLabel.Text = CurrentNewsArticle.Headline;
    contentTextView.Text = CurrentNewsArticle.Content;
}

In the MyTableViewController.cs file, there is a class named TableDelegate which has a method called RowSelected. As the name of the method describes, this method gets called each time a row is selected in our table. At the moment we are just calling Console.WriteLine here, but instead, now we want to create an instance of our DetailsViewController and display it.

DetailsViewController detailsViewController;

public override void RowSelected (UITableView tableView, NSIndexPath indexPath)
{
    if (detailsViewController == null)
        detailsViewController = new DetailsViewController();
				
    NewsArticle newsArticle = tvc.NewsArticles.ElementAt(indexPath.Row);
    detailsViewController.CurrentNewsArticle = newsArticle;

    tvc.NavigationController.PushViewController(detailsViewController, true);
}

Notice that I declare the detailsViewController variable on the class itself, this way I only actually instantiate it once and can reuse it each time a use clicks on a row - which will aid performance.

I fetch the NewsArticle object from the list at the row that the user clicked, then set the NewsArticle property we created earlier.

The interesting line of code is the last one: it is PushViewController that actually navigates us forward to a new view. Notice that the second parameter "true" is saying that we want this navigation process to be animated.

Once this is done we are almost there. There are only two more things that are missing: the first table view has the title "item" because we never bothered to change it when we created the table view. We can set the title in the constructor of the MyTableViewController class like this:

public MyTableViewController (IntPtr p) : base (p)
{
Title = "Tottenham News";
}

We also want the standard arrow to the right of the cell, so it looks like it is clickable. We can do this directly below the line of code where we create the UITableViewCell:

cell.Accessory = UITableViewCellAccessory.DisclosureIndicator;

Finally we are ready to build and run this application. The end result is shown below:

RSS Reader - Final result

I hope you found this tutorial helpful. Any questions or feedback are appreciated in the comments.