Searching on table with titanium on crossplatfrom app.

Introduction :

Generally we use tableview to display data in different rows with table format in an application and adding search functionality on those table data is very common. So let me demonstrate the ways to search data among the table rows.

Description :

To display data in row format Titanium provides API called TableView. So lets use tableview to display data on screen and then will add search functionality.

Suppose we have a window called home where we will have our table.

//Define current window
var homeWin = Ti.UI.currentWindow;

Here we have defined home window.

//Define items
var item = [
{ itemName : 'First Item' },
{  itemName : 'Second Item' },
{  itemName : 'Third Item' },
{  itemName : 'Fourth Item' },
{  itemName : 'Fifth Item' }
];
An arraylist is defined with list of data that will be added as rows on table.

//Define row data
var tableRowData = [];

//  Defined counter
var count = 0;

//Loop to make rows
for(count = 0; count < item.length; count++){
 
      //Define row
      var row = Ti.UI.createTableViewRow({
            title : item[count].itemName,
            filter   : item[count].itemName             // Item assigned for search contents
      });
 
      tableRowData.push(row);
}

So before having table lets creates rows. On above code an array list is defined to hold the different row that will be add on table. Then used a for loop to make individual rows.
To make row Titanium provides an API called TableViewRow, where it has ‘title’ property which is generally used to display data on rows where item name is added.
Now along with title property we have filter property which gives the response on search functionality. Generally when we search anything, we actually search on the text that are assigned to filter property.

//Define search bar
var mySearchBar = Ti.UI.createSearchBar();

//Define table
var itemTable = Ti.UI.createTableView({
      width      : Ti.UI.FILL,
      height    : 200,
      top         : 0,
      search   : mySearchBar,      //Search bar added to the table
      data       : tableRowData,               //Asign row data
      filterAttribute : 'filter'               //Assigned the filter attribute for searching
});

//Table added to the window
homeWin.add(productTable);

On above code at first defined a search bar that will be used to search data on table followed by the table view to display our defined items.
To associate the search bar API with table, table view has property called ‘search’ where we assigned our search bar, where on typing on that it will filter table data as per the typed text. Then we have ‘data’ property for tableview which allows to assign all our created rows to the table and finally the ‘filterAttribute’ where we mention the property name that upon which we will search, that is mentioned while defining rows.

So now if anyone type ‘f’ on search bar it instantly display the rows having ‘f’ text. Here it will display row with text ‘First Item’.

So now we have learned how can add search functionality on table view to filter rows. But now there might be a scenario when we have item on rows and if there we have type any text that is present on item details but not on that item, at that time we can also have search functionality which can filter item and also with item details. So lets do that.

//Define item details
var itemDetails = [
{ details : I am item 1 },
{ details : I am item 2 },
{ details : I am item 3 },
{ details : I am item 4 },
{ details : I am item 5 }
];

Here we mentioned item details. Now to have search on item and item details we need to modify the filter property while creating row a little bit.

//Loop to make rows
for(count = 0; count < item.length; count++){
//Define row
var row = Ti.UI.createTableViewRow({
title : item[count].itemName,
filter : item[count].itemName +  itemDetails[count].details         // Item assigned for search contents
});
tableRowData.push(row);
}

So here on above code while assigning ‘filter’ property we have assigned item and added item details with that which will allow to search on item along with item details.

Summary : So  here we have discussed about search functionality on table data using filter attribute.

THAT’S IT

 

Table view in crossplatform 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. But today I will demonstrate you the use of table view with Alloy in Titanium.
Alloy supports the very popular pattern followed in this software industry i.e. MVC, which generally have model view and controller. Similar way in titanium we will follow the same pattern.

Description :
Using Alloy, we will have the view which will hold all the UI components that need to be displayed on screen and will have controller for this respected 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 a 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.
As it made with Alloy, so it is necessary to have all the UI tags under Alloy tag. Then we have defined the window tag which exactly the parents 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 genarally responsible to display data in row format. To prepare individual row we have used TableViewRow tag which have property called title essantial to display row text.
So all together we have make an window and then 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. So to do that there might be two ways which comes in my mind. One is adding click events with every row and second one is to add a single click event to the table. If we consider the performance or best practices second option is the best. 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 called the function ‘showRowText’. So if we click on any rows we will display the row text to user. The defination 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 like 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.

<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 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.

THAT’S IT