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

Home Tutorials
webOS Tutorials

Events in Mojo

The HTML DOM provides a very powerful event model in which DOM elements publish events (e.g., click, load, resize, etc.) and JavaScript code subscribed to those events is triggered and executed when those events occur. Mojo provides a very similar event model for use in webOS applications.

There are three unique event types in Mojo that support different parts of the webOS UI system:

  • System UI events (e.g. drag, flick, hold)
  • Widget events (e.g. listTap, propertyChange)
  • Application UI events: (e.g. scrollStarting, stageActivate, stageDeactivate)

The full list of event object properties for Mojo.Event has not yet been released publicly, but you can find a list of the elements revealed so far over at our Mojo API reference. You can also define custom events in Mojo using Mojo.Event.make() (although Palm has not yet revealed exactly how).

Listening for events

When an event occurs, code "listening" for that event is notified. There are three ways to subscribe to events on any DOM element:

Mojo.Event.listen() was created in case there are issues with addEventListener or the observe() method (a Prototype framework method), but Palm suggests that these methods are pretty much equivalent and that "at this point", all work equally well in Mojo.

Note that Prototype and getElementByID don't work across multiple stages, so for multi-stage apps you must use this.controller.listen() or this.controller.get() to pass or retrieve an element by DOM ID.

In addition to listening for events that are triggered based on user input, you can also propagate events to event handlers programmatically using Mojo.Event.send(). For example, this would enable you to trigger a button click event without a user actually tapping a button.


Click here to see an example of how to subscribe to events using Mojo.Event.listen() and this.controller.listen().

Removing Listeners for Events

To stop listening for an event, use one of three methods (whichever matches your event listener setup call):

Using Events with Widgets

Many widgets are preconfigured to dispatch events, usually to the widget's element (the div with the x-mojo-element attribute).  Palm says a complete list of the events dispatched by each widget will be provided with the SDK.  In the meantime check out this example of Event listening on a widget, as well as other examples in our UI widget list.

This article is the first of many daily programming-related webOS articles.  Grab the RSS feed to stay in the know.

Much of the information in this article was presented in Chapter 3 of Palm webOS by Mitch Allen.



Mojo UI Widgets - Setup, Data Model Updates and Event Handling

Mojo Widgets are dynamic user interface controls provided by webOS to help application developers build feature-rich interactive applications. Types of widgets include static lists, dynamic lists, button controls, selectors, text fields, menus, dialogs, pickers, and viewers. For an up-to-date list of all widgets, check out our UI Widget reference. (At time of writing, the list may still be subject to change.)

Note: The info in this article was covered in Chapter 3 of Palm webOS by Mitch Allen. (For additional detail, consider purchasing access to the Rough Cuts book; a real bargain at $17.99.)

Common methods for declaring, instantiating and managing widgets make it possible to start using a wide variety of widgets in your application. In a sentence, Mojo widgets are set up through sceneController.setupWidget(), visually customized with CSS styles and managed through Mojo events.



webOS and AJAX

webOS skill level: Beginner
Technologies covered: Ajax
Prerequisite knowledge: Advanced-level HTML, CSS, and Javascript

Ajax and webOS

First off: What is Ajax? From wikipedia:

Ajax...is a group of interrelated web development techniques used to create interactive web applications or rich Internet applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.

Basically, if your goal is to create an interactive web page that makes use of remote data (information that does not reside on the user's local device) and responds to user input without reloading a new page, you want to use Ajax. But what does this mean for webOS developers?

So far, Palm has not specifically provided any best practices when it comes to transferring data to and from remote servers. Will there be a custom Mojo function for this? Maybe...however, Palm is really stressing that webOS applications are based on the Ajax programming paradigm so it is also quite possible that remote data transfer will be done via existing Ajax functionality built in to JavaScript or the Prototype JavaScript framework that will be bundled with webOS devices. This tutorial will get you up to speed on these methods.


1 Comment

webOS and GStreamer

gStreamer logoSo we've learned from Chapter 1 of Palm webOS by O'Reilly that the webOS "media server" is based on GStreamer:

The media server is based upon gstreamer and includes support for numerous audio and video codecs, all mainstream image formats, and supports image capture through the built-in camera. Video and audio capture is not supported in the initial webOS products, but is inherently supported by the architecture. Video and audio playback supports both file and stream-based playback.

What exactly is GStreamer, and what does this mean for our applications? From the GStreamer website:

GStreamer is a library for constructing graphs of media-handling components. The applications it supports range from simple Ogg/Vorbis playback, audio/video streaming to complex audio (mixing) and video (non-linear editing) processing. Applications can take advantage of advances in codec and filter technology transparently. Developers can add new codecs and filters by writing a simple plugin with a clean, generic interface.

Basically, GStreamer is a framework for creating streaming multimedia applications, and one of the most common uses of the GStreamer framework is to build a media player, which is presumably what Palm has done for the Pre. One of the UI widgets mentioned in the first chapter of Palm webOS is a viewer widget, which allows you to "play or view content within your application, such as audio, pictures, video or web content". The viewer widget might invoke GStreamer components to display the first three types of media and webkit components to display web content.



From the webcast: Local Storage, Notifications and Services

After successfully building a webOS application in the tutorial section of the webcast, Mitch Allen proceeded to uncover a few details about support for local storage, banner notifications, and services in webOS.

Local Storage

There will be three types of local storage available to applications in webOS:

  • The HTML5 Database API
  • Depot: A Mojo wrapper around the HTML5 database API. It will include basic functions to create and open databases and get and store simple objects. It's designed to simplify things for people not interested in "getting their hands dirty" in the full API. A few sample function calls were provided:


Page 5 of 7

What's your primary background?