Current we have the following implementation of the layoutPanel set:
<rich:layoutPanel type="gc"> <rich:layoutPanel type="u first"> left part of the body </rich:layoutPanel> <rich:layoutPanel type="u"> right part of the body </rich:layoutPanel> </rich:layoutPanel>
I.e. the structure and applied types reflect the structure and applied css classes of the original Y! CSS Grid
The advantages are:
1. No innovations or future enhancement that need to be added (as well as tested) over the original Y! code
2. Ability to refer to the Y! UI doc for details
The disadvantages are:
1. needs to memorize the possible type names.
2. tightly linked with Y! CSS Grid. I.e. less room for the further enhancements
3. needs to hardcode the restriction that top level layoutPanel should have no other children as layoutPanel
4. In the newest version of CSS Grid (still in beta), Yahoo changes the class names (i.e. the advantage #2 above will not be valid in the future)
Due the fact that we have more disadvantages than advantages we are thinking about more abstract solutions.
In any case, the rendered layout will be the same: outer block with set of inner block. So, the changes are only on the declarative level. I.e. how to represent the feature on the XHTML (JSP) page.
The are two major solutions: one with facets, the other with component.
<rich:layout leftPanelWidth="30%" centralPanelWidth="30%" middlePanelWidth="30%"> <f:facet name="left"> ..... </f:facet> <f:facet name="center"> ..... </f:facet> <f:facet name="right"> ..... </f:facet> </rich:layout>
1. traditional JSF approach
2. less number of used components
3. more control on the synchronization between layout panels
1. facet has no own attributes, so the specific attributes go to the top level
2. onclick, onmouseover and other onxxxxx are not available for layout panels
The facet-less approach:
<rich:layout> <rich:layoutPanel id="lfoo" type="left" width="30%"> ... </rich:layoutPanel> <rich:layoutPanel id="cbar" type="central" width="30%"> ... </rich:layoutPanel> <rich:layoutPanel type="right" width="30%"> ... </rich:layoutPanel> </rich:layout>
1. each layout panel has own set of attributes
2. ability to re-render each panel individually by explicitly defined id
1. more components required (two vs. one)
2. broken synchronization is possible (after re-rendering on of the panel with non-appropriate set of attributes like width)