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 responses to “Using rich:layout and rich:layoutPanel components”

  1. Rajesh Talageri Avatar
    Rajesh Talageri

    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

    Reply
  2. max Avatar
    max

    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

    Reply
  3. Rajesh Talageri Avatar
    Rajesh Talageri

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

    Appreciate your help.

    Regards,
    Rajesh

    Reply
  4. Balasubramanian Avatar
    Balasubramanian

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

    Thanking you.

    Reply
  5. max Avatar
    max

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

    Reply

Leave a reply to Rajesh Talageri Cancel reply