Home/ Questions/Q 6598423
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:20:48+00:00

I am trying to create a simple project layout with logo and horizontal tabs

  • 0

I am trying to create a simple project layout with logo and horizontal tabs on top of the page. Some menus on the left hand side. Both the top tabs and menu of left hand side should refresh the content in center. I tried this with ui:composition template / rich tabbedpanel. No luck yet. This may be a common structure followed in lot of projects. May be this can be easily done in CSS without richfaces. Would appreciate if somebody can post the code for this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is generic project layout which should fits your needs (topmenu, left menu, content in center and footer) with facelets.

    MainLayout.xhtml (remeber to add doctype at the beginning)

    <?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>

    Then if you want menus with simple html and css have a look at ListaMatic It’s good starting point, with a simple list and using cascading style sheets you can create horizontal/vertical Toolbars.

    However if you want to use richfaces menu toolbar you have examples here.

    Finally for refreshing parts of you page then you need a ajax component (e.g a4j:support) and use de attribute reRender (defining id(s) of JSF component(s) that should be rerendered after an Ajax request)

    • 0