Creating a percentage bar

How to

Create a percentage bar to visually display the amount of progress made towards completing a task.


Construct the percentage bar variable in the root of your class

var myPercentage:PercentageBar = new PercentageBar();
//placing this at the class root allows other 
//application elements to reference it

Initialize your percentage bar's attributes

//set location
myPercentage.x = 50;
myPercentage.y = 50;
//set size
myPercentage.width = 150;

//set percentage to a percentage between 0 and 1
myPercentage.progress = 0.1;

//OPTIONAL - change label from displaying numerical percentage
myPercentage.label = "Loading...";

//add to stage

Build Requirements

You must include the following class in your project:

import qnx.fuse.ui.progress.PercentageBar;


When you create a percentage bar, you declare the PercentageBar variable and set its properties to whatever values your application requires. To display the bar, add it to the stage with addChild(). The progress property can be set to a percentage value in decimal format between 0 and 1 anywhere in your application that the object is accessible to update the value of the percentage bar. Similarly, the label property can be set to display any string within the bar to replace the default numerical display.