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

Question

我一直在努力使其工作2周，我正尝试将BalusC的信息从这2个帖子合并到（link1


link2），以通过左侧菜单实现中心内容区域的部分页面渲染。因此，左侧的链接将使用<f:ajax>或可能<a4j:ajax>通过richfaces
通过部分页面渲染来更新中心内容

-------------------------------------------------- ----
| include1链接| |
| include2链接| 中心内容，例如include1.xhtml |
| include3链接| |
-------------------------------------------------- ----

我的page-layout.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通过带有@Named的CDI定义为ViewScoped bean

公共类NavigationBean实现Serializable {

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

我能够通过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>

我相信标记的render=":centerContentDiv,:centerForm"属性a4j:ajax可以更改为仅render=":centerForm"但尚未测试。我知道两者可以一起工作。另外，我尝试在ID之间使用空白的JSF2
ajax标记并得到了错误，所以我去了richfaces 4.x的a4j，如果不使用空格，可以使用逗号。

现在，为了使其正常工作，每个pageX.xhtml文件（例如page1.xhtml）都需要具有<h:form id="centerForm">，这是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>

一个限制是使用模板的每个视图必须定义一个<h:form id=centerForm" ...>否则，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>