Question

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

Answer 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（定义应该在之后重新呈现的JSF组件的id（s）一个Ajax请求）

左侧菜单，JSF richfaces中的Horizontal选项卡式UI

1 个答案:

左侧菜单，JSF richfaces中的Horizo​​ntal选项卡式UI

1 个答案:

左侧菜单，JSF richfaces中的Horizontal选项卡式UI