左側菜單，JSF Richfaces中的水平選項卡式UI

我正嘗試在頁面頂部創建帶有徽標和水平選項卡的簡單項目佈局。一些菜單在左側。頂部的標籤和左側的菜單都應該刷新中間的內容。我試着用ui：構圖模板/豐富的tabbedpanel。沒有運氣。這可能是大量項目中常見的結構。可能這可以很容易地在沒有richfaces的CSS中完成。如果有人能爲此發佈代碼，將不勝感激。左側菜單，JSF Richfaces中的水平選項卡式UI

來源

2011-09-18 user238021

這是通用的項目佈局，應該符合您的需求（topmenu, left menu, content in center and footer）和facelets。

MainLayout.xhtml（remeber在開始時添加的doctype）

<?xml version="1.0" encoding="UTF-8" ?> 

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich"> 

    <f:view contentType="text/html" /> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta http-equiv="Pragma" content="no-cache" /> 
     <meta http-equiv="Cache-Control" content="no-cache" /> 
     <meta http-equiv="Expires" content="0" /> 
     <ui:insert name="headStyles" /> 
     <title> 
      <ui:insert name="pageTitle" /> 
     </title> 
     <ui:insert name="htmlHeader" /> 
    </head> 

    <body> 
     <div id="pageContainer" > 
      <div id="headerContainer" class="topMenu"> 
       <ui:insert name="header" /> 
      </div> 
      <div id="mainContainer" >    
       <ui:insert name="main"/>   
      </div> 
      <div id="footerContainer" > 
       <ui:insert name="footer" /> 
      </div> 
     </div> 
    </body> 
</html>

Two ColummnsLayout.xhtml

<?xml version="1.0" encoding="UTF-8" ?> 
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich" 
    template="mainLayout.xhtml"> 

    <ui:define name="headStyles"> 
     <!-- define your styles HERE --> 
    </ui:define> 

    <ui:define name="pageTitle">  
     <!-- define your title HERE --> 
    </ui:define> 

    <ui:define name="htmlHeader"> 
     <!-- define your header HERE --> 
    </ui:define> 

    <ui:define name="menu"> 
     <!-- define your richfaces top Menu HERE --> 
    <ui:define> 

    <ui:define name="main">  

     <div id="menuContainer" class="leftColumn"> 
      <ui:insert name="leftMenu"/> 
     </div> 

     <div id="contentContainer" class="contentColumn">         
      <ui:insert name="contentMain"/> 
     </div> 

    </ui:define> 

</ui:composition>

然後如果你想用簡單的HTML和CSS菜單在ListaMatic看看這是很好的起點，用一個簡單的列表和使用級聯樣式表，您可以創建水平/垂直工具欄。

但是，如果你想使用richfaces菜單工具欄，你有examples here。

最後你頁面的清爽部分，那麼你需要一個Ajax組件（例如a4j:support），並使用去屬性reRender（定義應該Ajax請求後重新呈現JSF組件（S）的ID（S））

來源

2011-09-18 10:12:29

左側菜單，JSF Richfaces中的水平選項卡式UI

回答

相關問題