notesOfMyJavaCareer: How to create side menu layout with p:menu

Tuesday, September 3, 2013

How to create side menu layout with p:menu

The objective of this post is to create side menu layout as below.

1. create a side menu template

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head />
<h:body>
 <h:form>
        <table>
            <tr>
                <td><ui:insert name="sidemenu" /></td>
                <td><ui:insert name="content" /></td>
            </tr>
        </table>
  </h:form>
</h:body>
</html>

2. create facelets pages.

side menu page 1

<ui:composition
    template="side_menu_template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:define name="sidemenu">   
    <p:menu>
        <p:menuitem value="tab1" outcome="side_menu_content_01.xhtml" />
        <p:menuitem value="tab2" outcome="side_menu_content_02.xhtml" />
    </p:menu>
    </ui:define>
    <ui:define name="content">
        <p:outputLabel value="side menu content 01" />
    </ui:define>
</ui:composition>

side menu page 2

<ui:composition
    template="side_menu_template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <ui:define name="sidemenu">   
    <p:menu>
        <p:menuitem value="tab1" outcome="side_menu_content_01.xhtml" />
        <p:menuitem value="tab2" outcome="side_menu_content_02.xhtml" />
    </p:menu>
    </ui:define>
    <ui:define name="content">
        <p:outputLabel value="side menu content 02" />
    </ui:define>
</ui:composition>

Output:
page1: