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

Home Getting Started with webOS Progress and Activity Indicators

Progress and Activity Indicators

Indicators can be used to show that activity is taking place even if it's not otherwise visible, or as a progress indicator.

Mojo has two types of indicators:

  • Activity indicator: animates without showing progress.
  • Progress indicator: shows activity and progress

Activity Indicators: Spinner

mojo spinner

Spinners are appropriate for applications with limited available space, or when it is difficult to estimate the duration of the activity. They come in two preset sizes: 128x128 and 32x32. The spinner is used in the core applications on every activity button.

Click here for an example of how to set up a spinner.

Progress Indicators

  • Progress Pill: a wide pill which is styled to match the View menu and the .palm-header scene style
  • Progress Bar: a narrow horizontal bar with a blue progress indicator
  • Progress Slider: intended for streaming media playback applications

Progress Pill

Progress pills are styled to match the Mojo button and header styles, and can be used to display the progress of a download or any long-running operation.

mojo progress pill

The indicator is desitned to show a pill image that corresponds to the model's value property, where 0 is no pill and 1 is a full pill. By updating the widget's model with values between 0 and 1, the pill will display varying stages of progress.

Palm recommens the use of an interval timer to update the progress pill display. At each callback, incase the progress indicator's value property and call the updateModel function.

Click here for an example of how to set up a progress pill.

Progress Bar

A thin horizontal bar indicating progress. Managed the same as the progress pill.

mojo progress bar

Click here for an example of how to set up a progress bar.

Progress Slider

A slider and progress pill in one handy control; ideal for streaming or progressive download media applications.

mojo progress slider

The Progress Slider is configured the same way as as Slider widget, but its value model property can be incremented like a Progress Pill, increasing from 0 to 1. Palm has not yet revealed an example of a slider in code; we'll update this article when they do.

That does it for indicators. Stay tuned for the scroller widget!

This is one of many daily development-related webOS articles. Grab the RSS feed to stay in the know!

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



    Add Comment

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