PrimeFaces ProgressBar

Primefaces Progressbar with primefaces tutorial, primefaces introduction, primefaces features, primefaces configuration, ajax, event, listener, actionlistener, ajax process, ui component, autocomplete, inputtextarea, boolean button, boolean checkbox, calendar, inputtext, inputmask, select one list box, select many box, select checkbox etc

PrimeFaces ProgressBar

PrimeFaces ProgressBar

It is a process status indicator that can either work purely on client side or interact with server side using Ajax. It is used to show the status and progress of executing process. ProgressBar has two modes: client and Ajax. By default, client mode is enabled. Ajax mode can be enabled by setting ajax attribute to true.

The <p:progressBar> is used to create progressbar in JSF application. It has various attributes that are tabled below.

ProgressBar Attributes

Attribute Default value Type Description
id null String It is an unique identifier of the component.
rendered true Boolean It is used to specify the rendering of the component.
widgetVar null String It is a name of the client side widget.
value 0 Integer It is used to set value of the progress bar.
disabled false Boolean It is used to disable or enable the progressbar.
ajax false Boolean It specifies the mode of progressBar.
interval 3000 Integer It is used to set interval in seconds to do periodic requests in ajax mode.
style null String It is used to set inline style of the main container element.
styleClass null String It is used to set style class of the main container element.
labelTemplate {value} String It is used to set template of the progress label.
displayOnly false Boolean It enables static display mode.
global true Boolean Global ajax requests are listened by ajaxStatus component.


Here, in the following example, we are implementing <p:progressBar> component. This example contains the following files.

JSF File

// progressBar.xhtml

  1. <?xml version='1.0' encoding='UTF-8' ?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""">  
  3. <html xmlns=""  
  4. xmlns:h=""  
  5. xmlns:p="">  
  6. <h:head>  
  7. <title>ProgressBar</title>  
  8. </h:head>  
  9. <h:body>  
  10. <h:form>  
  11. <p:growl id="growl" />  
  12. <h3>Ajax ProgressBar Example</h3>  
  13. <p:commandButton value="Start" type="button" onclick="PF('pbAjax').start();PF('startButton2').disable();"   
  14. widgetVar="startButton2" />  
  15. <p:commandButton value="Cancel" actionListener="#{progressBar.cancel}"   
  16. oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();" />  
  17. <br /><br />  
  18. <p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBar.progress}"   
  19. labelTemplate="{value}%" styleClass="animated" global="false">  
  20. <p:ajax event="complete" listener="#{progressBar.onComplete}" update="growl"    
  21. oncomplete="PF('startButton2').enable()"/>  
  22. </p:progressBar>  
  23. </h:form>  
  24. </h:body>  
  25. </html>  



  1. package com.tpoint;  
  2. import javax.faces.application.FacesMessage;  
  3. import javax.faces.bean.ManagedBean;  
  4. import javax.faces.bean.ViewScoped;  
  5. import javax.faces.context.FacesContext;  
  6. @ManagedBean  
  7. @ViewScoped  
  8. public class ProgressBar {  
  9. private Integer progress;  
  10. public Integer getProgress() {  
  11. if(progress == null) {  
  12. progress = 0;  
  13. }  
  14. else {  
  15. progress = progress + (int)(Math.random() * 15);  
  17. if(progress > 100)  
  18. progress = 100;  
  19. }  
  20. return progress;  
  21. }  
  22. public void setProgress(Integer progress) {  
  23. this.progress = progress;  
  24. }  
  25. public void onComplete() {  
  26. FacesContext.getCurrentInstance().addMessage(nullnew FacesMessage("Progress Completed"));  
  27. }  
  28. public void cancel() {  
  29. progress = null;  
  30. }  
  31. }