PrimeFaces Steps

Primefaces Steps 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 Steps

PrimeFaces Steps

This components is an indicator for the steps in a workflow. It indicates that at what step we are right now. It is used to show current step in multi-steps application.

The <p:steps> component is used to create steps indicator in the JSF application. It has various important attributes that are tabled below.

Steps Attributes

Attribute Default value Type Description
id null String It is a unique identifier of the component.
rendered true Boolean It takes boolean value to specify the rendering of the component.
model null MenuModel It is used to build menu dynamically.
style null String It is used to set inline style of the component.
activeIndex 0 Integer It is an index of the active tab.
widgetVar null String It is used to set name of the client side widget.
readonly true Boolean It is used to make component readonly.

Skinning

Following is the table of structural style classes.

Style Class Applies
.ui-steps It applies on main container element.
.ui-steps-item It applies on step element.
.ui-steps-name It applies on name of the step.
.ui-steps-item This class is used for number of the step.

Example

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

JSF File

// steps.xhtml

  1. <?xml version='1.0' encoding='UTF-8' ?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml"  
  4. xmlns:h="http://xmlns.jcp.org/jsf/html"  
  5. xmlns:p="http://primefaces.org/ui">  
  6. <h:head>  
  7. <title>Steps</title>  
  8. </h:head>  
  9. <h:body>  
  10. <h3 style="margin-top:0">PrimeFaces Steps</h3>  
  11. <p:steps activeIndex="3">  
  12. <p:menuitem value="Personal Details" />  
  13. <p:menuitem value="Qualification" />  
  14. <p:menuitem value="Home Address" />  
  15. <p:menuitem value="Confirmation" />  
  16. </p:steps>  
  17. </h:body>  
  18. </html>