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?
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.
Will the tab groups be hidden?
Does the application require more than three tab groups?
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.
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.
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 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.
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.
Clicking finish will then install it into studio where you can then run it in the emulator.
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.
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.
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.
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.