www.webOShelp.net

Article Index
First official webOS / Mojo SDK Tutorial from Palm Redux!
Scenes and Assistants
All Pages

The pushScene command displays the first scene of the application represented by first-scene.html:

<div class="palm-header">
<div class="palm-header-center">
   App 1 - Scene 1
</div>
<div class="palm-header-spacer"></div>
   This is our first scene together!
<div x-mojo-element="TextField" id=’myText’></div>
<button class="palm-button" id="myButton">Next Scene</button> 

There are a few things to note here:

• There are several built-in css styles (that seem to all begin with "palm-") that can be used with any application and overidden on any individual element or universally throughout your application.
• To use a Mojo UI widget in your application, you simply specify the appropriate x-mojo-element attribute in a div. You must also include a unique id so that you can reference the widget from Javascript.

When run, this scene displays the following output:

The div with the palm-header class appears as the black bar at the top.  The palm-header-spacer app adds a bit of space between the black bar and the text "This is our first scene together!"  The rest is self-explanatory.

The second scene was defined in second-scene.html:

<div class="palm-page-header" align="center">
   App 1 – Scene 2
</div>
This is our second scene a bit like the first.
Color is <span id="color"></span>

We'll see how this scene looks a bit later.

Once again, the span is given an id so that it can be referenced from Javascript.

To understand how the scenes communicate with each other, we need to look at the scenes' assistants. Here's first-assistant.js:

function FirstAssistant() {
   /* this is the creator function for your scene assistant object. 
   It will be passed all the additional parameters (after the scene 
   name) that were passed to pushScene.  The reference to the scene 
   controller (this.controller) has not been established yet, so any 
   initialization that needs the scene controller should be done in 
   the setup function below. */
}

FirstAssisstant.prototype.setup = function() {
   /* this function is for setup tasks that have to happen when the scene is first created */
   /* use Mojo.View.render to render view templates and add them to the scene, if needed. */
   /* setup widgets here */
   /* add event handlers to listen to events from widgets */
   
   this.textAttr = {
      hintText: "Enter Color",
      focus:true
   };
   this.textModel= {
      value: ""
   };
   this.controller.setupWidget("myText",this.textAttr,this.textModel);
   
   Mojo.Event.listen($("myButton"), "click", this.nextScene.bindAsEventListener(this));
}

FirstAsssistant.prototype.activate = function(event) {
   /* put in event handlers here that should only be in effect when 
   this scene is active.  For example, key handlers that are observing
   the document */
}

FirstAssistant.prototype.deactivate = function(event){
   /* remove any event handlers you added in activate and do any other
   cleanup that should happen before this scene is popped or another
   scene pushed on top */
}

FirstAssistant.prototype.cleanup = function(event) {
   /* this function should do any cleanup needed before the scene is
   destroyed as a result of being popped off the scene stack */
}

FirstAssistant.prototype.nextScene=function(event){
   Mojo.Controller.stageController.pushScene("second", this.textModel.value);
}

In the setup function we set up the TextField widget by passing it a couple of JSON objects. The first is the textAttr object that specifies a couple of TextField properties; the hintText appears in the field before the user has entered anything, and having focus=true ensures the user can start typing without having to first select the field on the screen. The textModel object specifies that the TextField can contain a value, which is initially set to blank.

The Mojo.Event.listen function listens for a click" action on the myButton object, and, when detected, calls the nextScene function.

The nextScene function calls Mojo.Controller.stageController.pushScene and specifies the scene to push (second) and passes the value the user entered in the TextField (this.textModel.value). The second scene is then pushed onto the scene stack.

Let's take a look at how the second scene handles this value. Here's second-assistant.js:

function SecondAssistant(text) {
   /* this is the creator function for your scene assistant object. 
   It will be passed all the additional parameters (after the scene 
   name) that were passed to pushScene.  The reference to the scene 
   controller (this.controller) has not been established yet, so any 
   initialization that needs the scene controller should be done in 
   the setup function below. */
   this.textString=text;
}

SecondAssisstant.prototype.setup = function() {
   /* this function is for setup tasks that have to happen when the scene is first created */
   /* use Mojo.View.render to render view templates and add them to the scene, if needed. */
   /* setup widgets here */
   /* add event handlers to listen to events from widgets */
}

SecondAsssistant.prototype.activate = function(event) {
   /* put in event handlers here that should only be in effect when 
   this scene is active.  For example, key handlers that are observing
   the document */
}

SecondAssistant.prototype.deactivate = function(event){
   /* remove any event handlers you added in activate and do any other
   cleanup that should happen before this scene is popped or another
   scene pushed on top */
   $("color").innerHTML=this.textString; 
}

SecondAssistant.prototype.cleanup = function(event) {
   /* this function should do any cleanup needed before the scene is
   destroyed as a result of being popped off the scene stack */
}

The assistant for the second scene receives the argument from the first scene in its creator function, invoked when the scene is pushed onto the stack. The text argument is defined as a function parameter in the first line (function SecondAssistant (text)) and is later assigned to an internal variable (this.textString=text).

The text is then used in the activate function which is called after the constructor function, and assigned to the innerHTML property of the element with id=color.

The net output of this program, then, is:

 

And that just about did it for the actual tutorial.  You should now have enough webOS know-how to build your own clone of Crysis using your favorite text editor and the Mojo toolkit.

After this, the webcast branched into a quick overview of local storage, notifications and services, which will be covered in a separate article.  If you want to grab the code from this tutorial to play around with or use as the basis for your own webOS application, you can find it here.

Questions? Comments? Glaring mistakes? Leave a comment!