Mojo.Menu
Unlike all other widgets, Menu widgets are not declared in your scene view file, but are simply instantiated and have their actions handled from within your assistant completely. Menu widgets are thought to be above the scene elements, attached to the scene's window rather than a point in the scene, so it wouldn't work for their position to be determined within the HTML.
With any of the menu functions, you need to set up a command handler which will receive the command events according to the precedence rules within the commander stack. See the Developer Guide - Menus for more information on the command handlers.
| Field Name and Description |
|---|
|
Mojo.Menu.appMenu
|
|
Mojo.Menu.commandMenu
|
|
Mojo.Menu.viewMenu
|
Overview
The Application Menu appears in the upper left corner of the screen when the user taps the left hand side of the status bar. It includes some system-defined and some application-defined actions, and is intended to have an application-wide scope for the most part. The application list contains a few required actions: Edit, which is a item group including Cut, Copy and Paste; Preferences and Help, both of which are disabled by default. You are free to add any other items to the menu, and to enable Preferences and/or Help by hooking them to the appropriate actions for your application.
Unlike all other widgets, Menu widgets are not declared in your scene view file, but are simply instantiated and have their actions handled from within your assistant completely. Menu widgets are thought to be above the scene elements, attached to the scene's window rather than a point in the scene, so it wouldn't work for their position to be determined within the HTML.
With any of the menu functions, you need to set up a command handler which will receive the command events according to the precedence rules within the commander stack.
See the Developer Guide - Menus for more information on the command handlers.
Declaration
None
Events
Events for menus are sent via the commander chain. Scenes are automatically registered on the commander chain. To receive events, implement a handleCommand function in your scene assistant. The event's command field will contain the command associated with the menu item selected, specified as part of the items array.
ex:
handleCommand: function(event) {
if (event.type === Mojo.Event.command) {
switch (event.command) {
...
}
}
}
Instantiation
this.controller.setupWidget(Mojo.Menu.appMenu,
this.attributes = {
omitDefaultItems: true
},
this.model = {
visible: true,
items: [
{label: "About My App ...", command: 'do-myAbout'},
Mojo.Menu.editItem,
{ label: "Preferences...", command: 'do-myPrefs' },
{ label: "Help...", command: 'do-myHelp' }
]
};
Attribute Properties
Attribute Property Type Required Default Description
---------------------------------------------------------------------------------------------------------------------------------
omitDefaultItems Boolean Optional FALSE If true, then default menu items will not be added to this menu.
richTextEditItems Boolean Optional FALSE If true, then the edit menu will also include Bold/Italics/Underline.
Model Properties
Model Property Type Required Default Description
---------------------------------------------------------------------------------------------------------------------------------
label String Optional Null Not displayed, future
visible Boolean Optional TRUE Current visibility of this menu
items Array Required List items for this menu, values below:
List items Type Required Default Description
---------------------------------------------------------------------------------------------------------------------------------
label String Optional Null User visible label for this item, not rendered for groups
icon String CSS class for icon to display in this item
iconPath String Optional None Path to image to display in menu item, relative to app's director
width Integer Optional Calculated based on item's width - specifies the width in pixels of this menuitem.
Overrides default calculations. Ignored for groups.
items Array Optional None If specified, this item is a "group" that visually ties the child items together.
toggleCmd String Optional None Only used when `items` is specified. Specify this property to make this group a
"toggle group". This string is the `command` of currently selected 'choice' item
in this group, and this property is modified by the widget when a different choice is made.
command String Optional None Specify to make this item a "choice". It will then respond to a user tap by sending
a mojo-command event through the commander chain with this string as the "command" property.
disabled Boolean Optional FALSE Menu choice is disabled when this is true. Only used for items which also specify 'command'.
submenu String Optional null Specify to make this item a "submenu" item. It will then respond to a user tap by
displaying the named menu as a popup submenu.
template String Optional null Path to HTML template for custom content to be inserted instead of a standard menu item.
The template is rendered using this item model object for property substitution.
checkEnabled Boolean Optional FALSE If truthy, a Mojo.Event.commandEnable event will be sent through the commander chain
each time this menu item is displayed or invoked via keyboard shortcut.
If a commander calls `preventDefault()` on the event, then the menuitem's model will
be modified to disable the menu item. Otherwise it will be enabled. This can be used
to lazily update the enable state of items in the app-menu or submenus.
Methods
Method Arguments Description
---------------------------------------------------------------------------------------------------------------------------------
None
Overview
The Command Menu are items presented at the bottom of the screen, and similar to the View Menu in most ways. Items will include variable sized buttons, that can be combined into groups, and in a horizontal layout from left to right. As with the View Menu, button widths can be adjusted from within the items property width, and the framework adjusts the space between the buttons automatically.
Unlike all other widgets, Menu widgets are not declared in your scene view file, but are simply instantiated and have their actions handled from within your assistant completely. Menu widgets are thought to be above the scene elements, attached to the scene's window rather than a point in the scene, so it wouldn't work for their position to be determined within the HTML.
With any of the menu functions, you need to set up a command handler which will receive the command events according to the precedence rules within the commander stack.
See the Developer Guide - Menus for more information on the command handlers.
Declaration
None
Events
Events for menus are sent via the commander chain. Scenes are automatically registered on the commander chain. To receive events, implement a handleCommand function in your scene assistant. The event's command field will contain the command associated with the menu item selected, specified as part of the items array.
ex:
handleCommand: function(event) {
if (event.type === Mojo.Event.command) {
switch (event.command) {
...
}
}
}
Instantiation
this.controller.setupWidget(Mojo.Menu.commandMenu,
this.attributes = {
spacerHeight: 0,
menuClass: 'no-fade'
},
this.model = {
visible: true,
items: [
{ icon: "back", command: "do-Previous"},
{ icon: 'forward', command: 'do-Next'}
]
};
Attribute Properties
Attribute Property Type Required Default Description
---------------------------------------------------------------------------------------------------------------------------------
spacerHeight Integer Optional Calculated If specified, the spacer div associated with this menu will be the given height in pixels.
This affects the size of the scene content, and whether the view menu "pushes down"
other content in the scene.
menuClass String Optional .palm-default If true, then the edit menu will also include Bold/Italics/Underline.
Model Properties
Model Property Type Required Default Description
---------------------------------------------------------------------------------------------------------------------------------
label String Optional Null Not displayed, future
visible Boolean Optional TRUE Current visibility of this menu
items Array Required List items for this menu, values below:
List items Type Required Default Description
---------------------------------------------------------------------------------------------------------------------------------
label String Optional Null User visible label for this item, not rendered for groups
icon String CSS class for icon to display in this item
iconPath String Optional None Path to image to display in menu item, relative to app's director
width Integer Optional Calculated based on item's width - specifies the width in pixels of this menuitem.
Overrides default calculations. Ignored for groups.
items Array Optional None If specified, this item is a "group" that visually ties the child items together.
toggleCmd String Optional None Only used when `items` is specified. Specify this property to make this group a
"toggle group". This string is the `command` of currently selected 'choice' item in
this group, and this property is modified by the widget when a different choice is made.
command String Optional None Specify to make this item a "choice". It will then respond to a user tap by sending
a mojo-command event through the commander chain with this string as the "command" property.
disabled Boolean Optional FALSE Menu choice is disabled when this is true. Only used for items which also specify 'command'.
submenu String Optional null Specify to make this item a "submenu" item. It will then respond to a user tap by
displaying the named menu as a popup submenu.
template String Optional null Path to HTML template for custom content to be inserted instead of a standard menu item.
The template is rendered using this item model object for property substitution.
checkEnabled Boolean Optional FALSE If truthy, a Mojo.Event.commandEnable event will be sent through the commander chain
each time this menu item is displayed or invoked via keyboard shortcut.
If a commander calls `preventDefault()` on the event, then the menuitem's model will
be modified to disable the menu item. Otherwise it will be enabled. This can be used
to lazily update the enable state of items in the app-menu or submenus.
Methods
Method Arguments Description
---------------------------------------------------------------------------------------------------------------------------------
None
Overview
The View menu presents items as variable sized buttons, either singly or in groups across the top of the scene. The items are layed out in a horizontal sequence starting from the left of the screen to the right. The button widths can be adjusted from within the items property width, and the framework adjusts the space between the buttons automatically.
Unlike all other widgets, Menu widgets are not declared in your scene view file, but are simply instantiated and have their actions handled from within your assistant completely. Menu widgets are thought to be above the scene elements, attached to the scene's window rather than a point in the scene, so it wouldn't work for their position to be determined within the HTML.
With any of the menu functions, you need to set up a command handler which will receive the command events according to the precedence rules within the commander stack.
See the Developer Guide - Menus for more information on the command handlers.
Declaration
None
Events
Events for menus are sent via the commander chain. Scenes are automatically registered on the commander chain. To receive events, implement a handleCommand function in your scene assistant. The event's command field will contain the command associated with the menu item selected, specified as part of the items array.
ex:
handleCommand: function(event) {
if (event.type === Mojo.Event.command) {
switch (event.command) {
...
}
}
}
Instantiation
this.controller.setupWidget(Mojo.Menu.viewMenu,
this.attributes = {
spacerHeight: 0,
menuClass: 'no-fade'
},
this.model = {
visible: true,
items: [
{ icon: "", command: "", label: " "},
{ label: "My App Name", width: 210 },
{ icon: '', command: '', label: " "}
]
};
Attribute Properties
Attribute Property Type Required Default Description
---------------------------------------------------------------------------------------------------------------------------------
spacerHeigth Integer Optional Calculated If specified, the spacer div associated with this menu will be the given height in pixels.
This affects the size of the scene content, and whether the view menu "pushes down"
other content in the scene.
menuClass String Optional .palm-default If true, then the edit menu will also include Bold/Italics/Underline.
Model Properties
Model Property Type Required Default Description
---------------------------------------------------------------------------------------------------------------------------------
label String Optional Null Not displayed, future
visible Boolean Optional TRUE Current visibility of this menu
items Array Required List items for this menu, values below:
List items Type Required Default Description
---------------------------------------------------------------------------------------------------------------------------------
label String Optional Null User visible label for this item, not rendered for groups
icon String CSS class for icon to display in this item
iconPath String Optional None Path to image to display in menu item, relative to app's director
width Integer Optional Calculated based on item's width - specifies the width in pixels of this menuitem.
Overrides default calculations. Ignored for groups.
items Array Optional None If specified, this item is a "group" that visually ties the child items together.
toggleCmd String Optional None Only used when `items` is specified. Specify this property to make this group a
"toggle group". This string is the `command` of currently selected 'choice'
item in this group, and this property is modified by the widget when a different
choice is made.
command String Optional None Specify to make this item a "choice". It will then respond to a user tap by
sending a mojo-command event through the commander chain with this string as
the "command" property.
disabled Boolean Optional FALSE Menu choice is disabled when this is true. Only used for items which also specify 'command'.
submenu String Optional null Specify to make this item a "submenu" item. It will then respond to a user
tap by displaying the named menu as a popup submenu.
template String Optional null Path to HTML template for custom content to be inserted instead of a standard
menu item. The template is rendered using this item model object for property substitution.
checkEnabled Boolean Optional FALSE If truthy, a Mojo.Event.commandEnable event will be sent through the commander
chain each time this menu item is displayed or invoked via keyboard shortcut.
If a commander calls `preventDefault()` on the event, then the menuitem's model
will be modified to disable the menu item. Otherwise it will be enabled. This can
be used to lazily update the enable state of items in the app-menu or submenus.
Methods
Method Arguments Description
---------------------------------------------------------------------------------------------------------------------------------
None