左侧菜单，JSF Richfaces 中的水平选项卡式 UI答案

【问题标题】：Left menu, Horizontal tabbed UI in JSF richfaces左侧菜单，JSF Richfaces 中的水平选项卡式 UI
【发布时间】：2011-09-18 06:49:40
【问题描述】：

我正在尝试在页面顶部创建一个带有徽标和水平选项卡的简单项目布局。左侧的一些菜单。左侧的顶部选项卡和菜单都应刷新中心的内容。我用 ui:composition 模板/丰富的 tabbedpanel 试过这个。还没有运气。这可能是许多项目中遵循的常见结构。可能这可以在没有丰富面孔的 CSS 中轻松完成。如果有人可以为此发布代码，将不胜感激。

【问题讨论】：

标签： css jsf richfaces

【解决方案1】：

这是一个通用的项目布局，应该可以满足您对 facelets 的需求 (topmenu, left menu, content in center and footer)。

MainLayout.xhtml（记得在开头添加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）并使用 de 属性 reRender（定义应该在 Ajax 请求后重新呈现的 JSF 组件的 ID）

【讨论】：