3.62 Layout. PrimeFaces PrimeFaces

PDF

Dokument

Reklaam

PrimeFaces User Guide

3.62 Layout

Layout component features a highly customizable borderLayout model making it very easy to create complex layouts even if you’re not familiar with web design.

Info

Tag

Component Class

Component Type

Component Family

Renderer Type

Renderer Class

layout org.primefaces.component.layout.Layout

org.primefaces.component.Layout

org.primefaces.component

org.primefaces.component.LayoutRenderer

org.primefaces.component.layout.LayoutRenderer

Attributes

Name

id rendered binding widgetVar fullPage

Default

null true null null false

Type Description

String Unique identifier of the component

Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered.

Object

String

An el expression that maps to a server side UIComponent instance in a backing bean

Name of the client side widget.

Boolean Specifies whether layout should span all page or not.

279

style

Name

styleClass onResize onClose onToggle resizeTitle collapseTitle expandTitle closeTitle

Default

null

Type

String null null null null null null null null

String

PrimeFaces User Guide

Description

Style to apply to container element, this is only applicable to element based layouts.

Style class to apply to container element, this is only applicable to element based layouts.

Client side callback to execute when a layout unit is resized.

Client side callback to execute when a layout unit is closed.

Client side callback to execute when a layout unit is toggled.

Title label of the resize button.

Title label of the collapse button.

Title label of the expand button.

Title label of the close button.

Getting started with Layout

Layout is based on a borderLayout model that consists of 5 different layout units which are top, left, center, right and bottom. This model is visualized in the schema below;

Full Page Layout

Layout has two modes, you can either use it for a full page layout or for a specific region in your page. This setting is controlled with the fullPage attribute which is false by default.

The regions in a layout are defined by layoutUnits, following is a simple full page layout with all possible units. Note that you can place any content in each layout unit.

280

PrimeFaces User Guide

<p:layout fullPage="true">

<p:layoutUnit position="north" size="50">

<h:outputText value="Top content." />

</p:layoutUnit>

<p:layoutUnit position="south" size="100">

<h:outputText value="Bottom content." />

</p:layoutUnit>

<p:layoutUnit position="west" size="300">

<h:outputText value="Left content" />

</p:layoutUnit>

<p:layoutUnit position="east" size="200">

<h:outputText value="Right Content" />

</p:layoutUnit>

<p:layoutUnit position="center">

<h:outputText value="Center Content" />

</p:layoutUnit>

</p:layout>

Forms in Full Page Layout

When working with forms and full page layout, avoid using a form that contains layoutunits as generated dom may not be the same. So following is invalid.

<p:layout fullPage="true">

<h:form>

<p:layoutUnit position="west" size="100"> h:outputText value="Left Pane" />

</p:layoutUnit>

<p:layoutUnit position="center">

<h:outputText value="Right Pane" />

</p:layoutUnit>

</h:form>

</p:layout>

A layout unit must have it’s own form instead, also avoid trying to update layout units because of same reason, update it’s content instead.

Dimensions

Except center layoutUnit, other layout units must have dimensions defined via size option.

Element based layout

Another use case of layout is the element based layout. This is the default case actually so just ignore fullPage attribute or set it to false. Layout example below demonstrates creating a split panel implementation.

281

PrimeFaces User Guide

<p:layout style="width:400px;height:200px">

<p:layoutUnit position="west" size="100">

<h:outputText value="Left Pane" />

</p:layoutUnit>

<p:layoutUnit position="center">

<h:outputText value="Right Pane" />

</p:layoutUnit>

//more layout units

</p:layout>

Ajax Behavior Events

Layout provides custom ajax behavior events for each layout state change.

Event

toggle close resize

Listener Parameter

org.primefaces.event.ToggleEvent

org.primefaces.event.CloseEvent

org.primefaces.event.ResizeEvent

Fired

When a unit is expanded or collapsed.

When a unit is closed.

When a unit is resized.

Stateful Layout

Making layout stateful would be easy, once you create your data to store the user preference, you can update this data using ajax event listeners provided by layout. For example if a layout unit is collapsed, you can save and persist this information. By binding this persisted information to the collapsed attribute of the layout unit layout will be rendered as the user left it last time.

Client Side API

Widget: PrimeFaces.widget.Layout

Method

toggle(position) show(position) hide(unit)

Params

position position position

Return Type

void void void

Toggles layout unit.

Shows layout unit.

Hides layout unit.

Description

282

PrimeFaces User Guide

Skinning

Following is the list of structural style classes;

Style Class

.ui-layout

.ui-layout-doc

.ui-layout-unit

.ui-layout-{position}

.ui-layout-unit-header

.ui-layout-unit-content

Applies

Main wrapper container element

Layout container

Each layout unit container

Position based layout unit

Layout unit header

Layout unit body

As skinning style classes are global, see the main theming section for more information.

283

Reklaam