左侧菜单，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

回答

相关问题