Slideout Menu

Using a Slideout menu for navigation has become a popular way to display navigation options. This navigation pattern was made popular by Facebook and Path apps. The strength of this navigation pattern is that it can effectively present a large number of menu options. Most Enterprise apps can benefit from this kind of navigation as it increases feature discoverability.

Getting ready

In this recipe, we will demonstrate how to create a sample app using the Slideout menu to access four application views, and a logout button. The Slideout Menu module provides a chainable CommonJS module to easily manage your menu and visual assets that can be easily branded.

The following screenshots show the Slideout menu when open in our sample cross-platform app. The following steps will walk you through creating this sample, and demonstrate how to configure the control to meet your needs.

Getting ready

Installing the Ti.Draggable module

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:

Installing the Ti.Draggable module

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).

Installing the Ti.Draggable module

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.

Installing the Ti.Draggable module

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:

Installing the Ti.Draggable module

Adding the Slideout Menu module to your project

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.

Adding the Slideout Menu module to your project

Tip

The SlideOutMenu folder must be located in the root folder of your Titanium project in order for this recipe to work as designed.

How to do it…

Once you've added the SlideOutMenu folder to your project, you need to use require to import the module into your code.

//Create our application namespace
var my = {
  views:{},
  menu : require('./SlideOutMenu/MASlidingMenu')
};

Defining our content views

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'})	
};

Building our menu items

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:

  • Title: This property is used to display the menu text of the item.
  • Detail Cue: The property hasDetail determines if the more arrow visual cue should be displayed. This property is optional, and by default false.
  • View Pointer: The optional property view is used to hold a reference to the view that should be displayed when the menu item is pressed.
    var menuData = [
      { title:'Home', hasDetail:true, view: my.views.home },
      { title:'Inbox', hasDetail:true, view: my.views.inbox },
      { title:'Sales', hasDetail:true, view: my.views.sales },
      { title:'Customers', hasDetail:true, 
    view: my.views.customers },
      { title:'About', hasDetail:true, view: my.views.about },
      { title:'Logout' }
    ];

Opening the app window

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();

Adding menu listeners

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

  1. When a menu item is tapped, the buttonclick event is fired, providing the menu item index.
    my.menu.addEventListener('buttonclick', function(e) {
      if (e.index === 2) {
        alert('You clicked on Logout'),
      }
    });
  2. When a display view is switched for another view, the switch event is fired. This event can be used to help load display-view content.
    my.menu.addEventListener('switch', function(e) {
      Ti.API.info('menuRow = ' + JSON.stringify(e.menuRow));
      Ti.API.info('index = ' + e.index);
      Ti.API.info('view = ' + JSON.stringify(e.view));
    });
  3. As the user slides the display view to expose the menu, the sliding event is fired. This provides the view distance.
    my.menu.addEventListener('sliding', function(e) {
      Ti.API.info('distance = ' + e.distance);
    });
  4. When the menu is fully displayed, the open event is fired. This event is helpful for tracking visual state.
    my.menu.addEventListener('menuOpened', function(e) {
      Ti.API.info('Menu is open'),
    });
  5. When the menu is fully closed, the menuClosed event is fired. This event is helpful for tracking visual state.
    my.menu.addEventListener('menuClosed ', function(e) {
      Ti.API.info('Menu is closed'),
    });

Adding custom application listeners

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();
});

How it works…

The Slideout Menu module provides several functions to help you build your app's navigation system.

Creating the menu

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);

Opening the menu container

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();

Tip

The addMenuItems function needs to be called before the menu container can be opened.

Showing the menu

The following line demonstrates how to fully display the menu:

my.menu.expose();

Toggling the menu

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();

Closing the menu

The following line demonstrates how you can hide the menu:

my.menu.hide();

Determining menu state

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());

Accessing the current view

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();

Closing the menu container

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

my.menu.dispose();

Using the sample's Global Events

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'),
});

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.159.116