ProgressBar
ProgressBar is a process status indicator that can either work on client side or integrate with server side via ajax.
Documentation
<style type="text/css">
.animated .ui-progressbar-value {
background-image: url("#{resource['demo/images/pbar-ani.gif']}");
}
</style>
<script type="text/javascript">
//<![CDATA[
function start() {
PF('startButton1').disable();
window['progress'] = setInterval(function() {
var pbClient = PF('pbClient'),
oldValue = pbClient.getValue(),
newValue = oldValue + 10;
pbClient.setValue(pbClient.getValue() + 10);
if(newValue === 100) {
clearInterval(window['progress']);
}
}, 1000);
}
function cancel() {
clearInterval(window['progress']);
PF('pbClient').setValue(0);
PF('startButton1').enable();
}
//]]>
</script>
<h:form>
<p:growl id="growl" />
<h3 style="margin-top:0">Client ProgressBar</h3>
<p:commandButton value="Start" id="start" type="button" onclick="start()" widgetVar="startButton1"/>
<p:commandButton value="Cancel" id="cancel" type="button" onclick="cancel()" />
<br /><br />
<p:progressBar id="progressBarClient" widgetVar="pbClient" style="width:300px"/>
<h3>Ajax ProgressBar</h3>
<p:commandButton value="Start" type="button" onclick="PF('pbAjax').start();PF('startButton2').disable();" widgetVar="startButton2" />
<p:commandButton value="Cancel" action="#{progressBarView.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();" />
<br /><br />
<p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress1}" labelTemplate="{value}%" styleClass="animated" global="false">
<p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl" oncomplete="PF('startButton2').enable()"/>
</p:progressBar>
<h3>Ajax ProgressBar (with long running method)</h3>
<p:commandButton value="Start" type="button" onclick="PF('pbAjaxLong').start();PF('startButton3').disable();" widgetVar="startButton3" actionListener="#{progressBarView.longRunning}"/>
<p:commandButton value="Cancel" action="#{progressBarView.cancel}" oncomplete="PF('pbAjaxLong').cancel();PF('startButton3').enable();" />
<br /><br />
<p:progressBar widgetVar="pbAjaxLong" ajax="true" value="#{progressBarView.progress2}" labelTemplate="{value}%" styleClass="animated" global="false" interval="500">
<p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl" oncomplete="PF('startButton3').enable()"/>
</p:progressBar>
<h3>Static Display</h3>
<p:progressBar value="50" labelTemplate="{value}%" displayOnly="true"/>
<h3>Indeterminate</h3>
<p:progressBar id="progressBarIndeterminate" style="height:6px" mode="indeterminate"/>
</h:form>
@Named
@ViewScoped
public class ProgressBarView implements Serializable {
private Integer progress1;
private Integer progress2;
public Integer getProgress1() {
progress1 = updateProgress(progress1);
return progress1;
}
public Integer getProgress2() {
progress2 = updateProgress(progress2);
return progress2;
}
public void longRunning() throws InterruptedException {
progress2 = 0;
while (progress2 == null || progress2 < 100) {
progress2 = updateProgress(progress2);
Thread.sleep(500);
}
}
private Integer updateProgress(Integer progress) {
if(progress == null) {
progress = 0;
}
else {
progress = progress + (int)(Math.random() * 35);
if(progress > 100)
progress = 100;
}
return progress;
}
public void setProgress1(Integer progress1) {
this.progress1 = progress1;
}
public void setProgress2(Integer progress2) {
this.progress2 = progress2;
}
public void onComplete() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Progress Completed"));
}
public void cancel() {
progress1 = null;
progress2 = null;
}
}
