Alloy UI

aui-progressbar  1.0.1

 
Filters

Class ProgressBar - extends Base

A base class for Progressbar, providing:
  • Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)
  • A visual means of showing progress of an ongoing operation
  • Can be enhanced via CSS styles to provide different colors, shapes and textures
  • The bar can move horizontally or vertically
  • The movement can be enhanced by using the Animation utility
Quick Example:
var progress = new A.ProgressBar({
boundingBox: '#boudingBox',
orientation: 'horizontal',
width: 300
})
.render();
Check the list of Configuration Attributes available for ProgressBar.

Constructor

ProgressBar ( config )
Parameters:
config <Object> Object literal specifying widget configuration properties.

Properties

ProgressBar.ATTRS - static Object

Static property used to define the default attribute configuration for the ProgressBar.

ProgressBar.HTML_PARSER - static Object

Object hash, defining how attribute values are to be parsed from markup contained in the widget's content box.

ProgressBar.NAME - static String

Static property provides a string to identify the class.

Properties inherited from Attribute:

Properties inherited from Base:

Configuration Attributes

height - int | String

Display height of the progressbar.
Default Value: 25

label - String

Display label of the progressbar. If not specified try to query using HTML_PARSER an element inside contentBox which matches aui-progressbar-text and get its innerHTML to be used as label.
Default Value: ''

max - int

Represents the top value for the bar. The bar will be fully extended when reaching this value. Values higher than this will be ignored.
Default Value: 100

min - int

Represents the lowest value for the bar. The bar will be totally collapsed when reaching this value. Values lower than this will be ignored.
Default Value: 0

orientation - String

Display orientation of the progressbar (i.e. vertical or horizontal).
Default Value: 'horizontal'

ratio - number

Calculate the ratio based on max and min values.

statusNode - String

DOM Node to display the satus bar of the progressbar. If not specified try to query using HTML_PARSER an element inside contentBox which matches aui-progressbar-status.
Default Value: Generated div element.

step - number

Calculate the progressbar step based on ratio value.

textNode - String

DOM Node to display the text of the progressbar. If not specified try to query using HTML_PARSER an element inside contentBox which matches aui-progressbar-text.
Default Value: Generated div element.

value - int | String

The value for the bar. Valid values are in between the minValue and maxValue attributes.
Default Value: 0

Configuration attributes inherited from Base:

Methods

_getContentBoxSize

protected number _getContentBoxSize ( )
Calculate the contentBox size based on the orientation of the progressbar. If the orientation is HORIZONTAL get the width, if the orientation is VERTICAL get the height.

_getPixelStep

protected number _getPixelStep ( )
Calculate the number of pixels to set the statusNode.

_getRatio

protected number _getRatio ( )
Calculate the ratio based on max and min values.

_getStep

protected number _getStep ( )
Calculate the progressbar step based on ratio value.

_renderStatusNode

protected void _renderStatusNode ( )
Render the statusNode of the progressbar.

_uiSetLabel

protected void _uiSetLabel ( val )
Invoked automatically by the UI_ATTRS Widget API when bind or sync the label attribute.
Parameters:
val <String> Display label

_uiSetOrientation

protected void _uiSetOrientation ( val )
Invoked automatically by the UI_ATTRS Widget API when bind or sync the orientation attribute.
Parameters:
val <String> Orientation

_uiSetValue

protected void _uiSetValue ( val )
Invoked automatically by the UI_ATTRS Widget API when bind or sync the value attribute.
Parameters:
val <String> Progress value

_uiSizeTextNode

protected void _uiSizeTextNode ( )
Sync the size of the ProgressBar when some UI attribute change.

renderUI

protected void renderUI ( )
Create the DOM structure for the ProgressBar. Lifecycle.

Events

heightChange

heightChange ( event )
Fires when the value for the configuration attribute 'height' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

labelChange

labelChange ( event )
Fires when the value for the configuration attribute 'label' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

maxChange

maxChange ( event )
Fires when the value for the configuration attribute 'max' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

minChange

minChange ( event )
Fires when the value for the configuration attribute 'min' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

orientationChange

orientationChange ( event )
Fires when the value for the configuration attribute 'orientation' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

ratioChange

ratioChange ( event )
Fires when the value for the configuration attribute 'ratio' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

statusNodeChange

statusNodeChange ( event )
Fires when the value for the configuration attribute 'statusNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

stepChange

stepChange ( event )
Fires when the value for the configuration attribute 'step' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

textNodeChange

textNodeChange ( event )
Fires when the value for the configuration attribute 'textNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

valueChange

valueChange ( event )
Fires when the value for the configuration attribute 'value' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event<Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

Events inherited from Base: