Question

我是这个领域的新人。

我正在使用Facelets进行模板设计。

在我的项目中，我需要一个模板，当使用ui：insert和ui：define点击p:menuitems时动态更改内容。

我已经尝试了这个并且它的工作正常，就像每个p：menuitems点击页面获得一次刷新，然后更改内容。

但是，我需要在不刷新页面的情况下更改模板的内容。

在这里，我添加了我的程序。

home.xhtml

<ui:composition template="index.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets">

</ui:composition>

header.xhtml

<ui:composition  xmlns="http://www.w3.org/1999/xhtml"   
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://xmlns.jcp.org/jsf/core"
                 xmlns:h="http://xmlns.jcp.org/jsf/html"
                 xmlns:p="http://primefaces.org/ui">`enter code here`
    <h:form>
        <p:menu>
            <p:menuitem value="One"   url="/pages/one.xhtml"/> 
            <p:menuitem value="Two"  url="/pages/two.xhtml"/> 
            <p:menuitem value="Three" url="/pages/three.xhtml"/> 
        </p:menu>
    </h:form>
</ui:composition>

footer.xhtml

<ui:composition  xmlns="http://www.w3.org/1999/xhtml"   
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://xmlns.jcp.org/jsf/core">
            <p>This is Footer</p>
</ui:composition>

的template.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
        <h:head>
            <title>Template Page</title>
        </h:head>
        <h:body>
            <div id="headerId">
                    <p:panel>
                        <ui:include src="/pages/header.xhtml"/>
                    </p:panel>
            </div>
            <div id="contentId">
                <ui:insert name="content">
                    <p:panel>
                    <p>Default Content</p>
                    </p:panel>
                </ui:insert>
            </div>
            <div id="footerId">
                    <p:panel>
                        <ui:include src="/pages/footer.xhtml"/>
                    </p:panel>
            </div>
        </h:body>
</html>

one.xhtml

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

    <ui:define name="content">
        <p>Change content from one page</p>
    </ui:define>

</ui:composition>

two.xhtml

<ui:composition  template="template.xhtml"
                 xmlns="http://www.w3.org/1999/xhtml"   
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="content">
        <p>Change content from two page</p>
    </ui:define>

</ui:composition>

three.xhtml

<ui:composition template="template.xhtml"
            xmlns="http://www.w3.org/1999/xhtml"   
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:define name="content">
        <p>Change content from three page</p>
    </ui:define>
</ui:composition>

在这里，home.xhtml是我的欢迎页面。

请告诉我一个解决这个问题的想法。

提前致谢。

如何使用ui：insert和ui：define？

0 个答案: