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