Back

addProgress

JS Py
Hello World
Content:
- Properties
- Methods

Adds a progress component into your app.

prg = ui.addProgress( parent, value, options, width, height ) → Object: Progress Component

If you pass a null value on initialization and you won't passed a variant option, the default variant will be indeterminate.

Otherwise if there's no variant option and the value is not null, it will automatically be a determinate variant.

Properties

These are the setter and getter properties for the addProgress Component.

absHeight
absLeft
absTop
absWidth
backColor
backImage
border
borderColor
borderStyle
circleSize
color
cornerRadius
disabled
fontFile
height
isVisible
left
margins
opacity
options
padding
parent
position
rotation
textColor
textSize
thickness
top
type
value
variant
visibility
width

Example - Progress control implementation

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.childSpacing = "Even"

        // Indeterminate Linear
        this.prog1 = ui.addProgress(this.main, 40, "linear", 0.7)

        // Determinate Linear
        this.prog2 = ui.addProgress(this.main, null, "Linear,Secondary,indeterminate", 0.7)

        // Determinate Circular
        this.prog3 = ui.addProgress(this.main, 50, "Circular")

        // Indeterminate Circular, enlarge and secondary
        this.prog4 = ui.addProgress(this.main, null, "Circular,Secondary,indeterminate")
        this.prog4.circleSize = 100
    }
}
class Main extends App
    onStart()
        # Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.childSpacing = "Even"

        # Indeterminate Linear
        this.prog1 = ui.addProgress(this.main, 40, "linear", 0.7)

        # Determinate Linear
        this.prog2 = ui.addProgress(this.main, null, "Linear,Secondary,indeterminate", 0.7)

        # Determinate Circular
        this.prog3 = ui.addProgress(this.main, 50, "Circular")

        # Indeterminate Circular, enlarge and secondary
        this.prog4 = ui.addProgress(this.main, null, "Circular,Secondary,indeterminate")
        this.prog4.circleSize = 100
Copy All       Run      

Example - Setting progress value

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.childSpacing = "Even"

        // Add an indeterminate linear progress control to the main layout
        this.prog = ui.addProgress(this.main, 0, "Linear", 0.7)

        // Add a button control to the main layout
        this.btn = ui.addButton(this.main, "Increment")

        // Add a callback handler when the button is touched
        this.btn.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        // Increment the value of the progress control by 10
        if( this.prog.value < 100 )
        {
            this.prog.value += 10
        }
        else
        {
            ui.showPopup( "Progress is complete!" )
        }
    }
}
class Main extends App
    onStart()
        # Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.childSpacing = "Even"

        # Add an indeterminate linear progress control to the main layout
        this.prog = ui.addProgress(this.main, 0, "Linear", 0.7)

        # Add a button control to the main layout
        this.btn = ui.addButton(this.main, "Increment")

        # Add a callback handler when the button is touched
        this.btn.setOnTouch( this.onTouch )

    onTouch()
        # Increment the value of the progress control by 10
        if this.prog.value < 100 :
            this.prog.value += 10
        else:
            ui.showPopup( "Progress is complete!" )
Copy All       Run      

Methods

The following methods are available on the Progress object:

