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
- Included jQuery files
- First html form
- Launch the backend job process
- About backend job
- Checking progress of backend job
- Install script
- Testing automation
In order to access this example, please access the url below or "jQuery Progress Bar" link from the toppage.
Then the page below will appear.
Push the start button, then dummy backend process runs in the server side, and the progressbar shows the state of progress.
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.
In order to change the theme of jQuery, please take a look at jQuery Dialog. The way to do that is same.
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.
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.
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.
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
- Sleep 200 milliseconds
- Increment progress by calling MyJob.progress()
MyJob.progress() is function to increase progress by updating job_progress table.
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.
This example uses database table, so you have to setup it, if you manually do. The install script is at "/install/install.alns".
The necessary part for this example is below.
This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Progress Bar example.