Twitter LinkedIn E-mail RSS
Home Uncategorized Titanium Custom Menu
formats

Titanium Custom Menu

Titanium Custom Menu

Author name Trevor Ward

Author email trevor.ward@softlywired.com

Author URL http://www.softlywired.com

It has become a common practice to build Titanium applications, using the built in “Tab Groups” navigation system. In some cases this is perfectly adequate, however at other times it is completely inappropriate, in these cases you may need to build a custom navigation system.

Why Use a Custom Menu?

There are many reasons why you should consider using a custom menu over a tab group. Tab groups although useful and relatively easy to use, have some flaws, you have to declare all the windows of a group at creation time, they work differently across platforms, once the window has been opened it stays open and on Android it creates separate JavaScript instances. They do however have some nice inbuilt features especially in IOS.

As I write this article I have been contacted by a new customer who has built an application using tab groups, but because they needed custom navigation, they hide the groups and use on screen navigation. Not wishing to be too critical they really shouldn’t have used tab groups.

Here are a few key questions to ask yourself before you decide to use a custom menu or tab groups:

  • Will the tab groups be hidden?
  • Does the application require more than three tab groups?
  • Is the menu navigation fluid ? (i.e. can you constantly switch between windows)
  • Does the application have more than 5 windows?
  • Does the data on the main windows need constantly updating?
  • Is the application cross platform?
  • Does the application use high memory usages items like Web Views?

If you have answered yes to most of these questions then you should be seriously considering using a custom menu.

A major advantage of using a custom menu is that you can control which windows are open at anyone time and make good use of memory management techniques, which enables the application to perform.

A Custom Menu

If you go away from tab groups, you will notice immediately that you loose their functionality, you no longer get the IOS navigation bar, or the menu bar containing the tabs. You will also loose the back button functionality etc. This is not a show stopper though, but depending on your application you may need to rebuild that functionality programmatically.

If the application uses on screen icons to control the navigation, no title bar and no menu system, then implementing a custom menu solution becomes an easy task, you only need to handle the window opening and closing and if your on Android, the hard back button flow. But if you need to have the navigation bar with a back button and a full controllable menu then the task becomes a lot more intensive.

To replace tab groups with the same sort of look and feel, you will need to build certain functionality into the application at the start of development. This includes:

  • A Navigation Bar
  • Back control
  • Window open and closing
  • The main menu
  • Defining a window content area

A quick tip, when you open a new window it is useful to close the previous window, enabling good memory management, always open the new window before closing the previous one. This prevents seeing the splash screen between windows.

To help you along the way of your first custom menu I have produced an open source example, which is available on bitbucket and is well documented. The remainder of this article explains the key points.

 

TiCustomMenu

TiCustomMenu is an open source Titanium commonJS menu system. It is available from https://bitbucket.org/softlywired/ticustommenu and is free to use or adapt as you require. The application has five windows and allows for the base color to be changed as required. It is intended to give a start in developing applications.

To install the application and get it running it is best if you have a bitbucket account. If you don’t have one, sign up its free http://bitbucket.org, follow the instructions to create your ssh key and link your computer to your account. There are various software packages to handle using a git repository, I use one called Tower, but Titanium Studio also allows you to do this without using any other software. Firstly open studio and go to the projects tab, right click and select import, a box will appear in which you select the Git Repository option.
image_01

On clicking next another box will appear into which you need to put the URL of the git repository which is git@bitbucket.org:softlywired/ticustommenu.git and select the destination directory.
image_02

Clicking finish will then install it into studio where you can then run it in the emulator.

 

image_03

You will now have all the code to investigate. The control/controller.js file is the key to the application, it controls all the program flow, opening and closing of windows and the back button handling. Within the ui/common directory you will find the commonJS modules which create the navigation bar, the main menu and screen area. The ui/windows directory contains the windows and by looking at one of these you will see how the common elements are used.

