All About Widgets

Widgets are dynamic UI controls that can be integrated within any application. They can be tailored to the application, yet provide reusable, stylistically consistent UI functions. The term “widgets” is widely used within web development, but Mojo widgets are different than other widgets. Mojo widgets have a defined behavior and have many options; they generate complex HTML and are easily styled with CSS.

It helps to understand the HTML that the widget generates. This is especially true for widgets like List and Dialog, for which the application specifies HTML templates that largely define the widget’s appearance.

Declaring Widgets

Widgets are declared in HTML as empty div tags:

<div id="my-toggle" x-mojo-element="ToggleButton"></div>

The x-mojo-element attribute specifies the widget type used to fill out the div when the HTML is added to the page. This can happen in either of the following circumstances:

  • When a scene is pushed and the scene’s view HTML includes widgets.

  • When a widget is specified in an HTML template used by another widget.

  • When the application inserts HTML which includes widgets, and makes a call to explicitly instantiate them.

In the second case, for example, if your scene includes a List widget whose list items include other widgets, a new set of the list item’s widgets are instantiated each time a new item is added to the list.

Setting Up a Widget

Before a widget is inserted into the scene, it must be set up. You should do this in the scene assistant’s ...

Get Palm webOS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.