如何通过AJAX做的部分页面显示（中量）与JSF2模板（从菜单） [英] how to do partial page rendering (center content) with jsf2 templating via ajax (from menu)
问题描述
我一直在努力得到这个工作，2周，我想从BalusC来自这2个职位（<合并信息href="http://stackoverflow.com/questions/7108668/how-to-ajax-refresh-the-main-content-part-by-navigation-menu">link1 <一href="http://stackoverflow.com/questions/4792862/how-to-include-another-xhtml-in-xhtml-using-jsf-2-0-facelets">link2)通过左边的菜单来实现部分页面中心的内容区域渲染所以左边的链接都将使用更新通过部分页面呈现的中心内容＆LT; F：。AJAX＆GT; 或者＆LT; A4J：AJAX＆GT;通过RichFaces的
i have been struggling getting this to work for 2 weeks, I am trying to merge info from BalusC from these 2 posts to (link1 link2) to achieve partial page rendering of a center content area via a menu on the left. So the links on the left would update the center content via partial page rendering using <f:ajax> or maybe <a4j:ajax> via richfaces
------------------------------------------------------
| include1 link | |
| include2 link | center content like include1.xhtml |
| include3 link | |
------------------------------------------------------
（要使用的include1.xhtml主模板，include2.xhtml，..）我的页面layout.xhtml看起来是这样的。
my page-layout.xhtml (master template to be used by include1.xhtml, include2.xhtml,..)looks like this.
<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与@Named
NavigationBean.java is defined as a ViewScoped bean via CDI with @Named
公共类NavigationBean实现Serializable {
public class NavigationBean implements 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
the included pages are file like include1.xhtml and include2.xhtml and should be loaded into center content when the left menu links are clicked, here is a sample 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异常，虽然堆栈跟踪不 分辨出哪一个，但删除
I am getting FileNotFoundException, although the stack trace does not tell which one, but removing the
<h:panelGroup rendered=".....>
<ui:include src="..." />
</h:panelGroup>
标签删除例外。我认为这是正确的实现来完成此基础上2 BalusC职位，但只是无法得到它的工作。
tags removes the exception. I think this is the proper implementation to accomplish this based on 2 of BalusC posts, but just can't get it to work.
推荐答案
我能够通过JSF2 / Ajax和richfaces4获得设计（其它的实施将是确定我假设），其中左侧导航菜单项，通过模板来实现，能够呈现模板通过AJAX，preventing一整页刷新，并具有闪烁效果的中心内容。
i was able to get a design via JSF2/Ajax and richfaces4 (other implementations would be ok I assume) where a left navigation menu item, implemented via templates, is able to render the center content of a template via ajax, preventing a full page refresh, and the flicker effect it has.
我navigationmenu.xhtml code看起来像这样
my navigationmenu.xhtml code looks like this
<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>
我相信渲染=：centerContentDiv，：centerForm属性的 A4J：AJAX 标签可以是改为只渲染=：centerForm，但还没有测试过。我知道，但是这两个一起工作。同时，我想JSF2阿贾克斯标签与白的空间ID之间并得到了错误，所以我去RichFaces的4.x版的A4J，然后可以使用逗号，如果未使用的空间。
I believe the render=":centerContentDiv,:centerForm" attribute for the a4j:ajax tags can be changed to just render=":centerForm" but have not tested that. I know the both work together however. also, i tried JSF2 ajax tags with white space between the IDs and got errors, so i went to richfaces 4.x's a4j and then could use commas if no space was used.
现在，为了使这项工作，每个pageX.xhtml文件，例如page1.xhtml需要有＆LT; H：格式ID =centerForm＆GT; ，这里是page1.xhtml的例子
now, in order for this to work, each pageX.xhtml file, for example page1.xhtml would need to have <h:form id="centerForm">, here is an example of 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>
一个限制是使用模板必须定义每个视图＆LT; H：格式ID = centerForm...＆GT; 否则JSF2会抱怨它不能找到渲染目标。
one limitation is each view that uses the template must define a <h:form id=centerForm" ...> otherwise JSF2 will complain it can't find the render target.
我的uiTemplate.xhtml文件具有code页眉，页脚，但相关的部件，它定义的导航键和中央的内容如下：
my uiTemplate.xhtml file has code for the header, footer, but the pertinent part that has the navigation and center content defined is as follows
<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>
这篇关于如何通过AJAX做的部分页面显示（中量）与JSF2模板（从菜单）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
