PrimeFaces - Dynamic BreadCrumb Example

In this example, we will create the PrimeFaces BreadCrumb programmatically.

We are going to reuse our last example to demonstrate how a dynamic BreadCrumb works. We are going to modify our views and managed bean.

JSF pages

src/main/webapp/index.xhtml

<h:body style="margin-left:30px">
    <h:form>
    <p:breadCrumb model="#{empBean.breadCrumbModel}"
                  rendered="#{empBean.breadCrumbModel ne null}"/>
    </h:form>

    <ui:fragment rendered="#{empBean.viewType == 'Main'}">
        <h:link value="Department List" outcome="index">
            <f:param name="viewType" value="DeptList"/>
        </h:link><br/>
        <h:link value="Employees List" outcome="index">
            <f:param name="viewType" value="EmpList"/>
        </h:link>
    </ui:fragment>

    <ui:fragment rendered="#{empBean.viewType == 'DeptList'}">
        <ui:include src="WEB-INF/dept-list.xhtml" />
    </ui:fragment>

    <ui:fragment rendered="#{empBean.viewType == 'Dept'}">
        <ui:include src="WEB-INF/dept.xhtml" />
    </ui:fragment>

    <ui:fragment rendered="#{empBean.viewType == 'EmpList'}">
        <ui:include src="WEB-INF/emp-list.xhtml" />
    </ui:fragment>

    <ui:fragment rendered="#{empBean.viewType == 'Emp'}">
        <ui:include src="WEB-INF/emp.xhtml" />
    </ui:fragment>
</h:body>

src/main/webapp/WEB-INF/dept-list.xhtml

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

src/main/webapp/WEB-INF/emp-list.xhtml

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

src/main/webapp/WEB-INF/dept.xhtml

<ui:composition>
    <h3>Department Details</h3>
    <h:form>
        <c:set var="dept" value="#{empBean.departmentById}" scope="request"/>
        <p>
            Name: #{dept.name} <br/><br/>
            Employee List: <br/>
            <p:repeat value="#{dept.employeeList}" var="emp">
                <h:link value="#{emp.name}" outcome="index">
                    <f:param name="viewType" value="Emp"/>
                    <f:param name="empId" value="#{emp.id}"/>
                </h:link>
                <br/>
            </p:repeat>
        </p>
    </h:form>
</ui:composition>

src/main/webapp/WEB-INF/emp.xhtml

<ui:composition>
    <h3>Employee Details</h3>
    <c:set var="emp" value="#{empBean.employeeById}" scope="request"/>
    <h:form>
        <p>
            Name: #{emp.name} <br/>
            Department:
            <h:link value="#{emp.department.name}" outcome="index">
                <f:param name="viewType" value="Dept"/>
                <f:param name="deptId" value="#{emp.department.id}"/>
            </h:link>
            <br/>
            Phone: #{emp.phone}<br/>
            Address: #{emp.address}
        </p>
    </h:form>
</ui:composition>

The managed bean

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

  @ManagedProperty("#{param.viewType}")
  private String viewTypeParam;

  private ViewType viewType;

  @PostConstruct
  public void init() {
      if (viewTypeParam != null) {
          viewType = ViewType.valueOf(viewTypeParam);
      } else {
          viewType = ViewType.Main;
      }
  }

  public void setViewTypeParam(String viewTypeParam) {
      this.viewTypeParam = viewTypeParam;
  }

  public MenuModel getBreadCrumbModel() {
      if (viewType == null || viewType == ViewType.Main) {
          return null;
      }
      MenuModel model = new DefaultMenuModel();
      addItemToMenuModel(model, "Home", "/index.xhtml", false);

      switch (viewType) {
          case DeptList:
              addItemToMenuModel(model, "Departments", null, true);
              break;
          case EmpList:
              addItemToMenuModel(model, "Employees", null, true);
              break;
          case Dept:
              addItemToMenuModel(model, "Departments",
                      createLink(ViewType.DeptList), false);
              addItemToMenuModel(model, getDepartmentById().getName(), null, true);
              break;
          case Emp:
              addItemToMenuModel(model, "Employees", createLink(ViewType.EmpList),
                      false);
              addItemToMenuModel(model, getEmployeeById().getName(), null, true);
              break;
      }

      return model;
  }

  private String createLink(ViewType viewType) {
      return String.format("index.xhtml?viewType=%s", viewType);
  }

  private void addItemToMenuModel(MenuModel model, String value, String url, boolean disabled) {
      DefaultMenuItem element = new DefaultMenuItem();
      element.setValue(value);
      element.setUrl(url);
      element.setDisabled(disabled);
      model.addElement(element);
  }

  public ViewType getViewType() {
      return viewType;
  }

  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);
      if (deptId == null) {
          return -1;
      }
      return Long.parseLong(deptId);
  }

  public enum ViewType {
      Main,
      EmpList,
      DeptList,
      Emp,
      Dept;
  }
}

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