primefaces change center layout with menubar

前端未结

关注

 2  718

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 upd

相关标签:

2条回答

轻奢々

2021-01-16 08:00

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

日久生厌

2021-01-16 08:04

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.

0 讨论(0)