Part 4: Adding an Auto-generated Help Scene

Again, make a copy of the project you've already created. Just as a precaution, so you can go back to what you've done previously. You also should have completed part 1, part 2, and part 3 to do this tutorial. Important: You must have the 1.3.1 SDK or later in order to complete this tutorial.

In this tutorial, we'll create a help scene using a technique that was introduced with version 1.3.1 of the SDK. This way, you don't have to manually create a new scene and populate it with lists and links. Instead, you simply include the information you want into your appinfo.json then use a single statement in your menu to open the dynamically created help scene. If you need to make changes to that information, you simply update the appinfo.json.

To do this, open up your project folder that we've been working with throughout these tutorials. Now, let's modify appinfo.json so it looks like the following: (Rather than focus on what's new, just replace everything with the text below)

{
"id": "com.net-tech-group.addsub",
"version": "0.4.0",
"vendor": "Richard Neff",
"type": "web",
"main": "index.html",
"title": "Add/Subtract",
"icon": "icon.png",
"smallicon": "icon_32.png",
"copyright": "© Copyright 2009 My Company, Inc.",
"support": {
    "url": "http://www.net-tech-group.com/pre/",
    "email": {
        "address": "someone@mycompany.com",
        "subject": "Support"
        },
"phone": "555-555-5555",
"resources": [
    {
    "type": "scene",
    "label": "Help Topics",
    "sceneName": "topics"
    },
   
        {
        "type": "web",
        "label": "PreCentral.net Forums",
        "url": "http://forums.precentral.net/web-os-development/198781-beyond-hello-world-tutorial.html#post1829022"
        }
        ]
    }
}       

Let's examine what this code does:

Now that we've entered the appropriate information into the .json file, we need to access it via the menu. As you'll recall, this is handled through the Stage Assistant. So, let's modify stage-assistant.js so it looks like the following: (Bold text is new)

function StageAssistant () {
}

StageAssistant.prototype.setup = function() {

// Setup Application Menu with an About entry
//
AddSubMenuAttr = {omitDefaultItems: true};
AddSubMenuModel = {
visible: true,
items: [
{label: "About Add/Subtract...", command: 'do-aboutAddSub'},
Mojo.Menu.editItem,
Mojo.Menu.prefsItem,
{label: "Help...", command: 'do-helpAddSub', shortcut: 'h'}
]
};
this.controller.pushScene('first');
};

// handleCommand - Setup handlers for menus:
//
StageAssistant.prototype.handleCommand = function(event) {
// var currentScene = this.controller.activeScene();
if(event.type == Mojo.Event.command) {
switch(event.command) {
case 'do-aboutAddSub':
this.controller.pushScene("about");
break;

case 'do-helpAddSub':
this.controller.pushAppSupportInfoScene();
break;

}
}
};

Fortunately, there isn't a lot of typing here. But, as with the previous code, be sure to double-check your typing. Let's examine what this code does:

If everything works, then you should see something similar to the following when you select the Help... menu:

Add/Subtract App

So, as you can see, this is a pretty simple way to create Help scenes for your applications!

I hope this information was useful! If you have problems or still need help, I'd recommend asking in the following forums:

Back to Home | Download the v4 Source (.zip) | Download the v4 IPK


© 2010 Richard Neff