我一直在努力使其工作2周,我正尝试将BalusC的信息从这2个帖子合并到(link1 link2),以通过左侧菜单实现中心内容区域的部分页面渲染。因此,左侧的链接将使用<f:ajax>或可能<a4j:ajax>通过richfaces 通过部分页面渲染来更新中心内容
<f:ajax>
<a4j:ajax>
-------------------------------------------------- ---- | 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条来完成此操作的正确实现,但无法使其正常工作。
我能够通过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,如果不使用空格,可以使用逗号。
render=":centerContentDiv,:centerForm"
a4j:ajax
render=":centerForm"
现在,为了使其正常工作,每个pageX.xhtml文件(例如page1.xhtml)都需要具有<h:form id="centerForm">,这是page1.xhtml的示例
<h:form id="centerForm">
<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会抱怨它找不到渲染目标。
<h:form id=centerForm" ...>
我的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>