Palm webOS: Developing Applications in Javascript Using the Palm Mojo Framework – Page 7
Supporting webOS’s user interface are UI Widgets and a set of standard styles for use with the widgets and within your scenes. Mojo defines default styles for scenes and for each of the widgets. You get the styles simply by declaring and using the widgets, and you can also override the styles either collectively or individually with custom CSS.
The List is the most important widget in the framework. The webOS user experience was designed around a fast and powerful list widget, binding lists to dynamic data sources with instantaneous filtering and embedding objects within lists including other widgets, including other lists, icons and images.
There are Simple Widgets, including buttons, checkboxes, sliders, indicators, and containers. The Text Field widget includes text entry and editing functions, including selection, cut/copy/paste, and text filtering. A Text Field can be used singly or in groups or in conjunction with a List widget.
Menu widgets can be used within specified areas on the screen; at the top and bottoms are the View and Command menus and they are completely under your control. The App Menu is handled by the system, but you can provide functions to service the Help and Preferences items or add custom items to the menu. Each of the various menu types is shown in Figure 1-10.
For Notifications, you can choose from a Popup Notification or a Banner Notification, both of which post notifications for applications in the notification bar.
Pickers and Viewers are more complex widgets. Pickers are for browsing and filtering files or contacts, or for selecting addresses, dates or times. If you want to play or view content within your application, such as audio, pictures, video or web content, then you would include the appropriate viewer.
A widget is declared within your HTML as an empty div with an x-mojo-element attribute. For example, the following declares a Toggle Button widget:
<div x-mojo-element=“ToggleButton” id=“my-toggle”></div>
The x-mojo-element attribute specifies the widget class used to fill out the div when the HTML is added to the page. The id attribute is required to reference the widget from your Javascript and must be unique.
Typically, you would declare the widget within a scene’s view file, then direct Mojo to instantiate the widget during the corresponding scene assistant setup method using the scene controller’s setupWidget method:
/ Setup toggle widget and an observer for when it is changed.
// this.toggle attributes for the toggle widget, specifying the ‘value’
// property to be set to the toggle’s boolean value
// this.togglemodel model for toggle; includes ‘value’ property, and sets
// ‘disabled’ to false meaning the toggle is selectable
//
// togglePressed Event handler for any changes to ‘value’ property
this.controller.setupWidget(’my-toggle’,
this.toggle = { property : ‘value’ },
this.toggleModel = { value : true, disabled : false });
this.controller.listen(’my-toggle’, Mojo.Event.propertyChange,
this.togglePressed.bindAsEventListener(this));
This code directs the scene controller to setup my-toggle passing a set of attributes, toggle, and a data model, togglemodel, to use when instantiating the widget and to register the togglePressed function for the widget’s propertyChange event. The widget will be instantiated whenever this scene is pushed onto the scene stack.
To override the default style for this widget, you would select #my-checkbox in your CSS and apply the desired styling (or use .checkbox to override the styling for all checkboxes in your app). For example, to override the default positioning of the toggle button to the right of its label so that it appears to the left of the label:
#my-toggle { float:left;
}
There’s a lot more to come so you shouldn’t expect to be able to use this to start working with any of these widgets at this point. Chapter 3 and 4 describe each of the widgets and styles in complete detail.