animate( anim, duration )
bringForward( zIndex )
destroy()
getPosition( options ) → Object
gone()
hide()
sendBackward( zIndex )
setBorder( width, clr, style )
setCornerRadius( tl, tr, bl, br, mode )
setMargins( left, top, right, bottom, mode )
setOnContextMenu( callback )
setOnTouch( callback )
setPadding( left, top, right, bottom, mode )
setPosition( left, top, mode )
setScale( x, y )
setSize( width, height )
show()
Boolean: Sets or returns the disabled state of the control.
Boolean: Returns whether the control is visible or not.
Number: the initial value of the progress component.
Number: Fraction of the screen width. [0-1]
Number: Fraction fo the screen height. [0-1]
Number: The time in milliseconds.
Number: The z-index. A negative value behaves like `sendBackward` method.
Number: The z-index. A positve value behaves like `bringForward` method.
Number: Border-left thickness in pixels.
Number: Top-Left border radius in pixels.
Number: Top-Right border radius in pixels.
Number: Bottom-Left border radius in pixels.
Number: Bottom-Right border radius in pixels.
Number: Fraction of the parent width.
Number: Fraction of the parent height.
Number: Fraction of the component width.
Number: Fraction of the component height. [0-1]
Number: Fraction of the component width. [0-1]
Number: Fraction of the parent width. [0-1]
Number: Fraction of the screen height. [0-1]
Number: The x-scale of the component.Values less than `0` is smaller than the normal. While values greater than `1` is greater than the normal.
Number: The y-scale of the component. Values less than `1` is smaller than the normal. While vaues greater than `1` is greater than the normal.
Number: Fraction of the parent height. [0-1]
Number: Returns the absolute height of the control in pixels.
Number: Returns the absolute distance of the control from the left in pixels.
Number: Returns the absolute distance of the control from the top in pixels.
Number: Returns the absolute width of the control in pixels.
Number: Sets or returns the border thickness in pixels.
Number: Sets or returns the size of the circular progress control. This will assume a pixel unit.
Number: Sets or returns the corner radius in pixels.
Number: Sets or returns the height of the control as a fraction of the parent control.
Number: Returns the distance of the control from the left.
Number: Sets or returns the opacity of the control.
Number: Sets or returns the angle of rotation in degrees.
Number: Sets or returns the size of the text within the control.
Number: Sets or returns the thickness of the circular stroke.
Number: Returns the distance of the control from the top.
Number: Sets or returns the value of the progress control.
Number: Sets or returns the width of the control as a fraction of the parent control.
String: comma “,” separated: “Color: `Primary` `Secondary`
`Type`: `Circular` `Linear`
`Variant`: `Determinate` `Indeterminate`”
String: “The type of animation. Here are the available values
`bounce` `flash` `pulse` `rubberBand` `shakeX` `shakeY` `headShake` `swing` `tada` `wobble` `jello` `heartBeat`
`Back Entrances `backInDown` `backInLeft` `backInRight` `backInUp`
`Back Exits `backOutDown` `backOutLeft` `backOutRight` `backOutUp`
`Bouncing Entrances `bounceIn` `bounceInDown` `bounceInLeft` `bounceInRight` `bounceInUp`
`Bouncing exits `bounceOut` `bounceOutDown` `bounceOutLeft` `bounceOutRight` `bounceOutUp`
`Fading entrances `fadeIn` `fadeInDown` `fadeInDownBig` `fadeInLeft` `fadeInLeftBig` `fadeInRight` `fadeInRightBig` `fadeInUp` `fadeInUpBig` `fadeInTopLeft` `fadeInTopRight` `fadeInBottomLeft` `fadeInBottomRight`
`Fading exits `fadeOut` `fadeOutDown` `fadeOutDownBig` `fadeOutLeft` `fadeOutLeftBig` `fadeOutRight` `fadeOutRightBig` `fadeOutUp` `fadeOutUpBig` `fadeOutTopLeft` `fadeOutTopRight` `fadeOutBottomRight` `fadeOutBottomLeft`
`Flippers `flip` `flipInX` `flipInY` `flipOutX` `flipOutY`
`Lightspeed `lightSpeedInRight` `lightSpeedInLeft` `lightSpeedOutRight` `lightSpeedOutLeft`
`Rotating Entrances `rotateIn` `rotateInDownLeft` `rotateInDownRight` `rotateInUpLeft` `rotateInUpRight`
`Rotating Exits `rotateOut` `rotateOutDownLeft` `rotateOutDownRight` `rotateOutUpLeft` `rotateOutUpRight`
`Specials `hinge` `jackInTheBox` `rollIn` `rollOut`
`Zooming Entrances `zoomIn` `zoomInDown` `zoomInLeft` `zoomInRight` `zoomInUp`
`Zooming Exits `zoomOut` `zoomOutDown` `zoomOutLeft` `zoomOutRight` `zoomOutUp`
`Sliding Entrances `slideInDown` `slideInLeft` `slideInRight` `slideInUp`
`Sliding Exits `slideOutDown` `slideOutLeft` `slideOutRight` `slideOutUp`.”
String: “The mode of the measurements. Values can be `px` or `%`”
String: “Border color in hexadecimal form `#rrggbb`”
String: “Border-styles. Values can be `dotted` `dashed` `solid` `double` `groove` `ridge` `inset` and `outset`. Default is `solid`”
String: “Unit. Values are `px` `rem` or `%`.”
String: “`px` or `%`”
String: “The size thickness mode. Can be `px`”
String: “Unit of measurement. Can be `px` or `%` or any css unit of measurement.”
String: A hexadecimal color of the form #rrggbb
String: The path to your image file.
String: Sets or returns the border color. Color is in hexadecimal form #rrggbb
String: Sets or returns the border style. Values can be dotted, dashed, solid, double, groove, ridge, inset and outset. Default is solid.
String: Sets or returns the theme color. Values can be Default Primary or Secondary
String: Sets or returns the relative path to the font-family use.
String: Sets or returns the options of the control.
String: Sets or returns the color of the text.
String: Sets or returns the type of the Progress Component. Values can be Linear or Circular
String: Sets or returns the variant of the progress component. Values can be Determinate or Indeterminate.
String: Sets or returns the visibility of the control.
Object: The parent layout where to add the prgress component.
Object: The pointer event object.
Object: The click event object.
Object: Returns the parent layout control.
Object: Returns the position of the control. The returned object has left top right and bottom props.
List: Sets or returns the margin of the control. Works on controls with Linear parent only. You can also pass a number to set equal margins for all sides.
List: Sets or returns the padding of the control. You can also pass a number to set equal padding for all sides.
function( event )
function( event )
prg.animate
Animate the component
prg.bringForward
Bring this component forward by a given z-index
prg.destroy
Destroy the component
prg.getPosition
Returns the position of the component. The return object is of the form `{ left, top, right, bottom
prg.gone
Destroy the component
prg.hide
Hide the component
prg.sendBackward
Bring this component backward by a given z-index
prg.setBorder
Sets the border line for the component container
prg.setCornerRadius
Sets the corner radius of the component
prg.setMargins
Sets the margin of the component
prg.setOnContextMenu
Adds a callback function on right click
prg.setOnTouch
Adds a callback handler when the component is touch
prg.setPadding
Sets the padding component container
prg.setPosition
Sets the position of the component relative to its parent dimensions
prg.setScale
Sets the x and y scaling of the component
prg.setSize
Sets the size of the component
prg.show
Show the component