Flex Complex Control-ProgressBar Control - Adobe Flex

What is progressbar control in flex?

ProgressBar control provides a visual representation to the users about the progress of a task over time.

Class declaration

Below is the declaration for mx.controls.ProgressBar class:

Public properties

S.N.

Property & Description

1

alignToolTip : String = "Align"

The ToolTip that appears when the user hovers over the text alignment buttons.

2

conversion : Number

Number used to convert incoming current bytes loaded value and the total bytes loaded values.

3

direction : String

Direction in which the fill of the ProgressBar expands toward completion.

4

indeterminate : Boolean

Whether the ProgressBar control has a determinate or indeterminate appearance.

5

label : String

Text that accompanies the progress bar.

6

labelPlacement : String

7

maximum : Number

Largest progress value for the ProgressBar.

8

minimum : Number

Smallest progress value for the ProgressBar.

9

mode : String

Specifies the method used to update the bar.

10

percentComplete : Number

[read-only] Percentage of process that is completed.The range is 0 to 100.

11

source : Object

Refers to the control that the ProgressBar is measuring the progress of.

12

value : Number

[read-only] Read-only property that contains the amount of progress that has been made - between the minimum and maximum values.

Public Methods

S.N.

Method & Description

1

ProgressBar()

Constructor.

2

setProgress(value:Number, total:Number):void

Sets the state of the bar to reflect the amount of progress made when using manual mode.

Events

S.N.

Event & Description

1

complete

Dispatched when the load completes.

2

hide

Dispatched when an object's state changes from visible to invisible.

3

progress

Dispatched as content loads in event or polled mode.

4

show

Dispatched when the component becomes visible.

Methods inherited

This class inherits methods from the following classes:

  • mx.core.UIComponent
  • mx.core.FlexSprite
  • flash.display.Sprite
  • flash.display.DisplayObjectContainer
  • flash.display.InteractiveObject
  • flash.display.DisplayObject
  • flash.events.EventDispatcher
  • Object

Flex ProgressBar Control Example

Follow below steps to check usage of ProgressBar control in a Flex application by creating a test application:

Step

Description

1

Create a project with a name HelloWorld under a package com.wisdomjobs.client

2

Modify HelloWorld.mxml as explained below and skip rest of the files.

3

Compile and run the application to make sure business logic is working as per the requirements.

Below is the content of the modified mxml file src/com.wisdomjobs/HelloWorld.mxml.

After all the changes done, compile and run the application in normal mode as we did in Flex -Create Application chapter. If everything works fine with the application, this will produce below output

progress bar

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Adobe Flex Topics