www.webOShelp.net

Get the latest on:webOS Developers' RSS FeedwebOS Facebook page webOS Twitter Feed

Home Tutorials First official webOS / Mojo SDK Tutorial from Palm Redux! - Scenes and Assistants

First official webOS / Mojo SDK Tutorial from Palm Redux! - Scenes and Assistants

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:

webOS Tutorial scene 1

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:

webOS Tutorial Scene 1webOS Tutorial scene 1bwebOS Tutorial scene 2

 

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. alt

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!



 

8 Comments

Feed
  1. Excellent overview and guide to the video! It saves a lot of time for the rest of us when it comes to taking notes during the video. One suggestion I would make would be to make it more clear on your front page as to what you are covering. I almost didn't check out the article because I thought it was just a quick overview.
  2. Thanks for the suggestion, Paul; I'll add some additional detail to the homepage.
  3. Hopefully Palm will release mojo for us to play with, or maybe a few more chapters of the O'Reilly book. I'd like to see what else is in mojo, hopefully before it's entirely released. It'd be really sweet to get to really know pieces of it incrementally rather than have the whole API dumped on us at once.

    But, one thing that's nice about JavaScript and why there are so many frameworks in existence is that it's extremely fast and easy to code with. So even if there isn't a lot of functionality in the initial Mojo release we could get a lot of updates to it, even in the first year.
  4. has anyone gotten this code to work?

    I have been trying, but it does not work. some of the buttons are off screen and do not do anything when pressed. This happens in both the pre in the emulator

    I would really appreciate it if someone would post the working code.

    Thanks :)
  5. Will some tell me plese, how to test my first applicatio over pre emulator and which IDE can I use?
  6. Mahesh, the Hello World tutorial from palm will get you started.
    http://developer.palm.com/index.php?option=com_content&view=article&id=1758

    Edgarwong, I have it working on my computer, but I still can't get it to pass the value yet. If you want the code I have let me know.
  7. It does pass the value but it is not set because of a mistake in the tutorial.

    $("color").innerHTML=this.textString;

    This should be in the activate method.
  8. Try this link http://kmdarshan.com/wordpress/?p=3305
    They got pretty good tutorials.

Add Comment


    • >:o
    • :-[
    • :'(
    • :-(
    • :-D
    • :-*
    • :-)
    • :P
    • :\
    • 8-)
    • ;-)