Enhancing your TableViews with custom rows

So far, we've created a TableView that, though totally usable and showing the names of our recipes from the XML feed, is a bit bland. To customize our table, we'll need to create and add custom TableRow objects to an array of rows, which we can then assign to our TableView object. Each of these TableRow objects is essentially a type of view, to which we can add any number of components, such as Label, ImageView, and Button.

Next up, we'll create our TableRow objects and add to each one the name of the recipe from our XML feed, the publication date, and a thumbnail image, which we'll get from the images folder in our Resources directory. If you do not have an images directory already, create one now and copy the images from the source code for this chapter.

How to do it...

Open your recipe.js file and replace the refresh function with the following code:

function refresh() {

        var data = []; //empty data array

        //declare...