Command Menu and Popup Submenu Example

From WebOS101

main-scene.html

<div class="palm-body-text">
	<pre id="output"></pre>
</div>

main-assistant.js

function MainAssistant() {
 
}
 
MainAssistant.prototype.log = function( msg ) {
	var out = "output";
	var content = msg + '\n' + this.controller.get(out).innerHTML;
	this.controller.get(out).update( content );
}
 
MainAssistant.prototype.setup = function() {
	this.bottomMenuModel = {
		visible: true,
		items: [
			{
				label:'My Bottom Menu',
				items: [
					{ label: "Menu 1",  command: 'menu1', width: 160 },
					{ label: "Menu 2", command: 'menu2', width: 160 }
				]
			}
		]
	};
	this.controller.setupWidget( Mojo.Menu.commandMenu, this.defaultAttributes, this.bottomMenuModel );
};
 
MainAssistant.prototype.activate = function(event) { };
 
MainAssistant.prototype.deactivate = function(event) { };
 
MainAssistant.prototype.cleanup = function(event) { };
 
 
MainAssistant.prototype.handlePop = function(value) {
	try {
		this.log( 'Pop Up Value = ' + value );
	} catch( err ) {
		this.log( 'handlePop: ' + err.message );
	}
};
 
MainAssistant.prototype.handleCommand = function(event) {  
	if (event.type === Mojo.Event.command) {
		switch (event.command) {
			case 'menu1':
				this.log( 'menu1' );
				break;
			case 'menu2':
				try {
					var near = event.originalEvent && event.originalEvent.target;
					this.controller.popupSubmenu({
						onChoose: this.handlePop,
						placeNear: near,
						items: [
							{ label: $L("a"), command: "a" },
							{ label: $L("b"), command: "b" },
							{ label: $L("c"), command: "c" },
							{ label: $L("d"), command: "d" },
							{ label: $L("e"), command: "e" }
						]
					});
				} catch ( err ) {
					this.log( 'menu2: ' + err.message );
				}
				break;
		}
	}
}

Back to Menu