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.