1

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!

Qadir Hussain
  • 1,263
  • 1
  • 10
  • 26
Mariah
  • 1,073
  • 1
  • 14
  • 33

2 Answers2

2

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.

wittakarn
  • 3,124
  • 1
  • 18
  • 31
  • Hello wittakarn, thnx 4 the answer, the question is that I do not know what code to put in my DefaultMenuItem component when clicking to change only the content of the page and the header and menu will remain how they are. Thank you !! – Mariah Oct 16 '14 at 15:36
1

You should use JSF Templating that show in @wittakarn example combination with DefaultMenuItem and setUrl to other page, and the other page use the same template, the header and menu will remain.

Agie
  • 114
  • 1
  • 1
  • 7
  • Thanks a lot!!! :) its working!! sorry im newbie :P and can u help me too with this post? http://stackoverflow.com/questions/26408308/call-method-from-backing-bean-sends-propertynotfoundexception?noredirect=1#comment41471694_26408308 THANKS A LOT! – Mariah Oct 16 '14 at 20:39