7:34 a.m.
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  <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 
+ <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  <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  <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&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>