使用菜单和面板的 JSF 2 Prime Faces 导航

Question

您好，我刚刚使用 Primefaces 学习 JSF 2。
我对他们的面板示例有疑问。我想将左侧面板用作导航菜单的占位符，将中心面板用作内容/页面。每次单击菜单时，整个页面都会刷新，我想要完成的是，当我单击菜单时，只有中心面板会加载相应的页面。这是否可以对 jsf 2 使用 primefaces 或其他技术？
下面是我正在使用的代码。提前致谢。

感谢您的快速回复。我尝试了您的建议，但出现了一些错误。对不起，我对 jsf2 和 primefaces 真的很陌生。提前致谢。

错误信息： /homepage.xhtml @26,84 标签库支持命名空间：http://primefaces.prime.com.tr/ui，但没有为名称定义标签：menuItem

以下是我的视图代码 (homepage.xhtml)

<p:layout fullPage="true">
<p:layoutUnit position="top" height="75" header="Top" resizable="true" closable="true" collapsible="true">  
        <h:outputText value="North unit content." />  
</p:layoutUnit>  
<p:layoutUnit position="bottom" height="75" header="Bottom" resizable="true" closable="true" collapsible="true">  
        <h:outputText value="South unit content." />  
</p:layoutUnit>        
<p:layoutUnit position="left" width="250" header="Left" resizable="true" closable="true" collapsible="true">  
        <h:outputText value="West unit content." />        
<p:menu type="plain">
<p:submenu label="Mail">

<p:menuItem actionListener="#{navBean.setPage('pageName')}" update="centerPanel" />

<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
<p:menuitem value="Metacafe" url="http://www.metacafe.com" />
</p:submenu>
<p:submenu label="Social Networks">
<p:menuitem value="Facebook" url="http://www.facebook.com" />
<p:menuitem value="MySpace" url="http://www.myspace.com" />
</p:submenu>
</p:menu></p:layoutUnit>
    <p:layoutUnit position="center" id="centerPanel"> 

    <h:include src="#{navBean.page}.xhtml" />

        This is the center panel
    </p:layoutUnit>        
</p:layout>

这是我的 bean NavBean.java 的代码

package somePackage;

import javax.faces.bean.*;

@ManagedBean
@SessionScoped
public class NavBean {
      private String page = "login";
}

Answer 1

类似JSF dynamic include using Ajax request.

在您的 p:menuItem 中使用 action 属性而不是 url 来制作 ajaxcal，在中心面板中，您可以使用 h:include 并在您的支持 bean 的方法中更改 h:include 中的 src 属性的值。也可以是 actionListener 而不是 action。

托管 bean -

@ManagedBean
@SessionScoped
public class NavBean {

    private String page = "default";

    //getter/setter for page

查看-

<p:menuItem actionListener="#{navBean.setPage('pageName')}" update="centerPanel" />

//center panel with id="centerPanel"
<h:include src="#{navBean.page}.xhtml" />

您不想刷新页面，而是制作一个ajaxcal，更改值页面并更新中心面板。