Tapping on a story will push a web view scene and load the original story’s URL in that scene. This example is a simple use of Web view, where we create a new scene for the web page, but it’s still within the News application’s context.

Create a new scene, called webView, using palm-generate, then declare the widget in your scene view and configure it in your scene assistant before calling setupWidget(). The storyWeb-scene.html is just one line:

<div id="storyWeb" x-mojo-element="WebView"></div>

And there’s not much more to the storyWeb-assistant.js to configure and set up the WebView widget:

/*  StoryWebAssistant - NEWS

    Copyright 2009 Palm, Inc.  All rights reserved.

    Passed a story URL, displays that element in a full scene webview with
    a load indicator and reload button. Handles link selections within the
    view. User swipes back to return to the calling view.

    Major components:


    Arguments:
    - storyURL; Selected feed from which the stories are being viewed

*/


function StoryWebAssistant(storyURL) {
  //  Save the passed URL for inclusion in the webView setup
  this.storyURL = storyURL;
}

StoryWebAssistant.prototype.setup = function() {

    //  Setup up the webView widget
    this.controller.setupWidget("storyWeb", {url: this.storyURL},
        this.storyViewModel = {});

    //    Setup handlers for any links selected.
    this.linkClickedHandler = this.linkClicked.bindAsEventListener(this);
    this.controller.listen("storyWeb", Mojo.Event.webViewLinkClicked,
      this.linkClickedHandler);

    // Setup App Menu
    this.controller.setupWidget(Mojo.Menu.appMenu, News.MenuAttr, News.MenuModel);

};

StoryWebAssistant.prototype.cleanup = function(event) {
    this.controller.stopListening("storyWeb", Mojo.Event.webViewLinkClicked,
      this.linkClickedHandler);

};

//    linkClicked - handler for selected links, requesting new links to be opened
//    in same view
StoryWebAssistant.prototype.linkClicked = function(event) {
    Mojo.Log.info("Story Web linkClicked; event.url = ", event.url);
    var link = this.controller.get("storyWeb");
    link.mojo.openURL(event.url);
};

There are more options than what’s shown here. You can set the virtual page used to render through the attributes properties virtualpageheight and virtualpagewidth and set the minFontSize. You can add listeners for many Mojo web events, including webViewLoadProgress, webViewLoadStarted, webViewLoadStopped, and webViewLoadFailed to intervene during any web page load. There are even more events than that; you can find a complete list of events and descriptions in the webOS SDK.

To get to the webView, storyView will be modified to add another command menu, this time to present a button on the lower-left of the scene to launch the webView scene:

this.storyMenuModel = {
        items: [
            {iconPath: "images/url-icon.png", command: "do-webStory"},
            {},
            {items: []},
            {},
            {}
        ]};

        if (this.storyIndex > 0)    {
            this.storyMenuModel.items[2].items.push({
              icon: "back",
              command: "do-viewPrevious"
            });
        } else {
            this.storyMenuModel.items[2].items.push({
              icon: "", command: "",
              label: "  "
            });
        }

        if (this.storyIndex < this.storyFeed.stories.length-1)    {
            this.storyMenuModel.items[2].items.push({
              icon: "forward",
              command: "do-viewNext"
            });
        } else {
           this.storyMenuModel.items[2].items.push({
              icon: "", command: "",
              label: "  "
           });
        }

    this.controller.setupWidget(Mojo.Menu.commandMenu, undefined,
 this.storyMenuModel);

Next, push the storyWeb scene in storyView-assistant.js by adding another command handler in handleCommand() after those for do-viewNext and do-viewPrevious:

case "do-webStory":
    Mojo.Log.info("View Story as a Web View Menu; url = ",
      this.storyFeed.stories[this.storyIndex].url);
    Mojo.Controller.stageController.pushScene("storyWeb",
      this.storyFeed.stories[this.storyIndex].url);
    break;

As shown in Figure 5-13, the WebView widget is put into its own scene. It can also be declared within a scene so that a URL can be passed to it after it has been set up and the scene is active. For example, an application such as Email, which might have to present HTML content, can declare and set up a widget without the url property defined:

this.controller.setupWidget("storyWeb", {}, this.storyViewModel = {});

And when the URL is available, call the widget’s openURL method:

var webview =  this.controller.get("storyWeb");
webview.mojo.openURL(URL);

The web content will be displayed wherever the widget is declared within your scene; you can use another property, topMargin, to automatically scroll part of the scene to expose the top of the web view if that’s useful.

Figure 5-13. A WebView widget example

Designed to view an image in full screen, with support for zooming and panning while optionally paging between additional images, the ImageView widget is configured much like the WebView widget. You can use an ImageView for displaying single images, but it is intended as a scrolling viewer, flicking left and right through a series of images. The example in Figure 5-14 shows an implementation of the ImageView widget, partially paged to the right.

Figure 5-14. An ImageView widget example

There are application services supporting playback through the core audio and video applications, but for playback within your application, you can include audio and video objects that are based on the HTML 5 media extensions. You should use these objects when you want to maintain your application’s context or play content directly within your scene. The application services, which are discussed in Chapter 8, are the best options when you just want to play a music track or some video.

The Audio object provides playback of audio based on the HTML 5 audio element definition. However, you must create the object using JavaScript in one of your assistants, as Mojo doesn’t currently support creating objects directly through tags in HTML.

Audio objects are created from the Audio constructor in your assistant’s setup method, and to play the audio, you set the source and event handlers before calling the object’s play method. You can set up multiple audio objects to minimize delays when playing successive audio tracks.

Similarly, a Video object based on the HTML 5 video element definition provides video playback. As with the Audio object, you will play video after creating the Video object, setting the source and setting up event handlers.

Unlike audio, video playback requires coordination of the video sink through helper functions to freezeVideo and activateVideo. When an application is not in the foreground, it must release the video sink in case another active application needs to display video.

The media objects support multiple sources; both file-based and streaming sources are supported. You can learn more about the extent of the features and events supported by reviewing the HTML 5 spec at www.whatwg.org/specs/web-apps/current-work/.