我能够通过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:formid="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 > <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>
