Левое меню, горизонтальный пользовательский интерфейс с вкладками в форматах JSF - PullRequest
Новая
       1

Левое меню, горизонтальный пользовательский интерфейс с вкладками в форматах JSF

0 голосов
/ 18 сентября 2011

Я пытаюсь создать простой макет проекта с логотипом и горизонтальными вкладками в верхней части страницы.Некоторые меню на левой стороне.И верхние вкладки, и меню с левой стороны должны обновить содержимое в центре.Я попробовал это с помощью пользовательского интерфейса: шаблон композиции / богатый tabbedpanel.Пока не повезлоЭто может быть общая структура, которой придерживаются во многих проектах.Может быть, это легко сделать в CSS без richfaces.Был бы признателен, если кто-то может опубликовать код для этого.

1 Ответ

0 голосов
/ 18 сентября 2011

Это общий макет проекта, который должен соответствовать вашим потребностям (topmenu, left menu, content in center and footer) с лицевыми гранями.

MainLayout.xhtml (не забудьте добавить в начале тип документа) 

<?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, у вас есть примеров здесь .

Наконец, для обновлениячасть вашей страницы, то вам нужен компонент ajax (например, a4j: поддержка ) и использование атрибута de reRender (определение идентификатора (ов) компонентов JSF, которые должны быть повторно обработаны после запроса Ajax)

...