Changing the layout of the page dynamically


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


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


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.




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:selectOneMenu id="select" value="#{themes.customTheme}" >
          <f:selectItem itemLabel="brewedcoffee" itemValue="brewedcoffee" />
          <f:selectItem itemLabel="violetRays" itemValue="violetRays" />
<h:commandButton value="Set new theme" />



customTheme is just a String type bean field.