Time for action – adding an info button to the navigation bar

Perform the following steps to add an info button to the navigation bar:

1. Add a new function to the top of app.js:

   function rightButton(win) {
       if (!isAndroid()) {
   
         var right = Ti.UI.createButton({
            systemButton:Ti.UI.iPhone.SystemButton.INFO_LIGHT
         });
         right.addEventListener('click',function()
         {
            alert('button clicked!');
         });
         win.setRightNavButton(right); 
      }
   }

2. Add a call to the function from the main body of app.js:

   rightButton(win1);

3. Run the App in the iOS emulator.

What just happened?

A couple of iOS-specific properties were used in the rightButton function. The systemButton property allows a predefined iOS icon to be applied to your button. There are several styles available (see documentation for Titanium.UI.iPhone.SystemButton). Then an iOS specific window method setRightNavButton was used to place this button on the right-hand side of the navigation bar.