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:
Top
Right
Center
Left
Bottom
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.
Max Katz 
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.
Thanks!
-Rajesh
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: http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/ArchitectureOverview.html#customstyles
Thanks! I will go through the link and get back if I have any questions.
Appreciate your help.
Regards,
Rajesh
I need layout component for richfaces 4. Any idea, when this component will be available.
Thanking you.
@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.