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.67.  < rich:layout >

The <rich:layout> component is designed to build layouts.

Table 6.335. 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.336. 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: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 arrange the layout on the page. The <rich:layout> is used in conjunction with the <rich:layoutPanel> that is used as a child element and carries the main burned of building grid.

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

By setting the "position" attribute of each <rich:layoutPanel> to top, left, center, right, bottom you can build up to 5 corresponding 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 create a two-column layout you need to use two <rich:layoutPanel> one of which should be a central area(position="center") and the other one should be either left or right. The following snippet will help you understand the way <rich:layout> works.


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

Moreover, you can nest the <rich:layoutPanel> tags into <rich:layoutPanel> to divide the area as well.

Vizit layout page at RichFaces live demo for examples of component usage and their sources.

" Using the "rendered" attribute of <rich:layout>" article in RichFaces cookbook at JBoss portal gives an example of code of the component usage case.