Learning commonJS: Building a custom TableView using commonJS approach

The new player in the Titanium world is our commonJS module development.
As most of the Titanium developer will be aware of what commonJS module or commonJS approach for building a titanium application is.

For the who dont know exactly what commonJS is, I must recommend to go through the appcelerator wiki website. here is the link for that commonJS



In this tutorial I will be showing you that how to build a custom tableView with commonJS approach.

Here is the snapshot of our custom tableView..

So I will quickly brief you regarding what I am doing..

=> I have created a commonJS module that exports a function which creates this tableView.

=> Now that function takes an argument that has your list of images and the custom text that you want to add the tableView row.

=> The text in the bold is the name of the image. In the module I am fetching the image name from the url of that image.

=> And in the end I am also adding a button in it.

Here is the code snippet of my customTableView.js which is a commonJS module.

exports.customTableView = function(param)  
 {  
   var win = Ti.UI.createWindow();  
   var mydata = [];  
   var imageUrl= [];  
   var rowText = [];  
   imageUrl=param.imageUrl;  
   //Fetching the image name from the imageUrl  
   for(i=0; i< imageUrl.length;i++)  
   {  
     var nameInput = imageUrl[i].replace(/^.*[\\\/]/, ''); // This gives the image name with its extension,  
     // here we are removing the extension and just fetching the name  
     var name = nameInput.substr(0, nameInput.lastIndexOf('.')) || nameInput;  
     rowText[i]= name;  
   }  
   // var customText = [];  
   // customText = param.customText;  
   //Building the custom row  
   for(i=0;i< imageUrl.length; i++)  
   {  
     var cancelBtn;  
     var row;  
     if(Ti.Platform.osname !='android')  
     {  
       cancelBtn = Ti.UI.createButton({  
       image:'images/delete.png',  
       width:'32dp',  
       height:'32dp',  
       style:Titanium.UI.iPhone.SystemButtonStyle.PLAIN,  
       left : '250dp'  
       });  
       row = Ti.UI.createTableViewRow({height:'70dp', backgroundImage:'images/brown.png', backgroundRepeat:'true'});  
     }  
     else  
     {  
       cancelBtn = Ti.UI.createButton({  
       image:'images/delete.png',  
       width:'32dp',  
       height:'32dp',  
       left : '250dp'  
       });  
       row = Ti.UI.createTableViewRow({backgroundImage:'images/brown.png'});  
     }  
     var myimage = Ti.UI.createImageView({  
       backgroundImage:imageUrl[i],  
       top:'5dp',  
       width:'64dp',  
       left: '4dp',  
       height:'64dp',  
       borderColor: '#fff',  
       borderWidth:'2dp',  
       borderRadius:'7dp'  
     });  
     var rowName = Ti.UI.createLabel({  
       text: rowText[i],  
       top:'2dp',  
       color:'#fff',  
       //width:'auto',  
       font:{fontSize:16,fontWeight:'bold'},  
       left:'80dp'  
     });  
     var rowCustomText = Ti.UI.createLabel({  
       text:param.customText[i],  
       top:'30dp',  
       color:'#fff',  
       font:{fontSize:12},  
       left:'80dp'  
     });  
     row.add(myimage);  
     row.add(rowName);  
     row.add(rowCustomText);  
     row.add(cancelBtn);  
     row.className = 'myData';  
     mydata[i]=row;  
   }  
   var myTableView = Ti.UI.createTableView({  
     data:mydata,  
     allowsSelection:'true'  
   });  
   win.add(myTableView);  
   return win;  
 }  

you can download the complete working project from my github.

here is the link... commonJStableView

Feel free to edit it and update it..