我正在使用分成4个部分 - 标题,菜单栏,内容和页脚的JSF模板。标题包含从数据库中检索的应用程序名称,版本,用户名,上次登录等详细信息。菜单部分包含从数据库w.r.t中填充的动态菜单。用户角色和访问权限。根据菜单项,我只需要刷新内容部分而无需重新加载/刷新标题,菜单栏和页脚。因此,如果菜单包含SomePage.xhtml的URL,当点击菜单项时,SomePage.xhtml应该加载到内容中。我已经检查了很多网络上的链接和解决方案,但无法让这个工作。有人能让我在这里吗?使用JSF Primefaces中的动态菜单更改内容部分
以下代码中的所有支持bean引用都将从数据库中检索数据。
BaseTemplate.xhtml
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<h:outputStylesheet name="css/override.css" />
<h:outputStylesheet name="css/style.css" />
</h:head>
<h:body>
<f:loadBundle basename="messages" var="msg" />
<f:event type="preRenderView" listener="#{homePageBean.init}" />
<h:panelGroup id="header" layout="block">
<ui:insert name="header">
<ui:include src="/pages/header.xhtml" />
</ui:insert>
</h:panelGroup>
<h:panelGroup id="menu" layout="block">
<ui:insert name="menu">
<ui:include src="/pages/menu.xhtml" />
</ui:insert>
</h:panelGroup>
<h:panelGroup id="content">
<ui:insert name="content" />
</h:panelGroup>
<h:panelGroup id="footer" layout="block">
<ui:insert name="footer">
<ui:include src="/pages/footer.xhtml" />
</ui:insert>
</h:panelGroup>
</h:body>
</html>
header.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<h:form id="frmHeader">
<table class="hdrMainTbl">
<tr>
<td width="10%">
<h:graphicImage value="images/logo.png" width="180 px"
height="40 px" />
</td>
<td width="65%">
<table class="hdrAppNmTbl">
<tr>
<td align="center">
<h:outputText styleClass="appNameText"
value="#{homePageBean.appName}" /> <br/>
<h:outputText styleClass="appVersionText"
value="#{msg['appVersion']} #{homePageBean.appVersion}" />
</td>
</tr>
</table>
</td>
<td width="20%">
<table class="hdrUserDtlsTbl">
<tr>
<td align="right"><h:outputText styleClass="baseFontStyle"
value="#{msg['welcome']}" /></td>
<td><h:outputText styleClass="baseFontStyle"
value="#{homePageBean.userName}" /></td>
</tr>
<tr>
<td align="right"><h:outputText styleClass="baseFontStyle"
value="#{msg['lastLogin']}" /></td>
<td><h:outputText styleClass="baseFontStyle"
value="#{homePageBean.lastLogin}" /></td>
</tr>
</table>
</td>
<td width="5%">
<h:commandLink action="#{homePageBean.logoutUser}">
<h:graphicImage id="logoutImg" value="images/logout.png" width="40 px"
height="40 px" title="Logout" alt="Logout" />
</h:commandLink>
</td>
</tr>
</table>
</h:form>
</ui:composition>
</body>
</html>
名为menu.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<h:form>
<p:menubar model="#{homePageBean.menubar}" />
</h:form>
</ui:composition>
</body>
</html>
footer.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<table class="footerTbl">
<tr>
<td align="center">
<h:outputText value="#{msg['copyright']}" />
<h:outputLink target="_blank" value="http://www.google.com/">
<h:outputText value="#{msg['website']}" />
</h:outputLink>
</td>
</tr>
</table>
</ui:composition>
</body>
</html>
SomePage.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition template="BaseTemplate.xhtml">
<ui:define name="content">
<h:form>
This is in Content section populated when one of the menu item is clicked.
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
也许我错了,但JSF模板仅仅是一个系统,与普通元素(菜单,页眉,页脚,对话......)不重复他们的工作执行(一次且仅一次!)。您的想法面向SPA(单页面应用程序),并且JSF无法支持它(至少在本机中)。你将不得不使用面板或div来实现你自己的“布局”系统,并用ajax操作来填充它们。 – Miguel
这只是页面装饰使用JSF模板与facelets,而不是SPA。这里没什么不好:) - 完全没有。 –
@miguel:这是不正确的。部分更新页面由jsf支持。 – Kukeltje