ProgressBar

From WebOS101

Contents 1 Overview 2 Declaration 3 Events 4 Instantiation

Overview

For the Enyo version of this control, please see enyo.ProgressBar.

The Progress Bar is exactly the same as the Progress Pill except that you use "x-mojo-element="ProgressBar" in your scene file. Otherwise, you would code it and manage just as you do the Progress Pill. In the default style, there isn't room for a title, or any type of images on the bar, but the properties are supported nonetheless.

As with the Progress Pill, this is useful to show download progress, loading from a database or just a long operation where you have a sense of the duration, then you can use Progress Pill as the indicator. The indicator is designed to show a Bar image that corresponds to the model's value property, where a value of 0 has no Pill exposed and a value of 1 has the Pill in a complete position. To control the indicator you need to initialize it's value at 0, then progressively update the model property it until it reaches the value of 1. The best way to do this is by using an interval timer to which you can respond by increasing the progress indicator's value property incrementally and calling the updateModel function.

Declaration

<div x-mojo-element="ProgressBar" id="progressbarId" class="progressbarClass" name="progressbarName"></div>

Events

Mojo.Event.listen(this.controller.get("progressbarId"), Mojo.Event.progressIconTap, this.handleUpdate);

Instantiation

this.controller.setupWidget("progressbarId",
        this.attributes = {
            title: "Progress Bar",
            image: "images/header-icon.png",
            modelProperty: "progress"
        },
        this.model = {
            iconPath: "../images/progress-bar-background.png",
            progress: 0
        }
    );