JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Primefaces BreadCrumb Example

April 16, 2014 by Amr Mohammed Leave a Comment

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

PrimeFaces BreadCrumb Tag Info

2. PrimeFaces BreadCrumb Tag Attributes

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

Primefaces - BreadCrumb Example 1

Primefaces - BreadCrumb Example 2

Primefaces - BreadCrumb Example 3

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]

Filed Under: JSF Tagged With: PrimeFaces

About Amr Mohammed

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved