How to create a linked table in Appcelerator

The way our technology moves is like seeing a shooting star, it changes so quickly and suddenly that it can be hard to keep up with the trends. As of lately, the hottest thing in development is in the mobile world, apps. Apps are the dominant and clear marketplace of choice for any C++ developer. Except, what if you aren't a C++ developer? Well, there some really great tools out there that can help you create and compile apps for mobile devices. There is one, in my opinion, that outshines and out performs the rest. I am talking about Titanium Appcelerator.

Titanium Appcelerator is a great tool that can easily develop native iPhone and Android functions for your mobile app.  The best part is you can write it all in a familiar code, javaScript.  The Appcelerator API allows you to create these native functions using javaScript, it then compiles it into native format code.  Let's make a linked table in Appcelerator.

1. Set Up Your Project

First, open up Titanium Developer and click New Project.  Set up your project type to be mobile, choose your name, and fill out the rest of the information to set up your project.  This will create your project in the directory that you decided.  Go to this folder and open up the Resources folder.  This is the folder that contains all your main files to create your windows.

2. Create Table Data

Your main file that your windows initially hang off of is app.js.  Open up this file in your favorite editor.  We will create a table on our first window and tab.  Go to around line 30 and add the following code to your file.

// create table view data object
var Regdata = [
    {leftImage: '../images/joomla.ico',title:'jQuery',color:'black', hasChild:true,link: '', header:'Web Technologies'},
    {leftImage: '../images/joomla.ico',title:'CSS',color:'black', hasChild:true,link: '../technologies/css.js'},
    {leftImage: '../images/joomla.ico',title:'Joomla',color:'black', hasChild:true,link: '../technologies/joomla.js'},
    {leftImage: '../images/drupal.png',title:'Drupal',color:'black', hasChild:true,link: '../technologies/drupal.js'},
    {leftImage: '../images/wordpress.png',title:'Wordpress',color:'black', hasChild:true,link: '../technologies/wordpress.js'}
    ];

This creates the data that will be displayed in our table.  Lets break it down so as to better understand what these properties do.

• leftImage - this is used to display an image on the left hand side of our table row.
• title - this is the text that is displayed in our table row.
• color - this defines the color of our text, it can be displayed either as "#000" or "black"
• hasChild - this places an arrow on the right hand side of our table row to indicate another window.
• header - This displays a header to the rows that follow.
• link - this is the url of the file that we would like our table row to go to. You can use relative url's to point to other javaScript files. ex. "../people/ashtonKutcher.js"

3. Create Table View

Next we need to create the view that will wrap our data into the table format. 

// create table view
var tableview = Titanium.UI.createTableView({
    data:Regdata,
    filterAttribute:'title',
    separatorColor: '#999'
    });

Our variable tableview is using the data property to get our data by calling the data variable name Regdata. The filterAttribute tells, when searching, what row to filter by. 

• data - gets the variable of our data.
• filterAttribute - tells what row is searchable.
• separatorColor - this is the color of border of each table row

4. Add the Event Listener

This is where we get to add the actual action to our table. Up until this point we have the look, fit, feel of our table but nothing happens when you tap them.  What we need to add is an event listener that can detect when a table row is clicked and then open up a new window for us. This is where our link attribute will come in handy. We are going to add a listener that says when a table row is clicked, if it has a link property then create a new window to that link. The code is fairly straight forward.

// create table view event listener
tableview.addEventListener('click', function(e){
    if (e.rowData.link){
        newWindow = Titanium.UI.createWindow({
            url:e.rowData.link
            });
        }
    Titanium.UI.currentTab.open(newWindow);
});

Lets interpret this so we can better understand how it works.  First, we say when a row is clicked, check to see if it has the link property. Our e.rowData tells it to look in the row and when we add .link it knows which property to look at. If it has a the link property then we want our app to create a new window and we want it to use the url that we specified in the link property. The final touch is opening the window in our tab, which simply opens it up in our app.

5. Add the Table to our Window

The last thing we need to add is our table to the window. Without this we would not be able to see any of the code we created above.  This is how we can tie it all together.

// add table view to the window
win1.add(tableview);

So we should now have a working table that has links to all the rest of our files. 

6. All the Code Added to app.js

// create table view data object
var Regdata = [
    {leftImage: '../images/joomla.ico',title:'jQuery',color:'black', hasChild:true,link: '', header:'Web Technologies'},
    {leftImage: '../images/joomla.ico',title:'CSS',color:'black', hasChild:true,link: '../technologies/css.js'},
    {leftImage: '../images/joomla.ico',title:'Joomla',color:'black', hasChild:true,link: '../technologies/joomla.js'},
    {leftImage: '../images/drupal.png',title:'Drupal',color:'black', hasChild:true,link: '../technologies/drupal.js'},
    {leftImage: '../images/wordpress.png',title:'Wordpress',color:'black', hasChild:true,link: '../technologies/wordpress.js'}
];

// create table view
var tableview = Titanium.UI.createTableView({
    data:Regdata,
    filterAttribute:'title',
    separatorColor: '#999'
    });
    
// create table view event listener
tableview.addEventListener('click', function(e){
    if (e.rowData.link){
        newWindow = Titanium.UI.createWindow({
        url:e.rowData.link
        });
    }
    Titanium.UI.currentTab.open(newWindow);
});

// add table view to the window
win1.add(tableview);

On an Android your table should look something like this:

You can also download the project files below and import them into Appcelerator. ↓

Note:This app has only been tested on an Android device.