www.webOShelp.net

Here's part 2 of our coverage of chapter 2 of Palm webOS by O'Reilly. This article will continue to explore new concepts and programming elements that were introduced. You may want to read through part 1 and our summary of the first official webOS tutorial if you haven't already, as this article builds on that knowledge.

Custom Application Structures

You don't have to follow the default folder structure generated when you start a new application. You can add folders within the app/views folder to suit your application's structure, as long as you specify the id and template of the scene when you push it onto the stack. Here's an example:

app/views/thegreatestapp/coolscenes/scene1.html

You would push this scene as follows:

Mojo.Controller.stageController.pushScene({id:"greatest-app-scene-one", 
   name:"coolscenes", sceneTemplate:"thegreatestapp/coolscenes/scene1"});

Prototype Notation

Prototype can be used to create HTML templates, which are helpful "any time you have a group of similar objects and you need to produce formatted output for these objects". This functionality is demonstrated following example from the Prototype website:

// the template (our formatting expression)
var myTemplate = new Template('The TV show #{title} was created by #{author}.');

// our data to be formatted by the template
var show = {title: 'The Simpsons', author: 'Matt Groening', network: 'FOX' };

// let's format our data
myTemplate.evaluate(show);
// -> The TV show The Simpsons was created by Matt Groening.

We can see the same notation in the scene from chapter 2:

<div id='storyViewScene'>
    <div class="palm-page-header multi-line">
       <div id="test" class="palm-page-header-wrapper">
          <div id="storyViewTitle" class="title left">#{title}</div>
       </div>
    </div>
    <div id="storyViewSummary" class="itemFull">#{text}</div>
</div>

However, it's somewhat unclear how you set these fields up to be replaced as the example provided in chapter 2 populates the divs with static content using innerHTML:

    $("storyViewTitle").innerHTML = "Green Inc.: Cities
       Target Lending to Speed Energy Projects";
    $("storyViewSummary").innerHTML = "A number of municipalities
       across the country are getting creative and experimenting
       with incremental, neighborhood- or district-based lending programs
       that help homeowners pay the up-front capital costs
       for efficiency or renewable energy projects.";

The $("[div id]") notation is a Prototype function that returns the object corresponding to the div id provided in quotation marks. Therefore, the code above will simply replace the #{fieldName} tags with this hard-coded example. We will definitely see how it's done properly down the road.

Custom Styles

Palm recommends the use of the base styles included with the Mojo framework as it will help give your applications a look and feel consistent with the core webOS applications.

Here are some of the standard scene styles included with the Mojo framework:

Style Class Name	Description
palm-page-header	Scene style with header that adjusts to text dimension; can be single or multi-line
palm-header	Scene style with pill at top; single-line only
palm-header-spacer	Keeps other scene elements from folding under for header
palm-group	Container for lists, text fields and/or widgets; Internal to scene
palm-group-title	Title for palm-group
palm-group-unlabeled	Internal to scene; no title
palm-divider.labeled	Labeled divider
palm-divider.collapsible	Collapsible divider

Here is a list of .css files that contain some widget style definitions:

Widget Styles	CSS File Location
Buttons	global-buttons.css, global-buttons-dark.css
Dialogs	globals.css, global-dark.css
Drawers	global-lists.css, global-lists-dark.css
Indicators	globals.css, global-dark.css
Lists	global-lists.css, global-lists-dark.css
Menus	global-menus.css, global-menus-dark.css
Notifications	global-notifications.css
TextFields	global-textfields.css, global-textfields-dark.css
Pickers	global-menus.css, global-menus-dark.css

In addition to the base styles, Palm points out that "You can use any standard CSS styling techniques with webOS apps—the only potential issues are where you wrap an element that has a Mojo class style within a custom style. You'll have to experiment to see what does and doesn't work in these cases."

Palm does not recommend overriding styles for "key textual elements" including body, paragraph, input, button "and others", so that your application can maintiain the "look and feel" of a webOS application.

App Launch Lifecycle

Palm describes the sequence of events that occurs when a webOS application is launched.

1. The Mojo framework first looks for an AppAssistant—an optional controller function used to handle launch arguments from the system and set up stages if the app requires more than the main Card view or has "non-standard" stages. If not found, it is skipped.
2. The framework launches the first required controller instance: StageAssistant. The StageAssistant contains code that applies to all scenes in a stage. It is also responsible for pushing the first scene, creating the application's intial view.
3. The framework loads the first scene's view file and invokes setup and activate methods in the scene's assistant. The setup method instantiates widgets, sets up event listeners and any other setup functions that may persist across the life of a scene.

From this point, much of an application will involve pushing and popping scenes. Here is an example what scene assistant functions are called in an application consisting of two scenes that are pushed and then popped:

	First scene assistant	Second scene assistant
Push First Scene	setup() activate()
Push Second Scene	deactivate()	setup() activate()
Pop Second Scene	activate()	deactivate() cleanup()
Pop First Scene	deactivate() cleanup()

Globals Variables

Namespace collisions and "unexpected behavior" can sometimes occur with the use of global variables in JavaScript, but Palm says this is not an issue with webOS as each application is its own document and application globals are not visible to any other application. They also mention that Mojo uses "only three globals": the Mojo prefix, $L and $$L, which are used for Localization encapsulation.

They do caution that there may be other reasons for avoiding global variables, such as memory optimization and making it easier to port your code to another platform (e.g. the web).

Pushscene vs. Swapscene

Up to now we've only seen pushScene as a method for loading a new scene. However, there are situations in which you may want to swap a scene with an existing scene rather than pushing it onto the stack. Doing so means that the back gesture will move to the last pushed scene rather than the scene that was swapped out. The syntax for the swapScene method is the same as pushScene:

   StoryViewAssistant.prototype.previousStory = function(event) {
       Mojo.Controller.stageController.swapScene("storyView", this.storyFeed,
    this.storyIndex-1);
   };

StoryViewAssistant.prototype.nextStory = function(event) {
       Mojo.Controller.stageController.swapScene("storyView", this.storyFeed,
    this.storyIndex+1);
   };

It's getting late, so it looks like part 3 of 2 will be posted tomorrow. In addition to some new concepts and language elements there was also a lot of sample code also presented in this chapter, which will be posted as a tutorial that will evolve as additional chapters of the book are released. Please post any comments or questions below!