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; } }