如何通过ajax（从菜单）使用jsf2模板进行部分页面渲染（中心内容）

Question

我已经努力让它工作两周了，我正在尝试将这两篇文章中来自 BalusC 的信息合并到 (link1 link2）实现部分页面通过左侧的菜单呈现中心内容区域。因此，左侧的链接将通过使用 或通过 richfaces

------------------------------------------------------
| include1 link |                                     |
| include2 link |  center content like include1.xhtml |
| include3 link |                                     |
------------------------------------------------------

我的页面布局的 部分页面渲染来更新中心内容.xhtml（include1.xhtml、include2.xhtml、.. 使用的主模板）看起来像这样。

<h:body>
    <div id="top" class="top">
        <ui:insert name="top">page-layout default top content</ui:insert>
    </div>
    <div>
        <div id="left">
            <h:form id="navigationFormId">             
                    <f:ajax render=":contentForm">                                        
                        <h:commandLink value="include1" 
                                       action="#{navigationBean.setPage('include1')}" />
                        <p></p>
                        <h:commandLink value="include2" 
                                       action="#{navigationBean.setPage('include2')}" />                    
                        <p></p>
                        <h:commandLink value="include3" 
                                       action="#{navigationBean.setPage('include3')}" />   
                        <p></p>
                    </f:ajax>                                     
            </h:form>
        </div>
        <div id="content">
           <ui:insert name="content">

                <h:panelGroup id="contentPanelGroup" layout="block"> 
                    <h:form id="contentForm">

                        <h:panelGroup rendered="#{navigationBean.page == 'include1'}">            
                            <ui:include src="include1.xhtml" />         
                        </h:panelGroup> 
                        <h:panelGroup rendered="#{navigationBean.page == 'include2'}">            
                            <ui:include src="include2.xhtml" />         
                        </h:panelGroup>
                        <h:panelGroup rendered="#{navigationBean.page == 'include3'}">             
                            <ui:include src="include3.xhtml" />         
                        </h:panelGroup>

                    </h:form> 
               </h:panelGroup>     

            </ui:insert>
        </div>
    </div>
</h:body>

NavigationBean.java 通过 CDI 定义为 ViewScoped bean，带有 @Named

public class NavigationBean Implements Serialized {

public NavigationBean() {}

public String getPage() {return page;}
public void setPage(String p) {page = p;}
private String page = "include1";

}

包含的页面是像 include1.xhtml 和 include2.xhtml 这样的文件，并且应该在单击左侧菜单链接时加载到中心内容中，此处是一个示例 include2.xhtml

<h:body>

    <ui:composition template="page-template.xhtml">
        <ui:define name="content">

             include2

             <h:form> 
                 form components for include2
             </h:form>

        </ui:define>
    </ui:composition>

</h:body>

我收到 FileNotFoundException，尽管堆栈跟踪没有 告诉是哪一个，但是删除

<h:panelGroup rendered=".....>
    <ui:include src="..." />
</h:panelGroup>

标签可以消除异常。我认为这是基于 BalusC 的 2 篇帖子来完成此任务的正确实现，但就是无法让它工作。

Answer 1

您收到的错误表明无法找到 include...xhtml 页面。文件位于哪里？它们应该与 page-layout.xhtml 文件位于同一目录中吗？为了简化一切，我只是测试包含是否有效，你可以将其替换

<h:form id="contentForm">
        <h:panelGroup rendered="#{navigationBean.page == 'include1'}">            
                <ui:include src="include1.xhtml" />         
        </h:panelGroup> 
        <h:panelGroup rendered="#{navigationBean.page == 'include2'}">            
                <ui:include src="include2.xhtml" />         
        </h:panelGroup>
        <h:panelGroup rendered="#{navigationBean.page == 'include3'}">             
                <ui:include src="include3.xhtml" />         
        </h:panelGroup>
</h:form> 

为：

<h:form id="contentForm">
        <ui:include src="include1.xhtml" />         
</h:form>

Answer 2

我能够通过 JSF2/Ajax 和 richfaces4 获得设计（我认为其他实现也可以），其中通过模板实现的左侧导航菜单项能够通过 ajax 呈现模板的中心内容，从而防止整个页面刷新，以及它所具有的闪烁效果。

我的 navigationmenu.xhtml 代码如下所示

<ui:composition>
<h:form id="navigationFormId">
        <rich:collapsiblePanel id="carrierCollapsibleId" header="Links that update center content" switchType="client">
            <h:commandLink  id="linkId1" action="/page1" value="Update Center Content with page1">
                <a4j:ajax execute="@form" render=":centerContentDiv,:centerForm" />                    
            </h:commandLink>
            <br />
            <h:commandLink  id="linkId2" action="/page2" value="Update Center Content with page2">
                <a4j:ajax execute="@form" render=":centerContentDiv,:centerForm" />                    
            </h:commandLink>
</rich:collapsiblePanel>
...
</h:form>

我相信 a4j:ajax 标记的 render=":centerContentDiv,:centerForm" 属性可以更改为 render =":centerForm" 但尚未对此进行测试。不过我知道两者一起工作。另外，我尝试了 JSF2 ajax 标签，ID 之间有空格，但出现了错误，所以我转到 richfaces 4.x 的 a4j，然后如果没有使用空格，可以使用逗号。

现在，为了使其工作，每个 pageX.xhtml 文件（例如 page1.xhtml）需要有 ，这里是 page1 的示例.xhtml 的

<ui:composition template="/templates/uiTemplate.xhtml">
        <ui:define name="center_content">                                
            <h:form id="centerForm">
               <!-- put your components in here -->    

            </h:form>
        </ui:define>
    </ui:composition>

一个限制是每个使用模板的视图必须定义一个 否则 JSF2 会抱怨它找不到渲染目标。

我的 uiTemplate .xhtml文件具有页眉、页脚的代码，但定义导航和中心内容的相关部分如下

<div class="header_content">
        <div id="left">
            <ui:include src="navigationMenu.xhtml" />
        </div>
        <div id="center_content">
                                 <!-- think this panelGroup wrapper can be -->
                                 <!-- removed. need to test that though -->
            <h:panelGroup id="centerContentDiv" layout="block">
                <ui:insert name="center_content" />
            </h:panelGroup>
        </div>
    </div>