pp108 : Progressbar

Progressbar

Progressbar

Displays a progress bar in the page.

Syntax

HTML 

 <div cordysType ="wcp.library.ui.ProgressBar" id=progressbarID/>
...
</div>

The progressbar component assumes that it is attached to an empty DIV or a SPAN tag. Initially, the class attribute of the property is set to "medium" and after the progress bar is filled, the class attribute becomes "dark".

To dynamically add and initialize this component, you can use the initializeHTMLElements or addType methods of the Application object.

The methods defined for this component are as follows:

Table 1. List of Methods

Method

Description

reset

Makes the progress bar to reset its GUI and enables the progress to begin again.

getStatus

Gets the value of the status property.

setStatus(iValue, sMessage)

Sets the status property that denotes the current status of the progress bar in %. When this property is set, the progress bar displays a defined message and a bar that is progressivley filled according to the completion status of the process. You can define the following parameters:

  • iValue: refers to incremental percentage progression that denotes the status in the progress bar. Possible values are integers within the range 1 to 100. When a value is set, the progress bar will be progressively filled by that %.
  • sMessage: refers to the text message that displays in the progress bar. If no value is set, the percentage progress is displayed by default.

start(nIndex)

Fills in the progress bar in such a way that it gets filled in the specified time limit.
The parameter nIndex takes time in milliseconds.

stop

Stops the progress bar.

Note:

  • The user can fill in the complete progress bar by setting the status to "100%" or by specifying the start method with a very short time as a parameter.
  • If the Progress bar component is hidden, then before calling the start() method ensure that the component is made visible and is rendered in the browser.

Example

 This sample shows the implementation and usage of the component:
 <\!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <script type="text/javascript" src="/cordys/wcp/application.js"></script>
 <script type="text/javascript">
 function start()
 {
 progressbar.start(document.getElementById("pTime").value);
 }
 </script>
 </head>
 <body>
 <h5>Progressbar Demo</h5>
 Time (In millisec) : <input class="input" type="text" id="pTime" value="2000">
 <button class="medium" onclick="start()">Start the Progress Bar</button>&nbsp;
 <button class="medium" onclick="progressbar.stop()">Stop the Progress Bar</button>&nbsp;
 <button class="medium" onclick="progressbar.setStatus(100)">Finish</button>&nbsp;
 <button class="medium" onclick="progressbar.reset()">Reset</button>
 <br><br>
 <div cordysType ="wcp.library.ui.ProgressBar" id="progressbar" style="width:50%;height:20" class="light"> </div>
 </body>
 </html>