Introducing ProgressBar

ProgressBar is the component used to notify the user of the progress of the operation. When uploading/downloading a file or opening a page that takes a long time to load, it provides progress information so that the user can visually check how long it will take to complete the operation and whether it is proceeding normally.

Progress status displays the progress of the current operation relative to the total operation by filling in the blank area of the square arranged in a long bar. Depending on the property setting, you can set the shape, speed, and direction of the ProgressBar.

Example

The following is an actual example of ProgressBar being used. It provides ProgressBar along with speed, capacity, and time while downloading a file, allowing the user to check progress and predict how long to wait for completion.

ProgressBar can also be used when loading a page. For example, it may take a long time to open a webmail page, but as the user, there is no way to check if the page is opening normally. In the worst case, even if there is a problem with the service, it is not possible to recognize it, so there is a case where you are constantly looking at the blank screen and waiting. However, by displaying the page loading status as ProgressBar, the user can see the progress and determine if there is a problem.

Creating ProgressBar

Select ProgressBar from the toolbar and drag it to an appropriate size on the form to create it.

ProgressBar does not operate only with basic creation. Based on the information that can measure progress, such as time and file size, it is necessary to properly change the location of the ProgressBar bar. This needs to be written in the script, which is covered in more detail in the next chapter.

Run it with QuickView (Ctrl + F6).

Displaying Progress Status

ProgressBar is used to provide the user with the progress of the operation. Therefore, there must be information to indicate progress status, and such information can be received through the server or service.

Example

The following is an example of ProgressBar. For simplicity of the example, task progress status information is replaced with a timer, so it operates at a constant rate over time. In addition, two ProgressBars with different properties are placed to show how the shape and operation change according to the property settings.

sample_progressbar_02.xfdl

Core features used in the example

max

This is the property that sets the maximum value that the pos property of ProgressBar can have.

pos

This is the property that sets the location of the progress bar displayed on ProgressBar.

step

This is the property that sets the value added to the pos property when executing the stepIt method of ProgressBar.

smooth

This is the property that sets whether to display the progress bar of ProgressBar in a continuous form without spaces.

stepIt

This is the method that changes the location of the progress bar as much as the step property value.

setTimer

This is the method that creates the timer that periodically generates the ontimer event.

killTimer

This is the method that deletes the timer created with the setTimer method.

How to implement an example

Create the ProgressBar , Button components from the toolbar and place them on the form as shown in the example screen.

Set the properties of the created ProgressBar00, ProgressBar01 as follows.

• Setting of ProgressBar00

• Setting of ProgressBar01

Set the properties of the created Button00, Button01 as follows.

• Setting of Button00

• Setting of Button01

• onclick Event Function of Start Button

Register the onclick event function of the Start button and write the script as follows.

Create the timer that generates the ontimer event every 100 milliseconds (0.1 seconds). Set the timer ID to 0.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.setTimer(0, 100);
};

• ontimer Event Function of the form

Add the ontimer event function called by the timer to the form and write the script as follows.

this.Form_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
    //Calculate the progress to be displayed on each progress bar.
    var varProgressValue00 = parseInt((this.ProgressBar00.pos / this.ProgressBar00.max) * 100);
    var varProgressValue01 = parseInt((this.ProgressBar01.pos / this.ProgressBar01.max) * 100);

    //Timer with ID 0
    if(e.timerid == 0)
    {
        //End the timer when the process is complete.
        if(this.ProgressBar00.pos == this.ProgressBar01.max && this.ProgressBar01.pos == this.ProgressBar01.max)
        {
            this.killTimer(0);
        }

        //Change each progress bar as much as the step property value.
		this.ProgressBar00.stepIt();
		this.ProgressBar00.text = varProgressValue00 + " %";
		
		this.ProgressBar01.stepIt();
		this.ProgressBar01.text = varProgressValue01 + " %";
    }
};

• onclick Event Function of Reset Button

Register the onclick event function of the Reset button and write the script as follows.

Initialize the bar location information of each ProgressBar and stop the timer.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.ProgressBar00.pos = 0;
	this.ProgressBar00.text = "ProgressBar00";
	
	this.ProgressBar01.pos = 0;
	this.ProgressBar01.text = "ProgressBar01";
	
	this.killTimer(0);
};

Run QuickView (Ctrl + F6) to check the result.

Press the Start button and check that each progress bar changes over time. ProgressBar00 runs from left to right and ProgressBar01 runs from right to left. When the progress bar progresses to the end, it automatically stops.

Clicking the Reset button resets all progress bars.