primefaces通过菜单栏改变中心布局

嗨，我有一个包含标题、菜单和内容的模板，我构建了我的动态菜单栏，现在我想知道如何让点击菜单上的每个选项只更新布局的内容，标题和菜单将保持原样。。。这是我的模板：

<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>

有人能帮忙吗？非常感谢。

我建议您使用JSF模板。通过应用这种方法，您的页面易于扩展和重用。

这是我使用p:layout、ui:composition等的例子

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>

您可以在layout.xhtml页面上运行测试，如以下http://host:port/project/layout.xhtml

您可以从另一个站点看到更多关于模板化的信息，如JSF 2 Templateing With Facelets Example、Using Facelets Templates等。

您应该使用@wittakarn示例中显示的JSF模板，将DefaultMenuItem和setUrl组合到其他页面，而其他页面使用相同的模板，则标头和菜单将保留。

相关内容

最新更新

热门标签：