[richfaces-svn-commits] JBoss Rich Faces SVN: r13825 - in trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts: page and 1 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Fri Apr 24 08:37:33 EDT 2009
Author: ilya_shaikovsky
Date: 2009-04-24 08:37:33 -0400 (Fri, 24 Apr 2009)
New Revision: 13825
Added:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridcenter.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridleft.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridtop.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/sidebar.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/snippet1.txt
trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/themes.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/template.xhtml
Log:
layout sample pages moved
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridcenter.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridcenter.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridcenter.xhtml 2009-04-24 12:37:33 UTC (rev 13825)
@@ -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/richfaces/layouts/page/includes/gridleft.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridleft.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridleft.xhtml 2009-04-24 12:37:33 UTC (rev 13825)
@@ -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/richfaces/layouts/page/includes/gridtop.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridtop.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/gridtop.xhtml 2009-04-24 12:37:33 UTC (rev 13825)
@@ -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/richfaces/layouts/page/includes/sidebar.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/sidebar.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/sidebar.xhtml 2009-04-24 12:37:33 UTC (rev 13825)
@@ -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/richfaces/layouts/page/includes/snippet1.txt
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/snippet1.txt (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/snippet1.txt 2009-04-24 12:37:33 UTC (rev 13825)
@@ -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/richfaces/layouts/page/includes/themes.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/themes.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/includes/themes.xhtml 2009-04-24 12:37:33 UTC (rev 13825)
@@ -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
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/template.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/template.xhtml (rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/layouts/page/template.xhtml 2009-04-24 12:37:33 UTC (rev 13825)
@@ -0,0 +1,54 @@
+<rich:page 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" markupType="xhtml"
+ contentType="text/html" theme="#{layoutBean.theme}"
+ width="#{layoutBean.width}" sidebarWidth="#{layoutBean.sidebarWidth}"
+ sidebarPosition="#{layoutBean.position}">
+ <f:facet name="sidebar">
+ <ui:include src="/richfaces/layouts/page/includes/sidebar.xhtml" />
+ </f:facet>
+ <f:facet name="header">
+ <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">Download</h:outputLink> 
+ <h:outputLink value="http://jboss.com/index.html?module=bb&op=viewforum&f=261">Support</h:outputLink> 
+ <h:outputLink value="http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/index.html">Developer 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%">
+ <ui:include src="/richfaces/layouts/page/includes/gridtop.xhtml" />
+ </rich:layoutPanel>
+ <rich:layoutPanel position="left" width="50">
+ <ui:include src="/richfaces/layouts/page/includes/gridleft.xhtml" />
+ </rich:layoutPanel>
+ <rich:layoutPanel position="center" width="50">
+ <ui:include src="/richfaces/layouts/page/includes/gridcenter.xhtml" />
+ </rich:layoutPanel>
+ <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>
More information about the richfaces-svn-commits
mailing list