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:

screenshot58

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.

screenshot59_550x254

5 thoughts on “Using rich:layout and rich:layoutPanel components

  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.

    Thanks!
    -Rajesh

  2. @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 Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s