Segmented Buttons in Appcelerator Titanum

toolbar.js

/*
 You may download the images for this sample here:
 http://dl.dropbox.com/u/16441391/SegmentedButtonImages.zip
*/

var toolbar = Ti.UI.createView({
    bottom: 0, height: 45, width: 310,
    backgroundImage: 'images/grey.png'
});
toolbar.add(Ti.UI.createLabel({
    text: 'Show Me:', textAlign: 'left',
    font: { fontSize: 10 }, width: 60, height: 45, left: 10
}));

var modes = [
    { t: 'First Title', w: 100, l: 70, a: true, q: 'some data' },
    { t: 'Second', w: 80, l: 170, a: false, q: 'more data' },
    { t: 'Third', w: 60, l: 250, a: false, q: 'other data' }
];
for (var m = 0; m < modes.length; m++) {
    var isFirst = m == 0;
    var isLast = m == modes.length - 1;
    var label = Ti.UI.createLabel({
        query: modes[m].q, isActive: modes[m].a, textAlign: 'center',
        text: modes[m].t, width: modes[m].w, top: 7, height: 30, left: modes[m].l,
        font: { fontWeight: 'bold', fontSize: 14 },
        backgroundLeftCap: isFirst || isLast ? 7 : 1
    });
    toolbar.add(label);
    modes[m] = label;
}

function applyActiveToUI() {
    for (var m = 0; m < modes.length; m++) {
        var isFirst = m == 0;
        var isLast = m == modes.length - 1;
        if (modes[m].isActive) {
            modes[m].color = '#fff';
            modes[m].shadowColor = '#000';
            modes[m].shadowOffset = { x: 0, y: -1 };
            modes[m].backgroundImage = 'images/segmented/'
                + (isFirst ? 'roundedLeft' : (isLast ? 'roundedRight' : 'center')) + '-on.png';
        }
        else {
            modes[m].color = '#000';
            modes[m].shadowColor = '#fff';
            modes[m].shadowOffset = { x: 0, y: 1 };
            modes[m].backgroundImage = 'images/segmented/'
                + (isFirst ? 'roundedLeft' : (isLast ? 'roundedRight' : 'center')) + '.png';

        }
    }
}

applyActiveToUI();

toolbar.addEventListener('click', function(evt) {
    if (evt.source.query) {
        for (var m in modes) {
            modes[m].isActive = false;
        }
        evt.source.isActive = true;
        applyActiveToUI();
        alert(evt.source.query);
    }
});