AppMenu Example

From WebOS101

For the Enyo kind, please see enyo.AppMenu.

In the setup method of stage-assistant.js add:

myMenuAttr = {
        omitDefaultItems: true
    };
 
    myMenuModel = {
 
        visible: true,
        items: [Mojo.Menu.editItem,
                Mojo.Menu.prefsItem,
                Mojo.Menu.helpItem
        ]
    };

If you need a custom menu on a select number of scenes, add an additional model for that menu:

myMenuModelClearHighscores = {
 
        visible: true,
        items: [Mojo.Menu.editItem,
                Mojo.Menu.prefsItem,
                {
                    label: $L("Clear High Scores"),
                    command: 'do-clear-scores'
                },
                Mojo.Menu.helpItem
        ]
    };

If you'd like to create app menu option like the edit menu, with multiple choices, add in another label like this:

myMenuModelClearHighscores = {
 
        visible: true,
        items: [Mojo.Menu.editItem,
                Mojo.Menu.prefsItem,
                {
                    { label: $L("High Scores"), items: [
				{ label: "Clear",          command: 'do-clear-scores' },	
				{ label: "Save",       command: 'do-save-scores' },	
					]},
                },
                Mojo.Menu.helpItem
        ]
    };

Next, you'll need to add a handleCommand method to the stage assistant:

StageAssistant.prototype.handleCommand = function (event) {
    var currentScene = this.controller.activeScene();
 
    switch(event.type) {
        case Mojo.Event.commandEnable:
            switch (event.command) {
                case Mojo.Menu.prefsCmd:
                    if(!currentScene.assistant.prefsMenuDisabled)
                        event.stopPropagation();
                    break;
                case Mojo.Menu.helpCmd:
                    if(!currentScene.assistant.helpMenuDisabled)
                        event.stopPropagation();
                    break;
            }
            break;
        case Mojo.Event.command:
            switch (event.command) {   
                case Mojo.Menu.helpCmd:
                    this.controller.pushScene('support');
                    break;
 
                case Mojo.Menu.prefsCmd:
                    this.controller.pushScene('preferences');
                    break;
 
                case 'do-clear-scores':
                    // do something
                    break;
            }
        break;
    }
};

In each scene's setup method add:

this.controller.setupWidget(Mojo.Menu.appMenu, myMenuAttr, myMenuModel);

If you want to disable the help or prefs menu in a scene, simply set a property on that scene assistant:

this.helpMenuDisabled = true;

You can also modify the default behavior by adding a handleCommand to a scene assistant, such as:

MyAssistant.prototype.handleCommand = function (event) {
    switch(event.type) {
        case Mojo.Event.commandEnable:
            switch (event.command) {
                case "my-menu-commnd":
                    event.stopPropagation();
                    event.preventDefault();
                    break;
            }
            break;
    }
};