Problem

You need to change the layout of a page on the fly.

Solution

Use <rich:page>, create several custom themes and redefine the render with the theme attribute.

Details

The top level layout of the page can be organized with the <rich:page> component which by default provides a number of facets to create page blocks.The facets are:

• pageHeader
• header
• subheader
• sidebar
• footer
                                 

Their names are quite self-explanatory.

Additionally RichFaces CDK provides a tool to create a custom theme which can help redefine the way the <rich:page>component is rendered.The Creating a Theme for  <rich:page/> Component article  tells how to create a theme and add it to your project.

Hence the most elegant way of changing the layout of a page is to make several custom themes, include the jars into your project, compose the layout with <rich:page> and change the theme with theme attribute.

Example

Let’s take 2 custom themes(brewedcoffee, made in the Creating a Theme for  <rich:page/> Component article , and violetRays) and now we want to toggle dynamically between them.  Toggling can be implemented like this:

<h:form>
<h:selectOneMenu id="select" value="#{themes.customTheme}" >
          <f:selectItem itemLabel="brewedcoffee" itemValue="brewedcoffee" />
          <f:selectItem itemLabel="violetRays" itemValue="violetRays" />
      </h:selectOneMenu>
<h:commandButton value="Set new theme" />
</h:form>

customTheme is just a String type bean field.