The Progress Bar widget provides users a visual indication of how close a process is to completion. It prevents the user thinking that something has gone wrong when the server or client-side widget is busy. It also provides some indication of how long they are likely to have to wait before the operation is completed.
The Progress Bar widget provides users a visual indication of how close a process is to completion. It prevents the user thinking that something has gone wrong when the server or client-side widget is busy. It also provides some indication of how long they are likely to have to wait before the operation is completed.
The Progress Bar consists of a box containing a bar showing progress in operation. It is familiar to many computer users.
No user interactions are supported. The Progress Bar widget overlays part of the page and prevents user interactions occurring until it completes.
A progress indicator operates in one of two modes, active and passive. In active mode the indicator periodically queries the server to obtain the latest percentage complete state. widget:progress contains the widget:refresh element defining the update interval. The response:progress element defines the operation percentage complete as an integer.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
xmlns:template="http://www.volantis.com/xmlns/marlin-template">
<head>
<title>Progress Indicator Widget</title>
<link rel="mcs:theme" href="/themes/main.mthm"/>
<link rel="mcs:theme" href="/themes/progressbar.mthm"/>
<link rel="mcs:layout" href="/layouts/main.mlyt"/>
</head>
<body id="body">
<template:apply href="templates/demo-main.xdtpl">
<template:binding name="title" value="Progress w/AJAX"/>
<template:binding name="content">
<template:complexValue>
<widget:progress id="progressBar" class="widget">
<widget:refresh id="refresh" src="service/progress" interval="4"/>
</widget:progress>
</template:complexValue>
</template:binding>
</template:apply>
</body>
</html>The following response sets the progress bar to 50%.
<?xml version="1.0" encoding="UTF-8"?>
<response:response xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
xmlns:response="http://www.volantis.com/xmlns/2006/05/widget/response">
<response:head/>
<response:body>
<response:progress>50</response:progress>
</response:body>
</response:response>In passive mode the indicator waits for one of its JavaScript methods to be called.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
<head>
<title>widget:progress</title>
<style type="text/css">
widget|progress {
color: #23516a;
height: 1em;
padding: 2px;
}
</style>
<widget:script id="progress"> $W('progressBar').progress(15); </widget:script>
<widget:script id="reset"> $W('progressBar').reset() </widget:script>
</head>
<body id="body">
<widget:progress id="progressBar"/>
<div>
<widget:button action="progress#invoke">progress</widget:button>
<widget:button action="reset#invoke">reset</widget:button>
</div>
</body>
</html>You can use the theme editor to set the style properties for the Progress Bar widget, including box properties, the background color of the box, and the color of the progress bar.
A progress bar has a border by default as otherwise a user may not know how far the bar has to go because by default the box is transparent.
If the device does not support the Progress Bar then it is ignored.
This widget supports JavaScript. See JavaScript support for details.