The scriptless approach with using CSS and semantic layout based on the Yahoo UI CSS grid is offered for RichFaces 3.3.1:
http://developer.yahoo.com/yui/grids/
CSS Grid presumes two parts:
- top layout with ability to define the width of the page as well as predefined set of header, footer and side panel.
- nested grid that allows to divide the inner panel of the body into the vertical section with pre-defined set of panels
The top layout will be implemented with extending the existing rich:page component. The facet with name "header", "footer" and "sidebar" will define the major part of the page.
The width of the page is defined with the "width" attribute of the rich:page components. The width might be defined as 100% or in px:
Example:
<rich:page width="960px">
...
</rich:page>
If the width is not defined it equals to 100%.
Yahoo CSS grid has a predefined set of templates with sidebar. The type of template define the position and the width of the sidebar.
The Yahoo UI CSS has the following templates set:
Y! Templates
Optionally choose the secondary column's width and orientation with one of six templates.
- .yui-t1 - Two columns, narrow on left, 160px
- .yui-t2 - Two columns, narrow on left, 180px
- .yui-t3 - Two columns, narrow on left, 300px
- .yui-t4 - Two columns, narrow on right, 180px
- .yui-t5 - Two columns, narrow on right, 240px
- .yui-t6 - Two columns, narrow on right, 300px
RichFaces Template implementation
For the simplicity reason we can provide universal solution when the position and width are defined with attributes of the rich:page component. Internally, we will use the predefined yui classes if the width matches one from the set or generate the custom classes otherwise.
Example of the page with header and the left sidebar with width 300px:
<rich:page width="980" sidebarPosition="left" sidebarWidth="300">
<f:facet name="header">
header
</f:facet>
<f:facet name="sidebar">
menu stuff
</facet>
body of the components
<f:facet name="footer">
footer
</f:facet>
</rich:page>
If inner panel of the body need to be divided into parts, the rich:layout/rich:layoutPanel component is used.
Page Styles
To make it possible to define the styling for the page and enable skinnability, rich:page can contains the set of css classes.
<rich:page headerClass="hfoo" footerClass="fbar" sidebarClass="sbfoo" bodyClass="bbar">
.....
</rich:page>
The default styling(empty classes by default and defined with skin-mapped properties in further described skinned themes) is defined with skinnable css classes:
- rich-page
- rich-page-header
- rich-page-footer
- rich-page-body
Page Themes
The feature will be used in order to configure the rendering way for page component. To get more details on how to create a custom theme please read
Standard page renderer will provide just the options described above (header, footer, sidebar elements) with just sidebar positioning and elements sizes options. Lets name this theme option default
Additionally, extension of the default renderer should be done in order to turn on the RichFaces skinning for the page elements. It should allow to map the style options for described page elements to the RichFaces skin.Then the end-developer will be able to use skinning parameters or rich-* classes as usually to redefine general look and feel for header/footer/sidebar.Lets name this theme option simple
Also the third option is to provide real themes usage within the application. Real themes from http://www.freecsstemplates.org/css-templates/ should be used to create the renderer templates based on this themes. Also stylesheets for this themes should be packed together with the other resources. The themes should be switchable in a runtime.
Theme Implementation
Every theme should be configured with the properties file analogous to skinning file. It should be named <themeName>.theme.properties. In this file two properties could be used(currently):
- stylesheet parameter will define the path to stylesheet to be used with this theme.
for example styleSheet=resource:///org/richfaces/renderkit/html/css/simple.xcss for simple theme
- rendererType parameter should be used to define the renderer to be used by page component within the theme.
e.g. rendererType=org.richfaces.CssZendPageRenderer used currently with csszend theme.
So, any user will be able to perform the same steps to use own theme within the application. (Just like plug'n'skin feature for skins creation)
So, Theme attribute added to page component and currently has next options:
- default
- simple
- csszend
- violetRain
- and so one in future after design works.
Nesting Grids (Layout components)
Nesting layouts should be available by using next components:
- rich:layout – represents the layout with set of defined layout areas(panels) inside.
- rich:layoutPanel – represents the one of the child layout areas
Layout Panels types
Every layout panel could has one of next types:
- right
- center
- left
- top
- bottom
Type of the layoutPanel should be defined with position attribute
Layout panels width
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 http://www.w3.org/TR/html401/types.html#type-multi-length. Next sample shows such width definition:
Layout panel Example
The following example shows the layout divided into two equal parts:
<rich:layout>
<rich:layoutPanel position=”left” width=”50*”>
left part of the body
</rich:layoutPanel>
<rich:layoutPanel type=”right” width=”50*”>
right part of the body
</rich:layoutPanel>
</rich:layout>
OPEN ISSUE: What about height for top and bottom parts. Which values available - fixed in px and so on and percent both?
Nesting the layouts
Layout grids could be nested by using rich:layout component as child inside one of the rich:layoutPanel in parent one.
Layout Panels skinning
This point is still need to be discussed additionally to post clear results.
http://www.jboss.org/index.html?module=bb&op=viewtopic&p=4215693#4215693
Complete Sample of the page with nested layouts
rich:layoutPanel together wih rich:page might be combined to define the various set of combination for application layout.
The following example show the page with header, footer, sidebar on the left and the body divided into two equal parts:
<rich:page sidebarPosition="left" sidebarWidth="300">
<f:facet name="header">
header
</f:facet>
<f:facet name="sidebar">
menu stuff
</facet>
<rich:layout>
<rich:layourtPanel width="50*"> ////will no type there and in next code snippets!
left part of the body
</rich:layoutPanel>
<rich:layourtPanel width="50*">
right part of the body
</rich:layoutPanel>
</rich:layout>
<f:facet name="footer">
footer
</f:facet>
</rich:page>
The following example shows the page with header, body consists of three equal columns and without sidebar and footer
<rich:page>
<f:facet name="header">
header
</f:facet>
<rich:layout>
<rich:layoutPanel width="33*">
left part of the body
</rich:layoutPanel>
<rich:layoutPanel width="33*">
middle part of the body
</rich:layoutPanel>
<rich:layoutPanel width="33*">
right part of the body
</rich:layout>
</rich:layout>
</rich:page>
_________________________________________________________________________________________________
Other implementation that is based on the Yahoo CSS grid that has more explanation about the technique is below:
This is one more explanation of Yahoo UI CSS grid:
http://layouts.ironmyers.com/
Guide:
http://layouts.ironmyers.com/customize/
Possible layouts:
http://layouts.ironmyers.com/750_pixel_Layouts/
Comments