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 the http client object


        //this method will process the remote data
        xhr.onload = function() {
            var xml = this.responseXML;
            console.log(this.responseText);

            //get the item nodelist from our response xml object
            var items = xml.documentElement.getElementsByTagName("item");

            //loop each item in the xml
            for (var i = 0, j = items.length; i < j; i++) {

                //create a table row
                var row = Ti.UI.createTableViewRow({
                    hasChild: true,
                    className: 'recipe-row'
                });

                //title label
                var titleLabel = Ti.UI.createLabel({
                    text: items.item(i).getElementsByTagName("title").item(0).text,
                    font: {
                        fontSize: 14,
                        fontWeight: 'bold'
                    },
                    left: 70,
                    top: 5,
                    height: 20,
                    width: 210
                });
                row.add(titleLabel);

                //pubDate label
                var pubDateLabel = Ti.UI.createLabel({
                    text: items.item(i).getElementsByTagName("pubDate").item(0).text,
                    font: {
                        fontSize: 10,
                        fontWeight: 'normal'
                    },
                    left: 70,
                    top: 25,
                    height: 40,
                    width: 200
                });

                if (pubDateLabel.text == '') {
                    pubDateLabel.text = 'No description is available.';
                }
                row.add(pubDateLabel);

                //add our little icon to the left of the row
                var iconImage = Ti.UI.createImageView({
                    image: 'food_icon.png',
                    width: 50,
                    height: 50,
                    left: 10,
                    top: 10
                });
                row.add(iconImage);

                //add the table row to our data[] object
                data.push(row);
            }

            //finally, set the data property of the tableView to our
            //data[] object
            tblRecipes.data = data;

        };

        //open up the recipes xml feed
        xhr.open('GET', 'http://rss.allrecipes.com/daily.aspx?hubID=79');

        //finally, execute the call to the remote feed
        xhr.send();

    }

How it works...

One thing that should be immediately obvious is that a TableRow object can contain any number of components, which you can define and add in the standard way. This is just as we did in Chapter 1, Building Apps Using Native UI Components, adding elements to views.

The className property is an important one when it comes to the performance of TableViews on Android and Blackberry devices. If you have multiple rows that have the same layout, use className to identify them as the same type. This will improve the performance of your app. If you have two different row layouts (perhaps one with an image and one without), then use two different className values. Launch your app in the simulator to see the final TableView populated with recipes, as shown in the following screenshot: