Question

I’m new with Appcelerator and I encountered an annoying problem regarding layout.

I have to do a menu bar that is very easy to do with plain html (ul>li>a and that’s all). The problem is that it seems that all button-related functions are not… customizable. I want buttons to be displayed as plain text, not buttons.

The first thought was to use labels (instead of buttons). But… Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.

This is one (of many!) things i tried:

    var menu_color = Titanium.UI.createButton({
        title:Ti.Locale.getString("menu_color") || "Color",
        height:24,
        top:10
    });

I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.

Help? 🙂

Answer 1

I usually use views when I need to create what you described above.

For example:

I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.

This allows you to have more control over the formatting. A side effect of this is you will need to create your own “press” ui cue in some cases.

var demo = {win : Ti.UI.currentWindow};

(function(){

    //Create the container view
    demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
    demo.win.add(demo.vwMain);
    demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
    demo.vwMain.add(demo.fakebutton1);
    demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
    demo.vwMain.add(demo.fakebutton2);  

    demo.fakebutton1.addEventListener('click', function(e) {
        alert('Clicked fake button 1');
    });

    demo.fakebutton2.addEventListener('click', function(e) {
        alert('Clicked fake button 2');
    });

})();