ProgressBar
ProgressBar is a process status indicator that can either work on client side or integrate with server side via ajax.
Source
<h:form>
<p:growl id="growl" />
<h3>Client Side ProgressBar</h3>
<p:commandButton value="Start" id="start" type="button" onclick="start()" widgetVar="startButton1"/>
<p:commandButton value="Cancel" id="cancel" type="button" onclick="cancel()" />
<p:progressBar id="progressBarClient" widgetVar="pbClient" style="width:300px"/>
<h3>Ajax ProgressBar with Growl Integration</h3>
<p:commandButton value="Start" type="button" onclick="pbAjax.start();startButton2.disable();" widgetVar="startButton2" />
<p:commandButton value="Cancel" actionListener="#{progressBean.cancel}" oncomplete="pbAjax.cancel();startButton2.enable();" />
<p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBean.progress}" labelTemplate="{value}%" styleClass="animated">
<p:ajax event="complete" listener="#{progressBean.onComplete}" update="growl" oncomplete="startButton2.enable()"/>
</p:progressBar>
</h:form>
<script type="text/javascript">
function start() {
startButton1.disable();
window['progress'] = setInterval(function() {
var oldValue = pbClient.getValue(),
newValue = oldValue + 10;
pbClient.setValue(pbClient.getValue() + 10);
if(newValue == 100) {
clearInterval(window['progress']);
}
}, 1000);
}
function cancel() {
clearInterval(window['progress']);
pbClient.setValue(0);
startButton1.enable();
}
</script>
package org.primefaces.examples.view;
import java.io.Serializable;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
public class ProgressBean implements Serializable {
private Integer progress;
public Integer getProgress() {
if(progress == null)
progress = 0;
else {
progress = progress + (int)(Math.random() * 35);
if(progress > 100)
progress = 100;
}
return progress;
}
public void setProgress(Integer progress) {
this.progress = progress;
}
public void onComplete() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Progress Completed", "Progress Completed"));
}
public void cancel() {
progress = null;
}
}
