Tableview in Cross-Platform App using Alloy in Titanium

Introduction :
Its a very common functionality or requirement to display data in rows format. In order to do so Titanium provides API like ‘TableView’ which can be used to make table format with different rows. Below is a description on how to use the table view with Alloy in Titanium. Alloy supports the most popular design pattern i.e. MVC, which generally have model, view and controller structures. We will follow the same pattern in Titanium.

Description :
Using Alloy, we will have a view which will hold all the UI components to be displayed on screen and will have a controller for this corresponding view. Currently we will not go for building any model as we don’t need it.

So lets prepare a view to explain the table view and it properties.

index.xml
<Alloy>
<Window backgroundColor=’white’>
<TableView>
<TableViewRow title=”Row 1″/>
<TableViewRow title=”Row 2″/>
<TableViewRow title=”Row 3″/>
.
.
.
.
.
<TableViewRow title=”Row n”/>
</TableView>
</Window>
</Alloy>

On above code we have created a xml file named as ‘index.xml’ which is treated as a view and it will also be the landing page of any application made with Alloy.
Since we are following the Alloy pattern, it is necessary to have all the UI tags under the Alloy tag. Then we have defined the window tag which is exactly a parent to all UI elements and defined the background color of that as white, by assigning the backgroundColor property of window tag.

To view data on that window, we have defined a tag called TableView, which is generally responsible to display data in row format. To prepare individual row we have used TableViewRow tag which have a property called title essential to display row text.

So as a summary of the above code, we have created a window, added a table view to that and assigned different rows to that table using TableViewRow tag.
Now, it might be the scenario when user needs to click on the row and as per the selected row we need to do some action.

In order to perform the same, there might be two ways coming to mind, as follows

1)      Adding click event to each row.
OR
2)      Adding a single click event to the table.

If we consider the app performance as well as the best practices of writing an app, then the second option is the best one. So here we will follow the best one.
To add click event we need to modify the above view slightly.

<Alloy>
<Window backgroundColor=’white’>
<TableView onClick=’showRowText’>
<TableViewRow title=”Row 1″/>
<TableViewRow title=”Row 2″/>
<TableViewRow title=”Row 3″/>
.
.
.
.
.
<TableViewRow title=”Row n”/>
</TableView>
</Window>
</Alloy>

So here we have added an onClick event which will call the function ‘showRowText’. So if we click on any row we will display the row text to user. The definition need to be defined on the controller associated with the same view.

index.js

function showRowText(rowEvent){
// Define a variable to hold row text
var rowText = rowEvent.rowData.title;
alert(‘You have clicked on ‘ + rowText);

}

The above function will get the row text and will display the same on alert message.

Now if we want to make different sections for rows. For example, we will have sections for birds where we will have all the birds name and section of animal containing all animals.

So let change the view a bit.

<TableView>

<TableViewSection headerTitle=”Animal”>
<TableViewRow title=”Tiger”/>
<TableViewRow title=”Lion”/>
<TableViewRow title=”Elephant”/>
<TableViewRow title=”Fox”/>
<TableViewRow title=”Zebra”/>
<TableViewRow title=”Cow”/>
<TableViewRow title=”Buffalo”/>

.
.
.
.
.

</TableViewSection>
<TableViewSection headerTitle=”Bird”>
<TableViewRow title=”Peacock”/>
<TableViewRow title=”Parrot”/>

.
.
.
.
.

</TableViewSection>
</TableView>

On above code we have defined table section to have the section name and then defined all rows associated with that section.

Summary:
So here we have seen, how efficiently we can use TableView as per our requirement. So on next blog I will describe more about TableView and its different property.

Written ByRaju Mahato, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s