June 22, 2009

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:

<rich:layout>
  <rich:layoutPanel position="top">
	Top
  </rich:layoutPanel>
  <rich:layoutPanel position="right">
	Right
  </rich:layoutPanel>
  <rich:layoutPanel position="center">
       Center
  </rich:layoutPanel>
  <rich:layoutPanel position="left">
       Left
  </rich:layoutPanel>
  <rich:layoutPanel position="bottom">
	Bottom
  </rich:layoutPanel>
</rich:layout>

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:

<rich:panel>
   <h:panelGrid width="60%">
      <rich:layout>
         <rich:layoutPanel position="top" width="100">
		<h1>RichFaces Application</h1>
	  </rich:layoutPanel>
	  <rich:layoutPanel position="left">
	     <rich:panelMenu style="width:200px" mode="ajax"
	        iconExpandedGroup="disc" iconCollapsedGroup="disc"
		iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
		iconCollapsedTopGroup="chevronDown"
		iconCollapsedTopPosition="right">
	        <rich:panelMenuGroup label="Group 1">
		   <rich:panelMenuItem label="Item 1.1" />
		   <rich:panelMenuItem label="Item 1.2" />
		   <rich:panelMenuItem label="Item 1.3" />
	        </rich:panelMenuGroup>
	        <rich:panelMenuGroup label="Group 2">
		   <rich:panelMenuItem label="Item 2.1" />
		   <rich:panelMenuItem label="Item 2.2" />
		   <rich:panelMenuItem label="Item 2.3" />
		   <rich:panelMenuGroup label="Group 2.4">
		       <rich:panelMenuItem label="Item 2.4.1" />
		       <rich:panelMenuItem label="Item 2.4.2" />
		       <rich:panelMenuItem label="Item 2.4.3" />
		   </rich:panelMenuGroup>
		   <rich:panelMenuItem label="Item 2.5" />
	        </rich:panelMenuGroup>
		<rich:panelMenuGroup label="Group 3">
		   <rich:panelMenuItem label="Item 3.1" />
		   <rich:panelMenuItem label="Item 3.2" />
		   <rich:panelMenuItem label="Item 3.3" />
		   </rich:panelMenuGroup>
		</rich:panelMenu>
	     </rich:layoutPanel>
	     <rich:layoutPanel position="center">
	        <h:panelGrid>
		   <h:outputText value="Favorite Joke:" />
		   <rich:editor />
		   <h:commandButton value="Save" />
		</h:panelGrid>
	     </rich:layoutPanel>
	     <rich:layoutPanel position="right">
	        <rich:layout>
		   <rich:layoutPanel position="top">
			Top
		   </rich:layoutPanel>
		   <rich:layoutPanel position="right">
			Right
		   </rich:layoutPanel>
		   <rich:layoutPanel position="center">
			Center
		   </rich:layoutPanel>
		   <rich:layoutPanel position="left">
			Left
		   </rich:layoutPanel>
		   <rich:layoutPanel position="bottom">
			Bottom
		   </rich:layoutPanel>
		</rich:layout>		
	     </rich:layoutPanel>
	  <rich:layoutPanel position="bottom">
	      <div style="text-align: center">
                 <a href="http://richfaces.org">http://richfaces.org </a>
              </div>
	    </rich:layoutPanel>
	 </rich:layout>
      </h:panelGrid>
</rich:panel>

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

screenshot59_550x254

5 comments

October 20, 2009 - 10:08 am 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

October 20, 2009 - 11:05 am 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

October 20, 2009 - 2:14 pm Rajesh Talageri

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

Appreciate your help.

Regards,
Rajesh

February 9, 2011 - 2:47 pm Balasubramanian

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

Thanking you.

February 9, 2011 - 3:22 pm 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.

5 comments

Post a comment Cancel reply