primefaces change center layout with menubar

Question

Hi I have a template with header, menu and content, and I built my dynamic menu menubar, now I want to know how I can do to make the click of each option on my menu only update the contents of my layout and header and menu will remain as they are ... here is my template:

<div id="header" style="height: 70px;">
     <ui:insert name="header" >
         <ui:include src="header.xhtml" />
     </ui:insert>
</div>

<div id="menu" style="height: 50px;">
     <ui:insert name="menu" >
         <ui:include src="menu.xhtml" />
     </ui:insert>
</div>

<div id="content">
     <ui:insert name="content" >
         <ui:include src="content.xhtml" />
     </ui:insert>
</div>

can someone help? Thank you!

wittakarn wittakarn · Accepted Answer · 2014-10-16T03:48:02

I suggest you to use JSF Templating. By applying this approach, your pages are easy to extend and reuse.

This is my example which use p:layout, ui:composition and etc.

layout.xhtml

<?xml version="1.0" encoding="UTF-8"?>

<!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: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>
        <title>Layout-menu</title>
    </h:head>
    <h:body>
        <p:layout>
            <p:layoutUnit position="west" 
                          resizable="true" 
                          size="250" 
                          minSize="40" 
                          maxSize="400">
                <h:form>
                    <p:menu>
                        <p:submenu label="Navigations">
                            <p:menuitem value="input" 
                                        outcome="inputText" 
                                        icon="ui-icon-star"/>
                            <p:menuitem value="dropdown" 
                                        outcome="selectOneMenu" 
                                        icon="ui-icon-star"/>
                        </p:submenu>
                    </p:menu>
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit position="center">
                <ui:insert name="source" />
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

inputText.xhtml

<ui:composition 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"
                template="layout.xhtml">
    <ui:define name="source">
        <h:form>
            inputText
        </h:form>
    </ui:define>

</ui:composition>

selectOneMenu.xhtml

<ui:composition 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"
                template="layout.xhtml">
    <ui:define name="source">
        <h:form>
            selectOneMenu
        </h:form>
    </ui:define>

</ui:composition>

You can run test at the layout.xhtml page like this http://host:port/project/layout.xhtml

You can see more information about Templating from another site such as JSF 2 Templating With Facelets Example, Using Facelets Templates and etc.

primefaces change center layout with menubar

2 Answers