PrimeFaces - BreadCrumb Example

This example shows how to use PrimeFaces BreadCrumb.

JSF pages

src/main/webapp/index.xhtml

<h:body style="margin-left:30px">
    <h3>Employee Records</h3>
    <h:link value="Department List" outcome="dept-list" /><br/>
    <h:link value="Employees List" outcome="emp-list"/>
</h:body>

src/main/webapp/dept-list.xhtml

<h:body style="margin-left:30px">
    <h:form>
    <p:breadCrumb>
        <p:menuitem value="Home" url="/index.xhtml"/>
        <p:menuitem value="Departments" disabled="true"/>
    </p:breadCrumb>

    <h3>Department List</h3>
    <p:repeat  value="#{empBean.departmentList}" var="dept">
        <h:link value="#{dept.name}" outcome="dept.xhtml">
            <f:param name="deptId" value="#{dept.id}" />
        </h:link>
        <br/>
    </p:repeat>
    </h:form>
</h:body>

src/main/webapp/emp-list.xhtml

<h:body style="margin-left:30px">
    <h:form>
        <p:breadCrumb>
            <p:menuitem value="Home" url="/index.xhtml"/>
            <p:menuitem value="Employees" disabled="true"/>
        </p:breadCrumb>

        <h3>Employee List</h3>
        <p:repeat  value="#{empBean.employeeList}" var="emp">
            <h:link value="#{emp.name}" outcome="emp.xhtml">
                <f:param name="empId" value="#{emp.id}" />
            </h:link>
            <br/>
        </p:repeat>
    </h:form>
</h:body>

src/main/webapp/dept.xhtml

<h:body style="margin-left:30px">
    <c:set var="dept" value="#{empBean.departmentById}" scope="request" />
    <h:form>
        <p:breadCrumb>
            <p:menuitem value="Home" url="/index.xhtml"/>
            <p:menuitem value="Departments" url="/dept-list.xhtml"/>
            <p:menuitem value="#{dept.name}" disabled="true"/>
        </p:breadCrumb>

    <h3>Department Details</h3>
    <p>
        Name: #{dept.name} <br/><br/>
        Employee List: <br/>
        <p:repeat  value="#{dept.employeeList}" var="emp">
            <h:link value="#{emp.name}" outcome="emp.xhtml">
                <f:param name="empId" value="#{emp.id}" />
            </h:link>
            <br/>
        </p:repeat>
    </p>
    </h:form>
</h:body>

src/main/webapp/emp.xhtml

<h:body style=" margin:30px;">
    <c:set var="emp" value="#{empBean.employeeById}" scope="request"/>
    <h:form>
        <p:breadCrumb>
            <p:menuitem value="Home" url="/index.xhtml"/>
            <p:menuitem value="Employees" url="/emp-list.xhtml"/>
            <p:menuitem value="#{emp.name}" disabled="true"/>
        </p:breadCrumb>

        <h3>Employee Details</h3>
        <p>
            Name: #{emp.name} <br/>
            Department:
            <h:link value="#{emp.department.name}" outcome="dept.xhtml">
                <f:param name="deptId" value="#{emp.department.id}"/>
            </h:link>
            <br/>
            Phone: #{emp.phone}<br/>
            Address: #{emp.address}
        </p>
    </h:form>
</h:body>

The managed bean

@ManagedBean(name = "empBean")
@RequestScoped
public class EmployeeBean {

  public List<Employee> getEmployeeList() {
      return EmployeeService.Instance.getEmployeeList();
  }

  public List<Department> getDepartmentList() {
      return EmployeeService.Instance.getDepartmentList();
  }

  public Employee getEmployeeById() {
      long id = extractId("empId");
      return EmployeeService.Instance.findEmployeeById(id);
  }

  public Department getDepartmentById() {
      long id = extractId("deptId");
      return EmployeeService.Instance.findDepartmentById(id);
  }

  public long extractId(String idVar) {
      HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance()
                                                                    .getExternalContext()
                                                                    .getRequest();
      String deptId = request.getParameter(idVar);
      return Long.parseLong(deptId);
  }
}

public class Employee {
  private long id;
  private String name;
  private Department dept;
  private String phone;
  private String address;
    .............
}

public class Department {
  private long id;
  private String name;
  private List<Employee> employeeList = new ArrayList<>();
    .............
}

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• javax.servlet-api 3.1.0 Java Servlet API
• datafactory 0.8: Library to generate data for testing.
• JDK 1.8
• Maven 3.3.9