jQuery Progress Bar example

jQuery Progressbar is very useful UI parts to make web application user wait. In this page, I'll show you the example of managing server side backend process with the jQuery ProgressBar.

Access and work the example

In order to access this example, please access the url below or "jQuery Progress Bar" link from the toppage.

http://localhost:8080/samples/progressbar/

Then the page below will appear.

jQuery progressbar example page

Push the start button, then dummy backend process runs in the server side, and the progressbar shows the state of progress.

top of this page

Implementation

This example has dummy server side process. The java script watch it periodically and update the status of the progressbar.

The source code is in "ALINOUS_HOME/samples/progressbar/" folder.

jQuery progressbar source code

top of this page

Included jQuery files

This example uses css and JavaScript files of jQuery, listed below.

In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.

top of this page

First html form

At first, the form made from the html below appears when we access this example.

It is same with the first picture of this page. This form is shown when the variable "$showProgress" is 0. In this parts, it uses Case control by using "alns:if".

After you push the "start" button, the backend job will launched.

top of this page

Launch the backend job process

After pushing the "start" button, next program will be execused.

The function MyJob.startJob() launches the job and the isRunning() function returns 1. Next, the server returns html below. This time "$showProgress" is 1, then the html below is enabled.

And there is Javascript section under the div tag named "progressbar" and the form. This script also become enabled, and the div tag become the progress bar.

The jQuery plugin function progressbar() make the div tag into progress bar. The function specified in "complete" property will submit this page by using form named "frm" when it complete.

The function progress() is one to check the progress of backend job process. This function is called periodically while the job doesn't complete.

This mechanism is implemented by using setTimeout() function of JavaScript.

top of this page

About backend job

The job was launched by calling the MyJob.startJob() function. The source code is below.

MyJob.startJob() launch new Thread by calling Thread.execute().

In this example, the interface of threads are job_progress table, so this make new record to report the progress. The synchronized block is guarding this code executed by multiple threads.

MyJob.run() is dummy job. Repeat

  1. Sleep 200 milliseconds
  2. Increment progress by calling MyJob.progress()

MyJob.progress() is function to increase progress by updating job_progress table.

top of this page

Checking progress of backend job

The progress bar checks the progress by accessing "/samples/progressbar/watch.alns".

This code calls MyJob.getParsentage(), and the source code is below.

This function accesses job_progress table, and get the status. And convert it into percentage.

If the record does not exists, it means the job has been done, so it returns 100.

top of this page

Install script

This example uses database table, so you have to setup it, if you manually do. The install script is at "/install/install.alns".

jQuery progressbar's install script

The necessary part for this example is below.

Testing automation

This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Progress Bar example.



Go to Top