Menu

From WebOS101

Contents 1 Introduction 2 appMenu 3 Command Menu 4 viewMenu 5 Pop-Up Sub-Menus

Introduction

There are three types of menus supported on webOS. They are the appMenu, commandMenu and viewMenu. They each fill different needs.

appMenu

• appMenu Example
• subMenu Example

Command Menu

The command menu is a button bar that appears at the bottom of the screen and contains groups of icons. Command menus are not setup within your view and are handled through the handleCommand function. When setting up the menu you can either give each item a label, an icon, or both. Setting up an icon is easy and is simply a matter of providing a css class for the icon property that has a background property set to an image that is 32x64. Some examples of menu icons can be found in the frameworks images folder that comes with the SDK. The menu icons have a prefix "menu-icon-" followed by the name you would use for the icon property. So for example the following code displays a menu item that uses "menu-icon-new" as its image:

this.controller.setupWidget(
			Mojo.Menu.commandMenu,
			{
				spacerHeight: 0,
				menuClass: "no-fade"
			},
			{
				visible: true,
				items: [
					{
						icon: "new",
						command: "new"
					}
				]
			} // model
		);

• Command Menu Example

viewMenu

View menus are the same as command menus only the appear at the top of the screen.

• View Menu Example

Pop-Up Sub-Menus

Pop-up sub-menus can be used to offer a transient textual list of choices to the user, typically off of another menu type, or even from a DOM element in the scene. It accepts standard menu models with the addition of some unique properties, but unlike the other menu types, Sub-menu does not use the commander for propagating selections. Instead the onChoose callback is used. -- Mojo Documentation

• Command Menu and Popup Submenu Example