Mojo.Widget.ProgressPill
Namespace Detail
Overview
When you need to show progress while downloading, loading from a database, or just completing a long operation for which you have a sense of the duration, you can use Progress Pill as the indicator. This indicator is designed to show a Pill 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, initialize its value at 0, then progressively update the model property 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="ProgressPill" id="progresspillId" class="progresspillClass" name="progresspillName"></div>
Properties | Required | Value | Description |
---|---|---|---|
x-mojo-element | Required | ProgressPill | Declares the widget as type 'ProgressPill'. |
id | Required | Any String | Identifies the widget element for use when instantiating or rendering. |
class | Optional | Any String | There is no default class for ProgressPill, but you can assign one if you want to apply custom styling. |
name | Optional | Any String | Adds a unique name to the ProgressPill widget; generally used in templates. |
Events
Mojo.Event.listen(this.controller.get("progresspillId"), Mojo.Event.progressIconTap, this.handleUpdate);
Event Type | Value | Event Handling |
---|---|---|
Mojo.Event.progressIconTap | {model: this.controller.model} | The icon in the bar was tapped, app-specific action but usually cancel operation. |
Mojo.Event.progressComplete | Progress is complete. |
Instantiation
this.controller.setupWidget("progresspillId", this.attributes = { title: "Progress Pill", image: "images/header-icon.png", modelProperty: "progress" }, this.model = { iconPath: "../images/progress-bar-background.png", progress: 0 } );
Attribute Properties
Attribute Property | Type | Required | Default | Description |
---|---|---|---|---|
modelProperty | String | Optional | value | Widget's model property name |
modelStartProperty | String | Optional | modelStartProperty | Name of start value property for this widget instance |
title | String | Required | Null | Dynamic title to show on download bar |
titleRight | String | Optional | Null | Dynamic title to show on the right side of the download bar |
image | String | Optional | Null | File path relative to app folder for dynamic image to show on bar |
icon | String | Optional | Null | CSS class for icon to display on the bar |
iconPath | String | Optional | Null | File path relative to app folder for icon |
Model Properties
Model Property | Type | Required | Default | Description |
---|---|---|---|---|
value | Integer | Required | Null | Current value of widget; if value is undefined or negative, will show in "button-mode" which gives a selected class |
title | String | Required | Null | Dynamic title to show on download bar |
titleRight | String | Optional | Null | Dynamic title to show on the right side of the download bar |
image | String | Optional | Null | File path relative to app folder for dynamic image to show on bar |
modelStartProperty | Integer | Optional | Null | Starting position of the progress bar |
Methods
To invoke a method on a widget, use the scene controller's get
method for the desired widget, and append mojo
followed by the method.
Example:
this.controller.get('myWidget').mojo.getValue()
Method | Arguments | Description |
---|---|---|
reset | Resets the progress to 0. | |
cancelProgress | Stops progress and leaves the progress pill visually where it was. |