Author: ilya_shaikovsky Date: 2009-04-24 08:34:50 -0400 (Fri, 24 Apr 2009) New Revision: 13823 Added: trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/ trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridcenter.xhtml trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridleft.xhtml trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridtop.xhtml trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/sidebar.xhtml trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/snippet1.txt trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/themes.xhtml Modified: trunk/samples/richfaces-demo/src/main/webapp/templates/page/template.xhtml Log: layout templates Added: trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridcenter.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridcenter.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridcenter.xhtml 2009-04-24 12:34:50 UTC (rev 13823) @@ -0,0 +1,24 @@ +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:rich="http://richfaces.org/rich" + xmlns:a4j="http://richfaces.org/a4j"> + <p> + <b>Layout/LayoutPanel components</b> based on &#160;<h:outputLink value="http://developer.yahoo.com/yui/grids/">Yahoo Nesting Grids</h:outputLink>. + + </p> + <p> + Layout is a wrapper component which should consist of layouts panels. + Every layout panel could be positioned inside the layout with corresponding + position attribute(<i>with top, bottom, left, right and center values</i>). + </p> + <p> + 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&#160; + <h:outputLink value="http://www.w3.org/TR/html401/types.html#type-multi-length" target="blank">HTML MultiLength</h:outputLink> + In future we plan to expand the layouts with possibility of fixed and percents based width definitions. + </p> + +</ui:composition> \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridleft.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridleft.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridleft.xhtml 2009-04-24 12:34:50 UTC (rev 13823) @@ -0,0 +1,20 @@ +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:rich="http://richfaces.org/rich" + xmlns:a4j="http://richfaces.org/a4j"> + <p> + <b>Page component</b> is responsible for complete page structure encoding. + In difference with old <i>a4j:page</i> component it additionally provides + facets for page parts definitions, and optionally provides styling based + on <b>RichFaces</b> skinability. + </p> + <p> + Next facets available in built-in implementation - <b>top, bottom, and sidebar</b>. + And child content encoded as body part of the page. + </p> + <p> + Also main important feature - <b>Themes support</b> implemented on top of this component. + </p> +</ui:composition> \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridtop.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridtop.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/gridtop.xhtml 2009-04-24 12:34:50 UTC (rev 13823) @@ -0,0 +1,16 @@ +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:rich="http://richfaces.org/rich" + xmlns:a4j="http://richfaces.org/a4j"> + <p style="font-style: italic"> + Layout of this demo page built on top of &#160;<h:outputLink target="blank" value="http://developer.yahoo.com/yui/layout/">Yahoo layouts</h:outputLink>. + The page layout including settings side bar, header and footer are + produced by <b>rich:page</b> component and nesting + grid in body created with <b>Layout/LayoutPanel</b> components pair. + </p> + <p style="font-style: italic"> + Complete info about the layouts design could be found at &#160;<h:outputLink target="blank" value="http://www.jboss.org/community/docs/DOC-13336">RichFaces Layouts design wiki page</h:outputLink>. + </p> +</ui:composition> \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/sidebar.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/sidebar.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/sidebar.xhtml 2009-04-24 12:34:50 UTC (rev 13823) @@ -0,0 +1,39 @@ +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:rich="http://richfaces.org/rich" + xmlns:a4j="http://richfaces.org/a4j"> + <h:form> + <h:panelGrid columns="2"> + <f:facet name="header"> + <h:outputText value="Page Attributes"/> + </f:facet> + <h:outputLabel for="theme" value="Page Theme" /> + <h:selectOneMenu id="theme" style="width:75px" + value="#{layoutBean.theme}"> + <f:selectItem itemValue="" itemLabel="Default" /> + <f:selectItem itemValue="simple" itemLabel="Simple" /> + <f:selectItem itemValue="violetRays" itemLabel="Violet Rays" /> + <f:selectItem itemValue="theme1" itemLabel="Theme One" /> + <f:selectItem itemValue="theme2" itemLabel="Theme Two" /> + </h:selectOneMenu> + <h:outputLabel for="width" value="Page Width" /> + <h:inputText id="width" value="#{layoutBean.width}" style="width:75px"/> + <h:outputLabel for="sidebarwidth" value="Sidebar Width" /> + <h:inputText id="sidebarwidth" value="#{layoutBean.sidebarWidth}" style="width:75px"/> + <h:outputLabel for="position" value="Side bar position" /> + <h:selectOneMenu value="#{layoutBean.position}" id="position" style="width:75px"> + <f:selectItem itemValue="left" /> + <f:selectItem itemValue="right" /> + </h:selectOneMenu> + <h:outputLabel for="skin" value="Current skin" /> + <h:selectOneMenu value="#{skinBean.skin}" id="skin" style="width:75px"> + <f:selectItem itemValue="blueSky" itemLabel="blueSky" /> + <f:selectItem itemValue="ruby" itemLabel="ruby" /> + <f:selectItem itemValue="emeraldTown" itemLabel="emeraldTown" /> + </h:selectOneMenu> + <h:commandButton value="Change"></h:commandButton> + </h:panelGrid> + </h:form> +</ui:composition> Added: trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/snippet1.txt =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/snippet1.txt (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/snippet1.txt 2009-04-24 12:34:50 UTC (rev 13823) @@ -0,0 +1,7 @@ +mvn archetype:create +-DarchetypeGroupId=org.richfaces.cdk +-DarchetypeArtifactId=maven-archetype-theme +-DarchetypeVersion=RF-VERSION +-DartifactId=ARTIFACT-ID +-DgroupId=GROUP-ID +-Dversion=VERSION \ No newline at end of file Added: trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/themes.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/themes.xhtml (rev 0) +++ trunk/samples/richfaces-demo/src/main/webapp/templates/page/includes/themes.xhtml 2009-04-24 12:34:50 UTC (rev 13823) @@ -0,0 +1,62 @@ +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:rich="http://richfaces.org/rich" + xmlns:a4j="http://richfaces.org/a4j"> + <p> + <b>Themes feature </b>allows to change the page template on the fly. <b>Themes</b> created + by just using <b>renderer</b> redefinition. So nothing special performed from this + point. But additionally provided <b>CDK archetype</b> allows to create themes + based on <b>jspx templates</b> easily + and pack as separate library together with resources. Then page + could be switched between the themes by just <b>theme attribute</b> usage. + </p> + <p> + <b>Default page renderer</b> provides just the simple page parts such as + header, footer and sidebar. No additional styling applied to default theme. + </p> + <p> + <b>simple</b> 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 + for header/footer/sidebar. + </p> + <p> + There are laso three more themes built using new archetype provided + (should be added as separate jar explicitly). + <b>VioletRays</b> based on<a href="http://www.freecsstemplates.org/css-templates/"> + freecsstemplates template</a>. It not uses a skin parameters(just stylesheets provided within a template) + And two more which uses RichFaces skin for its elements. + </p> + <p> + Just next steps should be performed to create own themes: + </p> + <fieldset> + <legend><b>Themes project creation</b></legend> + mvn archetype:create<br/> + -DarchetypeGroupId=org.richfaces.cdk<br/> + -DarchetypeArtifactId=maven-archetype-theme<br/> + -DarchetypeVersion=RF-VERSION <br/> + -DartifactId=ARTIFACT-ID <br/> + -DgroupId=GROUP-ID<br/> + -Dversion=VERSION + </fieldset> + <p> + creates ARTIFACT-ID directory and generate needed pom.xml inside. Then + </p> + <fieldset> + <legend><b>Theme creation</b></legend> + mvn cdk:add-theme -Dname=THEME-NAME + </fieldset> + <p> + creates skeleton of new skin inside the created folder. + </p> + <p> + So, the developer just need to edit the <b>jspx template</b> and add the <b>needed resources</b>. + Also pay attrention to <b>META-INF/themes</b> folder. Every <i><b>THEME-NAME.theme.property</b></i> file inside + defines renderer and stylesheet used by this theme. And one of the <b>THEME-NAME</b> should + be used as value for <b>page theme attribute</b> to turn this theme on. + </p> +</ui:composition> \ No newline at end of file Modified: trunk/samples/richfaces-demo/src/main/webapp/templates/page/template.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/templates/page/template.xhtml 2009-04-24 12:34:04 UTC (rev 13822) +++ trunk/samples/richfaces-demo/src/main/webapp/templates/page/template.xhtml 2009-04-24 12:34:50 UTC (rev 13823) @@ -7,74 +7,48 @@ contentType="text/html" theme="#{layoutBean.theme}" width="#{layoutBean.width}" sidebarWidth="#{layoutBean.sidebarWidth}" sidebarPosition="#{layoutBean.position}"> - <style> -.rich-page-header { - padding: 0; - margin: 0; - background: none; -} -</style> <f:facet name="sidebar"> - <h:form> - <h2>Page Attributes</h2> - <h:panelGrid columns="2"> - <h:outputLabel for="theme" value="Page Theme" /> - <h:selectOneMenu id="theme" style="width:100px" - value="#{layoutBean.theme}"> - <f:selectItem itemValue="" itemLabel="Default" /> - <f:selectItem itemValue="simple" itemLabel="Simple" /> - <f:selectItem itemValue="violetRays" itemLabel="Violet Rays" /> - <f:selectItem itemValue="theme1" itemLabel="Theme One" /> - <f:selectItem itemValue="theme2" itemLabel="Theme Two" /> - </h:selectOneMenu> - <h:outputLabel for="width" value="Page Width" /> - <h:inputText id="width" value="#{layoutBean.width}" /> - <h:outputLabel for="sidebarwidth" value="Sidebar Width" /> - <h:inputText id="sidebarwidth" value="#{layoutBean.sidebarWidth}" /> - <h:outputLabel for="position" value="Side bar position" /> - <h:selectOneMenu value="#{layoutBean.position}" id="position"> - <f:selectItem itemValue="left" /> - <f:selectItem itemValue="right" /> - </h:selectOneMenu> - <h:outputLabel for="skin" value="Current skin" /> - <h:selectOneMenu value="#{skinBean.skin}" id="skin"> - <f:selectItem itemValue="blueSky" itemLabel="blueSky" /> - <f:selectItem itemValue="ruby" itemLabel="ruby" /> - <f:selectItem itemValue="emeraldTown" itemLabel="emeraldTown" /> - </h:selectOneMenu> - <h:commandButton value="Change"></h:commandButton> - </h:panelGrid> - </h:form> + <ui:include src="/richfaces/layouts/page/includes/sidebar.xhtml" /> </f:facet> <f:facet name="header"> - <rich:toolBar height="50px"> - <f:verbatim> - <h2>RichFaces Layouts</h2> - </f:verbatim> - <rich:toolBarGroup location="right"> - <h:outputLink value="#">Developer Guide</h:outputLink> - <h:outputLink value="#">Download RichFaces</h:outputLink> - <h:outputLink value="#">Support</h:outputLink> - </rich:toolBarGroup> - </rich:toolBar> - + <h:panelGroup> + <table width="100%"><tbody><tr> + <td><h2>RichFaces Layouts</h2></td> + <td align="right"> + <h:outputLink value="http://labs.jboss.com/portal/jbossrichfaces/downloads"&g...; + <h:outputLink value="http://jboss.com/index.html?module=bb&amp;op=viewforum&am...; + <h:outputLink value="http://labs.jboss.com/file-access/default/members/jbossrichfa... Guide</h:outputLink> + </td> + </tr></tbody></table> + </h:panelGroup> </f:facet> <f:facet name="footer"> <h:outputText value="Copyright (c) 2009 RichFaces. All rights reserved. RichFaces version #{environment.version}" /> </f:facet> + <rich:tabPanel switchType="client"> + <rich:tab label="overview"> <rich:layout> <rich:layoutPanel position="top" width="100%"> - Common page information will be there. + <ui:include src="/richfaces/layouts/page/includes/gridtop.xhtml" /> </rich:layoutPanel> - <rich:layoutPanel position="left" width="33"> - <f:verbatim>Common layouts info will be there </f:verbatim> + <rich:layoutPanel position="left" width="50"> + <ui:include src="/richfaces/layouts/page/includes/gridleft.xhtml" /> </rich:layoutPanel> - <rich:layoutPanel position="center" width="33"> - <f:verbatim>More Layouts info will be there</f:verbatim> + <rich:layoutPanel position="center" width="50"> + <ui:include src="/richfaces/layouts/page/includes/gridcenter.xhtml" /> </rich:layoutPanel> - <rich:layoutPanel position="right" width="33"> - <f:verbatim>Link to specification and so on will be there</f:verbatim> + <rich:layoutPanel position="bottom"> + <ui:include src="/templates/include/sourceview.xhtml"> + <ui:param name="sourcepath" value="/richfaces/layouts/page/template.xhtml"/> + <ui:param name="openlabel" value="View this page template source code"/> + </ui:include> + <br/> </rich:layoutPanel> </rich:layout> + </rich:tab> + <rich:tab label="Themes support"> + <ui:include src="/richfaces/layouts/page/includes/themes.xhtml" /> + </rich:tab> + </rich:tabPanel> </rich:page>