Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.69.  < rich:layout >

The <rich:layout> component is designed to build layouts basing on Yahoo UI Grids CSS

The <rich:layout> component

Figure 6.185. The <rich:layout> component


Table 6.352. rich : layout attributes

Attribute NameDescription
bindingThe attribute takes a value-binding expression for a component property of a backing bean
idEvery component may have a unique id that is automatically created if omitted
renderedIf "false", this component is not rendered

Table 6.353. Component identification parameters

NameValue
component-typeorg.richfaces.layout
component-classorg.richfaces.component.html.HtmlLayout
component-familyorg.richfaces.Layout
renderer-typeorg.richfaces.LayoutRenderer
tag-classorg.richfaces.taglib.layoutTag

To create the simplest layout with the <rich:layout> on a page, use the following syntax:

Example:


...
<rich:layout>
  <rich:layoutPanel position="center">
  <!--center-->
  </rich:layoutPanel>
</rich:layout>
...

Example:

import org.richfaces.component.html.HtmlLayout;

...
Htmllayout mylayout = new HtmlLayout();
...

The <rich:layout> allows to build a grid that can be used to make the layout on a page. The <rich:layout> is used in conjunction with the <rich:layoutPanel> that is used as a child element and carries the main burden of building the grid.

Hence, you need to use the <rich:layout> as a container and <rich:layoutPanel> to create areas inside the container.

This is how you can make a layout with 5 areas:

Example:


...
<rich:layout>
    <rich:layoutPanel position="top">
        <!--top-->
    </rich:layoutPanel>
    <rich:layoutPanel position="left">
        <!--left-->
    </rich:layoutPanel>
    <rich:layoutPanel position="center">
        <!--center-->
    </rich:layoutPanel>
    <rich:layoutPanel position="right">
        <!--right-->
    </rich:layoutPanel>
    <rich:layoutPanel position="bottom">
        <!--bottom-->
    </rich:layoutPanel>
</rich:layout>
...

To get more details about <rich:layoutPanel> please read the chapter about layoutPanel in the guide.

Visit layout page at RichFaces Live Demo for examples of component usage and their sources.

The Layout components for RichFaces 3.3.1 on the JBoss.org Wiki