My Titanium essential toolbox

By | June 26, 2014

On every app I create, there are a couple of libraries that are essential for me.

The first one is the underscore library: http://underscorejs.org/

From the first time I set eyes on it, I fell in love. It’s really well crafted, and it provides a set of helpers that are really cool.

For example, let’s say I have a method that receives some attributes, but I want to create defaults, then I could easily do this:

function createCircle( params ){
    params = _.extend({
        color: 'green',
        radius: 120
    }, params);

    Ti.API.info( params.color );
}

createCircle(); // Will output 'green'
createCircle({ color: 'blue' }); //Will output 'blue'

It has dozens of more helpers that I really recommend you to check out. It makes life easier, and more importantly, it can also help prevent errors, like attempting to access a method that doesn’t exist.

The other library I always use is a wrapper that Kevin Whinnery created. I took that code and modified it to use the underscore library plus some other minor changes, which you can download here.

Now the reason I like using the wrapper, is that it allows me to create view components to which I can add methods without worrying of name clashes on future API changes.

Here is a basic example of what I mean:

function createRowHeader(){

    var self = new Component( Ti.UI.createTableViewRow({
        className:'rowHeader',
        height:Ti.UI.SIZE,
        layout:'vertical',
        selectionStyle:Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
    }));

    self.destroy = function(){
        //Add here possible removeListeners
    };

    self.title = Ti.UI.createLabel({
        width:Ti.UI.FILL,
        height:Ti.UI.SIZE,
        color:'#000',
        textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
        text:'My Title'
    });

    self.add(self.title);

    return self;

}

var titleRow = createRowHeader();

//We have to use the viewProxy since it's the actual TableViewRow() object
table.appendRow(titleRow.viewProxy);

//Change the title text of the row
titleRow.title.text = 'New Text';

By wrapping the view into Component object I’m able to add methods or other attributes. For example, on the row above we could add a method to animate the title to show or hide it:

function createRowHeader(){

    var self = new Component( Ti.UI.createTableViewRow({
        className:'rowHeader',
        height:Ti.UI.SIZE,
        layout:'vertical',
        selectionStyle:Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
    }));

    self.destroy = function(){
        //Add here possible removeListeners
    };

    self.title = Ti.UI.createLabel({
        width:Ti.UI.FILL,
        height:Ti.UI.SIZE,
        color:'#000',
        textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
        text:'My Title'
    });

    self.add(self.title);

    self.show = function(){
        self.title.animate({ opacity:1, duration: 1000 });
    };

    self.hide = function(){
        self.title.animate({ opacity:0, duration: 1000 });
    };

    return self;

}

Then later:

titleRow.show(); //or titleRow.hide();

This allows me to basically create fully functional objects wrapped around views. And as you can see from the example, it helps us encapsulate all the code within a single object, whether they are sub-views or methods that we want to make available.

This is just a small insight on my work process, soon I’ll be adding a fully working example in which I use these libraries at their fullest.