Layout question

UI Components for JSF
Post Reply
rp123409
Posts: 1
Joined: 18 Jul 2011, 16:14

18 Jul 2011, 16:52

Hi Guys,
I am very new to promefaces and trying to understand various layouts options.

My requirement is following-

1. I have a header section which goes at top across the page.
2. Then a menu Item, that I want to appear below header across the page

Below the menu, to the left hand side I want a left section to display a navigation/search items.

Remaining space to the right of is used for displaying main content.

I have tried to depict my design below (excuse me for crudeness, I was not sure how I could upload a screenshot)
|----------------------------------------------------------------------------------------------------
|Top element
-------------------------------------------------------------------------------------------------------
|Menu Item
|-----------------------------------------------------------------------------------------------------
|>>>>>>>>>>>>>>>|
| LEFT SECTION>>|...................... Right Section
|>>>>>>>>>>>>>>>|
|>>>>>>>>>>>>>>>|

This is what I have been given to work with-

Code: Select all

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">

<f:view contentType="text/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Portal</title>
        <link rel="stylesheet" href="${request.contextPath}/css/screen.css" type="text/css"
              media="screen, projection"/>
        <link rel="stylesheet" href="${request.contextPath}/css/print.css" type="text/css" media="print"/>
        
        <ui:insert name="headIncludes"/>
       
    </h:head>
    <h:body>
        <p:layout fullPage="true">

            <p:layoutUnit position="top" height="75" resizable="false" closable="false" collapsible="false">
                <div>
                    <table>
                        <tr>
                            <td align="left">
                                <a href="logo.png" alt="Portal Home"/> </a>
                            </td>
                            <td align="center">
                                <h3>Portal</h3>
                            </td>
                            <td align="right">
                                <c:if test="${not empty currentUser.name}">
                                    Welcome
                                </c:if>
                            </td>
                        </tr>
                    </table>
                </div>
            </p:layoutUnit>
            <p:layoutUnit position="left" width="300" resizable="false" closable="false" collapsible="false">

                <div id="leftContent">
                    <div align="left">
                        <ui:insert name="leftContent"></ui:insert>
                    </div>
                </div>

            </p:layoutUnit>
            <p:layoutUnit position="center" scrollable="true">
                <div align="left" class="container">
                    <p:menubar id="menu">
                        <p:submenu label="Home">
                            <p:menuitem value="Home">
                                <h:outputLink value="home">
                                    <h:outputText value="home"/>
                                </h:outputLink>
                            </p:menuitem>
                        </p:submenu>
                        <!-- view the users menuitem as an example, this is just a placeholder -->
                        -----
                        -----
                        -----
                    </p:menubar>
                </div>
            </p:layoutUnit>
           
            
        </p:layout>
       
    </h:body>
</f:view>
</html>
I tried to insert a new layoutunit below menu unit with position=center but won't work.

Can someone provide some input regarding above please.

Thanks

Andre Froes
Posts: 155
Joined: 16 Mar 2011, 17:24
Location: Brazil - Curitiba

18 Jul 2011, 18:33

A simple solution to that would be this:

|------------------------------------
| <Top Element>
|<Menu>
|------------------------------------|
|-----------------|------------------|
|------LEFT-----|------MIDDLE---|
|-----------------|------------------|

Your top elemente wont change probably (if it is what i imagined), so, make a h:outputPanel with height that you want and width 100%, and under it make your menu thing. This top will be inside a layout top.

the left and the middle with auto-size when you add it.

so basically you'll have layoutUnit Top, left and middle for your layout.
PrimeFaces 3.5 | Glassfish 3.1 | Mojarra 2.1.5 (JSF 2.1)
Netbeans 7.2.1 | JDK1.7 | Java EE 6 | SQL Server 2008
Win7 64 bits | Firefox 10 - Chrome - IE (all unfortunately)

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 19 guests