Primefaces provides different kinds of navigation components, one of among them is BreadCrumb, it’s one of the navigation component that provides contextual information about page hierarchy in the workflow. In that a steps are defined as child menuitem components in breadcrumb. By the way the creating of menuitems can be done from through one of the following way:
- Declarative: Where the menuitems are defined within the breadcrumb component.
- Programmatic: Where the breadcrumb component defines a MenuModel using the model attribute.
The declarative way get involved using a <p:menuItem/> Tag, whereas the programmatic way get involved using a DefaultMenuModel & DefaultMenuItem. This tutorial explains the way how to use the BreadCrumb with PrimeFaces framework. If you have any questions, please write it in the comments section.
- Read : PrimeFaces Tutorials
1. PrimeFaces BreadCrumb Tag Info
2. PrimeFaces BreadCrumb Tag Attributes
3. Managed Bean
BreadCrumb.java
[code lang=”java”]package net.javabeat.primefaces;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.menu.DefaultMenuItem;
import org.primefaces.model.menu.DefaultMenuModel;
import org.primefaces.model.menu.MenuModel;
@ManagedBean
@SessionScoped
public class BreadCrumb {
private MenuModel menuModel = new DefaultMenuModel();
public BreadCrumb(){
// Initialize
this.menuModel = new DefaultMenuModel();
// Create index menuItem
DefaultMenuItem index = new DefaultMenuItem();
index.setValue("Index");
index.setCommand("#{breadCrumb.navigateIndex}");
// Add menuItems
this.menuModel.addElement(index);
}
public MenuModel getMenuModel() {
return menuModel;
}
public void setMenuModel(MenuModel menuModel) {
this.menuModel = menuModel;
}
public String navigateIndex(){
// Initialize
this.menuModel = new DefaultMenuModel();
// Create index menuItem
DefaultMenuItem index = new DefaultMenuItem();
index.setValue("Index");
index.setCommand("#{breadCrumb.navigateIndex}");
index.setUrl("index.xhtml");
// Add menuItems
this.menuModel.addElement(index);
return "index";
}
public String navigateHome(){
// Initialize
this.menuModel = new DefaultMenuModel();
// Create index menuItem
DefaultMenuItem index = new DefaultMenuItem();
index.setValue("Index");
index.setCommand("#{breadCrumb.navigateIndex}");
index.setUrl("index.xhtml");
// Create home menuItem
DefaultMenuItem home = new DefaultMenuItem();
home.setValue("Home");
home.setCommand("#{breadCrumb.navigateHome}");
index.setUrl("home.xhtml");
// Add menuItems
this.menuModel.addElement(index);
this.menuModel.addElement(home);
return "home";
}
public String navigatePrimefaces(){
// Initialize
this.menuModel = new DefaultMenuModel();
// Create index menuItem
DefaultMenuItem index = new DefaultMenuItem();
index.setValue("Index");
index.setCommand("#{breadCrumb.navigateIndex}");
index.setUrl("index.xhtml");
// Create home menuItem
DefaultMenuItem home = new DefaultMenuItem();
home.setValue("Home");
home.setCommand("#{breadCrumb.navigateHome}");
index.setUrl("home.xhtml");
// Add menuItems
this.menuModel.addElement(index);
this.menuModel.addElement(home);
// Create Primefaces menuItem
DefaultMenuItem primefaces = new DefaultMenuItem();
primefaces.setValue("Primefaces Tutorial");
primefaces.setCommand("#{breadCrumb.navigatePrimefaces}");
// Add menuItem
this.menuModel.addElement(primefaces);
return "primefaces";
}
}[/code]
4. The Views
index.xhtml
[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<f:view>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces – BreadCrumb</h2>
<p:breadCrumb model="#{breadCrumb.menuModel}"></p:breadCrumb>
<br/>
<h:commandButton value="Go Home" action="#{breadCrumb.navigateHome}"></h:commandButton>
</h:form>
</f:view>
</html>
[/code]
home.xhtml
[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<f:view>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces – BreadCrumb</h2>
<p:breadCrumb model="#{breadCrumb.menuModel}">
</p:breadCrumb>
<br/>
<h:commandButton value="Go Index" action="#{breadCrumb.navigateIndex}"></h:commandButton>
<h:commandButton value="Go Primefaces Tutorial" action="#{breadCrumb.navigatePrimefaces}"></h:commandButton>
</h:form>
</f:view>
</html>
[/code]
primefaces.xhtml
[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<f:view>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces – BreadCrumb</h2>
<p:breadCrumb model="#{breadCrumb.menuModel}">
</p:breadCrumb>
<br/>
<h:commandButton value="Go Index" action="#{breadCrumb.navigateIndex}"></h:commandButton>
<h:commandButton value="Go Home" action="#{breadCrumb.navigateHome}"></h:commandButton>
</h:form>
</f:view>
</html>[/code]
5. Primefaces BreadCrumb + Programmatic Demo
6. Primefaces BreadCrumb + Declarative Demo
If you’ve decided using the BreadCrumb in a declarative manner, so the menuItem Tag will get involved for achieving that. Below you will find a sample of it.
index.xhtml
[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<f:view>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces – BreadCrumb</h2>
<p:breadCrumb>
<p:menuitem value="Home" url="#"></p:menuitem>
</p:breadCrumb>
<br/>
</h:form>
</f:view>
</html>
[/code]
[wpdm_file id=71]
Leave a Reply