Displaying data using a TableView

TableViews are one of the most commonly used components in Titanium. Almost all of the native apps on your device utilize tables in some shape or form. They are used to display large lists of data in an effective manner, allowing for scrolling lists that can be customized visually, searched through, or drilled down to expose child views. Titanium makes it easy to implement TableViews in your application, so in this recipe, we'll implement a TableView and use our XML data feed from the previous recipe to populate it with a list of recipes.

How to do it...

Once we have connected our app to a data feed and we're retrieving XML data via the XHR object, we need to be able to manipulate that data and display it in a TableView component. Firstly, we will need to create an array object called data at the top of our refresh function in the recipes.js file; this array will hold all of the information for our TableView in a global context. Next, we need to disseminate the XML, read in the required elements, and populate our data array object, before we finally create a TableView and set the data to be our data array. Replace the refresh function with the following code:

function refresh() {

        var data = []; //empty data array

        //declare the http client object
        var xhr = Ti.Network.createHTTPClient();

        //create the table view
        var tblRecipes = Ti.UI.createTableView();
        win.add(tblRecipes);

        //this method will process the remote data
        xhr.onload = function() {

            var xml = this.responseXML;
            //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; i < items.length; i++) {

                //create a table row
                var row = Ti.UI.createTableViewRow({
                    title: items.item(i).getElementsByTagName("title").item(0).text
                });

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

            } //end for loop

            //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();

    }

Tip

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

The following screenshot shows the TableView with the titles of our recipes from the XML feed:

How it works...

The first thing you'll notice is that we are taking the response data, extracting all the elements that match the name item, and assigning it to items. This gives us an array that we can use to loop through and assign each individual item to the data array object that we created earlier.

From there, we create our TableView by implementing the Ti.UI.createTableView() function. You should notice almost immediately that many of our regular properties are also used by tables, including width, height, and positioning. In this case, we did not specify these values, which means that by default, the TableView will occupy the screen. A TableView has an extra, and important, property: data. The data property accepts an array of data, the values of which can either be used dynamically (as we have done here with the title property) or be assigned to the subcomponent children of a TableRow. As you begin to build more complex applications, you'll fully understand just how flexible table-based layouts can be.