Layout of this demo page built on top of Yahoo layouts.
The page layout including settings side bar, header and footer are
produced by rich:page component and nesting
grid in body created with Layout/LayoutPanel components pair.
Page component is responsible for complete page structure encoding.
In difference with old a4j:page component it additionally provides
facets for page parts definitions, and optionally provides styling based
on RichFaces skinability.
Next facets available in built-in implementation - top, bottom, and sidebar.
And child content encoded as body part of the page.
Also main important feature - Themes support implemented on top of this component.
Layout is a wrapper component which should consist of layouts panels.
Every layout panel could be positioned inside the layout with corresponding
position attribute(with top, bottom, left, right and center values).
Currently for a horizontally aligned panels the "width" attribute
means a part of outer panel what that component takes.
This is a same semantic as HTML elements have - see HTML MultiLength
In future we plan to expand the layouts with possibility of fixed and percents based width definitions.
Themes feature allows to change the page template on the fly. Themes created
by just using renderer redefinition. So nothing special performed from this
point. But additionally provided CDK archetype allows to create themes
based on jspx templates easily
and pack as separate library together with resources. Then page
could be switched between the themes by just theme attribute usage.
Default page renderer provides just the simple page parts such as
header, footer and sidebar. No additional styling applied to default theme.
simple theme which is just extension of the default renderer
just adds the RichFaces skinning for the page elements.
So the end-developer able to use skinning
parameters or rich-* classes as usually to redefine general look and feel
There are laso three more themes built using new archetype provided
(should be added as separate jar explicitly).
VioletRays based on
freecsstemplates template. It not uses a skin parameters(just stylesheets provided within a template)
And two more which uses RichFaces skin for its elements.
Just next steps should be performed to create own themes:
creates ARTIFACT-ID directory and generate needed pom.xml inside. Then
creates skeleton of new skin inside the created folder.
So, the developer just need to edit the jspx template and add the needed resources.
Also pay attrention to META-INF/themes folder. Every THEME-NAME.theme.property file inside
defines renderer and stylesheet used by this theme. And one of the THEME-NAME should
be used as value for page theme attribute to turn this theme on.
Copyright (c) 2009 RichFaces. All rights reserved. RichFaces version v.3.3.3.Final SVN $Revision: 16741 $