When running on Android, the Slideout menu uses a popular native module called Ti.Draggable. This module enables the user to easily slide back the menu cover.

To install this module, you can easily copy the modules directory from the recipe's source, or download the Ti.Draggable project from https://github.com/pec1985/TiDraggable. Once you have the unzipped module, you will want to copy the contents into your project's modules folder, as highlighted in the following screenshot:

After you have copied the files into the modules directory, you will need to add the module to your project. This is easily done in Titanium Studio by clicking on the tiapp.xml file. Once the project configuration screen has loaded, click on the green plus button (shown circled in the following screenshot).

You will then be presented with a list of all the modules you have installed. Select the ti.draggable [android] module, as shown circled in the following screenshot. After selecting this module, click on OK to add the reference module to your project.

Once you have added the module, make sure you save your project before running it. After saving, you will need to clean your project. You do this by selecting Clean… under the Project toolbar option in Titanium Studio, as demonstrated in the following screenshot:

Adding the Slideout Menu module to your project is easy. Simply copy the SlideOutMenu folder into the Resources folder of your Titanium project, as shown in the following screenshot. This will install the CommonJS module and all supporting images.

For this sample, we have created a CommonJS module that works as a view factory. In your app, these views would be the content you wish to have displayed on the screen.

my.sampleView = require('sample_views'),

The following snippet builds a views object that contains our placeholder views created by the sample view factory.

my.views = {
  home : my.sampleView.placeholderView({
    title:'Home',backgroundColor:'blue'}),
  inbox : my.sampleView.placeholderView({
    title:'Home',backgroundColor:'green'}),
  sales : my.sampleView.placeholderView({
    title:'Home',backgroundColor:'yellow'}),
  customers : my.sampleView.placeholderView({
    title:'Home',backgroundColor:'blue'}),
  about : my.sampleView.placeholderView({
    title:'About',backgroundColor:'purple'})	
};

The next step in our recipe is to define our menu items. When open, the menu will display an array of menu items, as shown by menuData in the following snippet.

Each menu item can contain the following properties:

To open the sample window, you first need to call the addMenuItems function and provide the menuData array that we created earlier. This will create the menu objects within the module. Next, you need to pipe the result of the addMenuItems function into the open method. This will open your main application window and display the first view in your menu.

my.menu.addMenuItems(menuData).open();

The Slideout menu provides listeners for buttonclick, switch, open, close, and sliding. The following details each of these events as used in the sample.

Our example app also uses the following custom application level events. These events are fired by our sample views to close and toggle the menu.

Ti.App.addEventListener('app:toggle_menu',function(e){
  Ti.API.info('App Listener called to toggle menu'),
  my.menu.toggle();
});
Ti.App.addEventListener('app:close_menu',function(e){
  Ti.API.info('App Listener called to close menu'),
  my.menu.hide();
});

The next snippet demonstrates how to use the addMenuItems helper function to create a menu using a list of menu items. See this recipe's How to do it… section for an example.

my.menu.addMenuItems(menuData);

The following line demonstrates how to open the menu container and display the first menu item. See this recipe's How to do it… section for an example.

my.menu.open();

The following line demonstrates how to fully display the menu:

my.menu.expose();

When designing your navigator, you will want to implement a button to allow your users to open and close the menu. The toggle method, shown in the following snippet, performs this operation for you:

my.menu.toggle();

The following line demonstrates how you can hide the menu:

my.menu.hide();

You can use the following line to determine if the menu is now fully in view:

Ti.API.info("Menu is open " + my.menu.isOpen());

You will often need to access the currently displayed view to perform input validation or other operations. The following line demonstrates how you can easily access the current view:

var current = my.menu.currentView();

The following line demonstrates how to close the menu container and all associated display views:

my.menu.dispose();

Each of our sample views can fire two helpful custom-application-level events. The first of these events is app:toggle_menu, which is called when you tap on the menu icon. This will either show or hide the menu, depending on its current status.

toMenu.addEventListener('click', function(){
  Ti.App.fireEvent('app:toggle_menu'),
});

Often, a user wants to start working with the screen before the menu has fully closed. To facilitate this, each display view will call the app:close_menu event on a double tap. This will automatically close the view and allow the user to continue working with the current screen.

view.addEventListener('dblclick',function(e){
  Ti.App.fireEvent('app:close_menu'),
});