www.webOShelp.net

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

Home Article Listing Palm webOS by O'Reilly - Chapter 1 Summary - Part 2 - UI Widgets

Palm webOS by O'Reilly - Chapter 1 Summary - Part 2 - UI Widgets

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


 

0 Comments

    Add Comment


      • >:o
      • :-[
      • :'(
      • :-(
      • :-D
      • :-*
      • :-)
      • :P
      • :\
      • 8-)
      • ;-)