www.webOShelp.net

Article Index
Palm webOS by O'Reilly - Chapter 1 Summary - Part 2
Stages and Scenes
UI Widgets
Palm webOS Architecture
All Pages

UI Widgets

• webOS UI supported by UI Widgets and set of standard styles for use in scenes
• Default styles can be overridden with custom CSS
• List is most important widget in framework
• webOS user experience designed around fast and powerful list widget
• Lists can be bound to dynamic data sources with instant filtering and embedding objects within lists including:
  • other widgets
  • other lists
  • icons
  • images
• Simple widgets include:
  • buttons
  • checkboxes
  • sliders
  • indicators
  • containers
• Text Field widget includes text entry and editing functions including:
  • selection
  • cut/copy/paste
  • text filtering
  • Can be used alone, in groups, in conjunction with a list widget
• Menu widgets can be used in specified areas on the screen
• At top and bottoms are View and Command menus - completely under your control
• App Menu is handled by system, can provide functions to service Help and Preferences items or add custom items
• Notifications widgets include
  • Popup Notification
  • Banner Notification
• Both post notifications for apps in notification bar
• More complex widgets: Pickers and Viewers
• Pickers: browsing and filtering files or contacts, selecting addresses, dates or times
• Viewers: Playing or viewing content in your app including audio, pictures, video or web content

Using Widgets

• Widget declared as empty div with x-mojo-element attribute
• Toggle Button widget example:

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

• x-mojo-element attribute specifies widget class that fills div when HTML is added to page
• id is required to reference widget - must be unique
• Typically, delcare widget within scene's view file, then direct mojo to instantiate widget during corresponding scene assistant setup method using 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));

• code directs scene controller to set up:
  • my-toggle passing a set of attributes
  • toggle
  • toggle model - data model to use when instantiating the widget and registering the togglePressed function for the widget's propertyChange event
• Widget will be instantiated whenever scene is pushed onto the scene stack
• To override default style for widget, use #my-checkbox selector (or .checkbox to override all checkbox styling in your app)
• Example:

#my-toggle {float:left;}

Services

• webOS System UI, application model and UI widgets alone would provide unique opportunities for building web apps
  • such apps would lack access and integration that comes with native OS platform
• Services functions complete webOS platform, "fulfilling its mission to bridge the web and native app worlds"
• Through services APIs, can access webOS hardware features:
  • location services
  • phone
  • camera
  • core app data and services
• Almost all core apps can be launched from within an app
• Service is on-device server for any resource, data or configuration that is exposed through framework for use in an app.
• Service can be performed by native OS, app, or server in the cloud
• "Model is very powerful as evidenced by initial list of offered services"
• Services differ from rest of framework because they are called through single controller function: serviceRequest
• Request passes JSON object specific to claled service and specifies callbacks for success/failure of request
• Full description in chapter 7