Using rich:layout and rich:layoutPanel components

It’s been a while since I posted any RichFaces examples. This post shows how to use new rich:layout and rich:layoutPanel components from RichFaces 3.3.1 .

rich:layoutPanel is a component that allows to define layout with the following logical panels:


The logical panel parts are defined via position attribute:


Any content can go inside the panels and nesting is also allowed. rich:layoutPanel is always placed inside rich:panel which acts as a parent container.

Here is an example with other components inside:


RichFaces Application

Top Right Center Left Bottom

The following will be rendered. Notice that I’m nesting another rich:layout inside.



  1. Hi,

    I think this tutorial gives a very good idea about creating a UI structure. I am a User Experience Designer and currently working on rich faces.

    I wanted to know if its okay to put custom HTML / CSS code within rich faces tags. For e.g. within the “top” section you have included a H1 tag. My requirement is that I have to create a web application that has a regular header with the company logo, top-level navigation menu, Signout option everything in the header.

    Therefore, is it okay to use the tags and CSS that I have in my HTML prototype to create the header or do I have to use everything that is defined under RichFaces, JSP domain?

    I guess what I am trying to ask is that is it okay for a designer to apply his template (CSS, Jquery Menus, MooTools) on RichFaces or is it necessary to only rely on RichFaces skins. Do Rich Faces skins allow flexibility to design an entire layout or are they skins for each components.

    I have a feeling I might be asking many questions at a time. If there is any ambiguity please do email me on talageri(at)gmail(dot)com
    or call me on – Four Zero Eight – Three Zero Six – Eight – Five – One – Eight.


  2. max says:

    You can mix and match RichFaces tags and HTML as well as use any CSS. Look in this section on how to customise, extend or overwrite RichFaces skins:

  3. Thanks! I will go through the link and get back if I have any questions.

    Appreciate your help.


  4. Balasubramanian says:

    I need layout component for richfaces 4. Any idea, when this component will be available.

    Thanking you.

  5. max says:

    @Balasubramanian: I’m not sure yet if layout components will make it into 4.0.0.Final. As an alternative, you could use HTML tags for layout until the layout components are added to 4.x.

Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.