# Titanium.Android.Menu
The Titanium binding of an Android Options Menu.
# Overview
The Menu and MenuItems APIs are used to create the action items for the action bar. Action items can appear in either the action bar or the action bar's overflow menu.
To create action items with JavaScript, assign a callback function to the activity's
Titanium.Android.Activity.onCreateOptionsMenu property.
The activity's menu object is passed in to the onCreateOptionsMenu
function when the menu is created.
Use the Menu's Titanium.Android.Menu.add method to create new action items.
In Alloy you can use <Menu>
and <MenuItem>
elements to create an options menu.
<Menu id="menu" platform="android">
<!-- Cannot specify node text. Use attributes only. -->
<MenuItem id="saveitem" title="Save" icon="item1.png" onClick="doSave" />
<MenuItem id="closeitem" title="Close" icon="item1.png" onClick="doClose" />
</Menu>
To switch menu items dynamically, call
Titanium.Android.Activity.invalidateOptionsMenu, which causes
the onCreateOptionsMenu
callback to be called again.
# Menus on Tab Groups
Menus must be added to tab groups using the tab group's activity. These changes were required to support the Android 3.0 action bar.
The TabGroup activity is available using Titanium.UI.TabGroup.activity.
However, unlike a window's activity it is not currently possible to set properties on
the tab group's activity before the tab group is opened. To add a menu to a tab group,
set the onCreateOptionsMenu
property to the tab group's open
event listener, and
then call invalidateOptionsMenu
to force the changes to take effect.
tabGroup.addEventListener("open", function(e) {
var activity = globals.tabs.getActivity();
activity.onCreateOptionsMenu = function(e) {
var menuItem = e.menu.add({
title : "Add Task",
showAsAction : Ti.Android.SHOW_AS_ACTION_ALWAYS,
icon : "add_icon.png"
});
menuItem.addEventListener("click", function(e) {
//
});
}
activity.invalidateOptionsMenu();
});
# Application Notes for Release 3.2.x and earlier
If you are using Release 3.2.x and earlier, the options menu is presented differently based on the Android version and application settings.
On Android devices prior to Android 3.0 (API level 11), the menu is always presented as an options menu, which is displayed when the Menu button is pressed.
On Android 3.0 and later, menu items can be displayed as action items in the action bar. To enable this, the application must be built with a theme that supports the action bar, such as the Holo theme. (See Android Themes (opens new window) in the Titanium Guides for information on setting your application's theme.)
For menu items displayed in the menu, the onCreateOptionsMenu
function is called
once, and the Titanium.Android.Activity.onPrepareOptionsMenu callback function is called each
time the menu is opened. The onPrepareOptionsMenu
function can be used to switch menu items dynamically.
# Further Reading
See also:
Menus (opens new window) in the Android Developer Guides.
Action Bar (opens new window) in the Android Developer Guides.
Menu (opens new window) in the Android Developer Reference.
# Examples
# Creating a Simple Menu
This sample creates an Android menu that displays a menu item named "Item 1", which logs a debug message when clicked.
If the action bar is in use, the menu item will be displayed as an action item if there is room in the action bar.
var win = Ti.UI.createWindow({
fullscreen: true
});
var activity = win.activity;
activity.onCreateOptionsMenu = function(e){
var menu = e.menu;
var menuItem = menu.add({
title: "Item 1",
icon: "item1.png",
showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM
});
menuItem.addEventListener("click", function(e) {
Ti.API.debug("I was clicked");
});
};
win.open();
# Creating a Dynamic Menu
This sample creates an Android menu that displays a menu item named
"Login" or "Logout", depending on the value of a loggedIn
Boolean variable.
Click on the item to toggle the variable's value.
var win = Ti.UI.createWindow({
fullscreen: true
});
var LOGIN = 1, LOGOUT = 2;
var loggedIn = false;
var activity = win.activity;
activity.onCreateOptionsMenu = function(e){
var menu = e.menu;
var login = menu.add({ title: "Login", itemId: LOGIN });
login.icon = 'login.png';
login.addEventListener("click", function(e) {
loggedIn = true;
// In Android 3.0 and above we need to call invalidateOptionsMenu() for menu changes at runtime
win.activity.invalidateOptionsMenu();
});
var logout = menu.add({ title: "Logout", itemId: LOGOUT });
logout.icon = 'logout.png';
logout.addEventListener("click", function(e) {
loggedIn = false;
// In Android 3.0 and above we need to call invalidateOptionsMenu() for menu changes at runtime
win.activity.invalidateOptionsMenu();
});
};
activity.onPrepareOptionsMenu = function(e) {
var menu = e.menu;
menu.findItem(LOGIN).visible = !loggedIn;
menu.findItem(LOGOUT).visible = loggedIn;
};
win.open();
# Alloy XML Markup
Previous simple menu example as an Alloy view.
Due to the way menus are created in Alloy, menus created using Alloy markup are not
displayed until the options menu is invalidated. To force menus (or action items)
to be displayed, call invalidateOptionsMenu
from the open
event listener of the window or tab group
where the menu is defined.
index.xml:
<Alloy>
<!-- Create a heavyweight window to use the Android menu. -->
<Window id="win" fullscreen="true" onOpen="doOpen">
<!-- The Menu tag adds the Android menu. -->
<Menu id="menu" platform="android">
<!-- Cannot specify node text. Use attributes only. -->
<MenuItem id="menuItem" title="Item 1" icon="item1.png" onClick="doClick" showAsAction="Ti.Android.SHOW_AS_ACTION_IF_ROOM" />
</Menu>
<!-- Place additional views here -->
</Window>
</Alloy>
index.js:
function doClick(e) {
Ti.API.info("Menu item clicked: " + e.source.title);
}
// Ensure menu is displayed
function doOpen(e) {
$.win.activity.invalidateOptionsMenu();
}
# Properties
# apiName READONLY
The name of the API that this proxy corresponds to.
The value of this property is the fully qualified name of the API. For example, Titanium.UI.Button
returns Ti.UI.Button
.
# bubbleParent
Indicates if the proxy will bubble an event to its parent.
Some proxies (most commonly views) have a relationship to other proxies, often established by the add() method. For example, for a button added to a window, a click event on the button would bubble up to the window. Other common parents are table sections to their rows, table views to their sections, and scrollable views to their views. Set this property to false to disable the bubbling to the proxy's parent.
Default: true
# lifecycleContainer
The Window or TabGroup whose Activity lifecycle should be triggered on the proxy.
If this property is set to a Window or TabGroup, then the corresponding Activity lifecycle event callbacks will also be called on the proxy. Proxies that require the activity lifecycle will need this property set to the appropriate containing Window or TabGroup.
# Methods
# add
Creates a Titanium.Android.MenuItem from the passed creation options.
Parameters
Name | Type | Description |
---|---|---|
options | Object | Creation options. Supported options are itemId, groupId, title, order, actionView, checkable, checked, enabled, icon, showAsAction, titleCondensed, and visible. |
Returns
# addEventListener
Adds the specified callback as an event listener for the named event.
Parameters
Name | Type | Description |
---|---|---|
name | String | Name of the event. |
callback | Callback<Titanium.Event> | Callback function to invoke when the event is fired. |
Returns
- Type
- void
# applyProperties
Applies the properties to the proxy.
Properties are supplied as a dictionary. Each key-value pair in the object is applied to the proxy such that myproxy[key] = value.
Parameters
Name | Type | Description |
---|---|---|
props | Dictionary | A dictionary of properties to apply. |
Returns
- Type
- void
# clear
Clears all items from this menu.
You should release all references you have retained to Titanium.Android.MenuItem previously created.
Returns
- Type
- void
# findItem
Locates a Titanium.Android.MenuItem in this menu, by item ID or reference.
Returns the identified menu item, or null
if the menu item was not located.
Parameters
Name | Type | Description |
---|---|---|
item | Number | Titanium.Android.MenuItem | Integer itemId or a reference to a |
Returns
# fireEvent
Fires a synthesized event to any registered listeners.
Parameters
Name | Type | Description |
---|---|---|
name | String | Name of the event. |
event | Dictionary | A dictionary of keys and values to add to the Titanium.Event object sent to the listeners. |
Returns
- Type
- void
# getItem
Returns the Titanium.Android.MenuItem at a specific index.
Returns null
if no menu item exists at the specified index.
Parameters
Name | Type | Description |
---|---|---|
index | Number | Index of the menu item to return. |
Returns
# hasVisibleItems
Returns true
if this menu has visible items.
Returns
- Type
- Boolean
# removeEventListener
Removes the specified callback as an event listener for the named event.
Multiple listeners can be registered for the same event, so the
callback
parameter is used to determine which listener to remove.
When adding a listener, you must save a reference to the callback function in order to remove the listener later:
var listener = function() { Ti.API.info("Event listener called."); }
window.addEventListener('click', listener);
To remove the listener, pass in a reference to the callback function:
window.removeEventListener('click', listener);
Parameters
Name | Type | Description |
---|---|---|
name | String | Name of the event. |
callback | Callback<Titanium.Event> | Callback function to remove. Must be the same function passed to |
Returns
- Type
- void
# removeGroup
Removes all menu items with the specified groupId.
Parameters
Name | Type | Description |
---|---|---|
groupId | Number | Group ID of items to remove. |
Returns
- Type
- void
# removeItem
Removes a specific Titanium.Android.MenuItem identified by its itemId.
Parameters
Name | Type | Description |
---|---|---|
itemId | Number | Item ID of item to remove. |
Returns
- Type
- void
# setGroupEnabled
Enables or disables a group of menu items identified by a groupId.
Parameters
Name | Type | Description |
---|---|---|
groupId | Number | ID of the group to enable or disable. |
enabled | Boolean | True to enable the specified group, false to disable it. |
Returns
- Type
- void