This code shows a basic window being created handling the android back button, adding the navigation bar and menu and returning the window object. This code is called from the controller and returning the window object enables the controller to handle the actual opening and closing.

// The base window //

var windowVar = Ti.UI.createWindow({

backgroundColor : uiSettings.ui.windows.backgroundColor,

navBarHidden : true,

orientationModes : [Ti.UI.PORTRAIT]

});

windowVar.orientationModes = [Ti.UI.PORTRAIT];

windowVar.addEventListener(‘android:back’, function(e{

Ti.App.fireEvent(‘APPCONTROL’, {

OPTION : settingsGlobal.value.OPTIONS.BACK

});

});

windowVar.addEventListener(‘close’, function(e{

windowVar = null;

return;

});

var navBar = require(‘/ui/common/navBar’).loadNavBar();

windowVar.add(navBar);

var tabMenu = require(‘/ui/common/tabMenu’).loadTabMenu();

windowVar.add(tabMenu);

var contentArea = require(‘/ui/common/contentArea’).loadContentArea();

var windowText = Ti.UI.createLabel({

top : 20,

left : 10,

right : 10,

height : 40,

text : Ti.Locale.getString(‘oneLabel’),

textAlign : uiSettings.ui.windows.textFont.align,

color : uiSettings.ui.windows.textFont.color,

font : {

fontSize : uiSettings.ui.windows.textFont.size,

fontWeight : uiSettings.ui.windows.textFont.weight

}

});

contentArea.add(windowText);

var selColor = require(‘/ui/common/selectColor’).loadSelectColor();

contentArea.add(selColor);

windowVar.add(contentArea);

return windowVar;

Within the controller there are various functions for handling the application flow. LoadWindowOne is called and this function requires the window module, set the back button values and then calls the function which handles opening the new window and closing the previous one.

// Some key controller function

function loadWindowOne(inParam{“use strict”;

var windowOneReq = require(‘/ui/windows/windowOne’);

setValues({

OPTION : settingsGlobal.value.OPTIONS.ONE

});

windowHandler({

newWindow : windowOneReq.loadWindowOneDisplay()

});

return;

}

function windowHandler(inParam{“use strict”;

lastWindow = currWindow;

currWindow = inParam.newWindow;

currWindow.open();

if (lastWindow) {

lastWindow.close();

lastWindow = null;

}

return;

}

function setValues(inParam{“use strict”;

if (settingsGlobal.value.BACKARRAY[settingsGlobal.value.BACKARRAY.length – 1] != inParam.OPTION) {

settingsGlobal.value.CURRENTOPTION = inParam.OPTION;

settingsGlobal.value.BACKARRAY.push(inParam.OPTION);

}

}

A key part of the custom menu is handling the back functionality. The way tiCustomMenu does this is to keep an array of function names. It doesn’t store the function just a simple text string and associated parameters. This keeps the contents of the array to a manageable size as the application is navigated.

function loadPreviousWindow(inParam{“use strict”;

var backLength = settingsGlobal.value.BACKARRAY.length;

// The only platform specific coding to handle closing the app if its android

if (Ti.Platform.Android && settingsGlobal.value.BACKARRAY.length === 1) {

var tmpWin = Ti.UI.createWindow({

navBarHidden : true,

exitOnClose : true

});

tmpWin.addEventListener(‘open’, function(e{

tmpWin.close();

});

currWindow.close();

tmpWin.open();

}

// We have a screen to go back to

else if (backLength > 1) {

var backOption = settingsGlobal.value.BACKARRAY[backLength – 2];

settingsGlobal.value.BACKARRAY.length = backLength – 2;

Ti.App.fireEvent(‘APPCONTROL’, {

OPTION : backOption

});

}

}

You should now have the application all setup and running, enabling you to go forwards an use it as a template for the required application. The code itself follows the commonJS methodology and is hopefully easy to follow and understand. I hope it is useful.

Learn more

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
Comments Off on Titanium Custom Menu  comments