How to create a header bar with buttons in Titanium JS?

Question

I'm using Titanium Alloy to build an app and I'm trying to create a header bar with buttons in it, similar to the contacts app, as pictured below:

This header has the title in the middle and buttons either site.

I've been looking everywhere for a way to do this in Titanium but I can't find anything yet. It seems that this is not in the documentation, do I need to create something completely custom?

I have tried to add a button inside a navigation view, but it doesn't work - it comes up with an error saying that you the child element of a navigation view has to be a window.

If possible, I'd like to create this using Alloy.

Answer 1

That's pretty easy view to create. The only trick is to wrap Window with NavigationWindow as it was suggested in error you mentioned. NavBar buttons are created and attached in controller. As far as I remember, you can't create them in xml file. However by using $.UI.create() method you make sure that all classes and styles will apply to them, too.

index.html:

<Alloy>
    <NavigationWindow>
        <Window title="Contacts" id="contacts">
            <SearchBar hintText="Search" />
            <TableView />
        </Window>
    </NavigationWindow>
</Alloy>

index.js:

$.contacts.leftNavButton = $.UI.create('Button', { title: 'Groups' });
$.contacts.rightNavButton = $.UI.create('Button', { systemButton: Ti.UI.iPhone.SystemButton.ADD });

$.index.open();

index.tss:

"Window": {
    backgroundColor: "white",
    layout: "vertical",
},