Primefaces Progrssbar

by Online Tutorials Library July 14, 2022

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.

Example

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

JSF File

// progressBar.xhtml

 <?xml version=’1.0′ encoding=’UTF-8′ ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:h=”http://xmlns.jcp.org/jsf/html” xmlns:p=”http://primefaces.org/ui”> <h:head> <title>ProgressBar</title> </h:head> <h:body> <h:form> <p:growl id=”growl” /> <h3>Ajax ProgressBar Example</h3> <p:commandButton value=”Start” type=”button” onclick=”PF(‘pbAjax’).start();PF(‘startButton2’).disable();”  widgetVar=”startButton2″ /> <p:commandButton value=”Cancel” actionListener=”#{progressBar.cancel}”  oncomplete=”PF(‘pbAjax’).cancel();PF(‘startButton2’).enable();” /> <br /><br /> <p:progressBar widgetVar=”pbAjax” ajax=”true” value=”#{progressBar.progress}”  labelTemplate=”{value}%” styleClass=”animated” global=”false”> <p:ajax event=”complete” listener=”#{progressBar.onComplete}” update=”growl”   oncomplete=”PF(‘startButton2’).enable()”/> </p:progressBar> </h:form> </h:body> </html> 

ManagedBean

// ProgressBar.java

 package com.tutoraspire; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; import javax.faces.context.FacesContext; @ManagedBean @ViewScoped public class ProgressBar { private Integer progress; public Integer getProgress() { if(progress == null) { progress = 0; } else { progress = progress + (int)(Math.random() * 15);  if(progress > 100) progress = 100; } return progress; } public void setProgress(Integer progress) { this.progress = progress; } public void onComplete() { FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(“Progress Completed”)); } public void cancel() { progress = null; } } 

Output:

PrimeFaces ProgressBar 1
PrimeFaces ProgressBar 2

Next Topic#

Primefaces Progrssbar

PrimeFaces ProgressBar

ProgressBar Attributes

Example

JSF File

ManagedBean

Apache Pig SQRT Function

Sentiment Analysis in Python

You may also like