使用菜單和麪板的JSF 2素面導航

Question

嗨，我只是學習使用Primefaces的JSF 2。
我有一個關於他們的面板示例的問題。我想使用左側面板作爲我的導航菜單的佔位符和內容/頁面的中央面板。每次點擊菜單時，整個頁面都會刷新，我想要完成的是當我單擊菜單時，只有中央面板會加載相應的頁面。這可能使用primefaces或其他技術爲jsf 2？
下面是我使用的代碼。提前致謝。

感謝您的快速回復。我嘗試了你的建議，但有一些錯誤。對不起，我對jsf2和primefaces很新。提前致謝。

錯誤消息： /homepage.xhtml @ 26,84標記庫支持的命名空間：http://primefaces.prime.com.tr/ui，但沒有標籤被用於名定義：菜單項

下面是我的代碼爲我的觀點（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

舒美特hing喜歡這個JSF dynamic include using Ajax request。

在您的p：menuItem使用操作屬性而不是url中，要生成ajaxcal並在中間面板中可以使用h：include並更改h：include中src屬性的值。它也可以是actionListener而不是動作。

託管豆 -

@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" /> 

你不wan't刷新頁面，但做出ajaxcal，將值更改頁面和更新的中央面板。