8:20 a.m.
Author: ilya_shaikovsky
Date: 2008-05-22 09:20:44 -0400 (Thu, 22 May 2008)
New Revision: 8695
Added:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin.xhtml
trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/snippets/
trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/snippets/panel.xcss
trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/usage.xhtml
Modified:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet2.css
Log:
plugnskin feature described.
Added:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/snippets/panel.xcss
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/snippets/panel.xcss
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/snippets/panel.xcss 2008-05-22
13:20:44 UTC (rev 8695)
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<f:template xmlns:f='http:/jsf.exadel.com/template'
+ xmlns:u='http:/jsf.exadel.com/template/util'
+ xmlns="http://www.w3.org/1999/xhtml" >
+
+ <u:selector name=".rich-panel">
+ <u:style name="padding" value="0px" />
+ <u:style name="margin-bottom" value="5px" />
+ <u:style name="border-color" skin="newBorder" />
+ </u:selector>
+
+ <u:selector name=".rich-panel-header">
+ <u:style name="color" skin="headerTextColor" />
+ <u:style name="border-top" value="0px" />
+ <u:style name="border-right" value="0px" />
+ <u:style name="border-left" value="0px" />
+ <u:style name="border-color" skin="newBorder" />
+
+ <u:style name="background-position" value="0% 50%" />
+
+ <u:style name="background-image">
+ <f:resource
f:key="org.richfaces.renderkit.html.CustomizeableGradient">
+ <f:attribute name="valign" value="middle" />
+
+ <f:attribute name="gradientHeight" value="22px"
/>
+ <f:attribute name="baseColor"
skin="headerBackgroundColor" />
+ <f:attribute name="gradientColor"
skin="headerGradientColor" />
+ </f:resource>
+ </u:style>
+
+ <u:style name="padding" value="4px 4px 4px 14px" />
+ </u:selector>
+
+ <u:selector name=".rich-panel-body">
+ <u:style name="padding" value="10px 10px 10px 14px" />
+ <u:style name="background-position" value="0% -496px"
/>
+ <u:style name="background-repeat" value="repeat-x" />
+ <u:style name="background-image">
+ <f:resource
f:key="org.richfaces.renderkit.html.CustomizeableGradient">
+ <f:attribute name="valign" value="bottom" />
+ <f:attribute name="gradientType" value="plain"
/>
+ <f:attribute name="gradientColor" skin="intShadow"
/>
+ <f:attribute name="baseColor"
skin="generalBackgroundColor" />
+
+ <f:attribute name="gradientHeight" value="4px"
/>
+ </f:resource>
+ </u:style>
+ </u:selector>
+</f:template>
\ No newline at end of file
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/usage.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/usage.xhtml
(rev 0)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin/usage.xhtml 2008-05-22
13:20:44 UTC (rev 8695)
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html 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:a4j="http://richfaces.org/a4j"
+ xmlns:rich="http://richfaces.org/rich">
+<ui:composition template="/templates/component-sample.xhtml">
+ <ui:define name="sample">
+ <style>
+ ul,ol {
+ font-size: 11px !important;
+ }
+ .viewsourcepanel {
+ padding:10px;
+ width:100%;
+ overflow:auto;
+ border-width:0;
+ }
+ .viewsourcebody {
+ padding:0;
+ }
+ </style>
+ <p>
+ Plug-n-Skin feature is designed to freely extend and override one of base
+ RichFaces skins. It allows to redefine the look of a set of components
+ by taking the base skin as basis and plugging-in custom styles.
+ </p>
+ <p>
+ You may freely create your own pluggable skin in a next way:
+ </p>
+ <ul>
+ <li>
+ <b>Create your new pluggable skins project with CDK</b> using
+ <i>mvn archetype:create -DarchetypeGroupId=org.richfaces.cdk
+ -DarchetypeArtifactId=maven-archetype-plug-n-skin
+ -DarchetypeVersion=*RF-VERSION* -DartifactId=*ARTIFACT-ID*
+ -DgroupId=*GROUP-ID* -Dversion=*VERSION*</i> command from the
+ root folder of richfaces.
+ </li>
+ <li>
+ <b>Create new pluggable skin inside project</b> using
+ <i>mvn cdk:add-skin -Dname=*SKIN-NAME* -Dpackage=*SKIN-PACKAGE*</i>
+ from the folder created on the previous step.
+ </li>
+ </ul>
+ <p>
+ In the result you'll get new skin project.
+ </p>
+ <p class="note">
+ In order to check some other optional parameters for CDK commands and
+ more info about the feature in general - visit corresponding
+ developer guide section
+ and explore <b>Laguna</b> skin project in richfaces/samples svn.
+ </p>
+ <p>
+ Main files in the created pluggable skin project
+ <i>(createdSkinName\src\main\resources\META-INF\skins\ folder)</i> are:
+ </p>
+ <ul>
+ <li>
+ <b><createdSkinName>.skin.properties</b> which
+ should contains base parameters for the skin such as
+ <i>baseSkin</i>,
+ <i>generalStyleSheet</i>, <i>gradientType</i> and some others
+ and could contain skin parameters redefinitions for the skin.
+ </li>
+ <li>
+ <b><createdSkinName>.xcss</b> which defines all the
components
+ xcss imports.
+ </li>
+ <li>
+ <b><createdSkinName>-ext.xcss</b> defines imports for
standard skinning xcss files.
+ </li>
+ </ul>
+ <p>
+ All classes for all the components and standard skinning classes already
+ listed in corresponding imported xcss files. So you'll only need to fill them
+ with the properties you need.
+ </p>
+ <p>
+ Check for example classes defined in panel component xcss for Laguna skin:
+ </p>
+ <fieldset class="demo_fieldset">
+ <legend class="demo_legend">panel.xcss from laguna
skin</legend>
+ <rich:panel styleClass="viewsourcepanel" bodyClass="viewsourcebody
rich-laguna-panel-no-header">
+ <rich:insert src="/richfaces/plugnskin/snippets/panel.xcss"
highlight="xhtml"/>
+ </rich:panel>
+ </fieldset>
+ </ui:define>
+</ui:composition>
+</html>
Added: trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin.xhtml
===================================================================
--- trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin.xhtml
(rev 0)
+++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/plugnskin.xhtml 2008-05-22
13:20:44 UTC (rev 8695)
@@ -0,0 +1,20 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html 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">
+<ui:composition template="/templates/main.xhtml">
+ <ui:define name="title">RichFaces - Open Source Rich JSF Components -
Plug'n'Skin Feature</ui:define>
+ <ui:define name="body">
+ <rich:tabPanel switchType="server" styleClass="top_tab"
contentClass="content_tab" headerClass="header_tabs_class"
inactiveTabClass="inactive_tab" activeTabClass="active_tab">
+ <rich:tab label="Usage">
+ <ui:include src="/richfaces/plugnskin/usage.xhtml"/>
+ </rich:tab>
+ <ui:include src="/templates/include/tagInfo.xhtml">
+ <ui:param name="path" value="rich/plugnskin"/>
+ </ui:include>
+ </rich:tabPanel>
+ </ui:define>
+</ui:composition>
+</html>
Modified:
trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet2.css
===================================================================
---
trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet2.css 2008-05-22
13:14:58 UTC (rev 8694)
+++
trunk/samples/richfaces-demo/src/main/webapp/richfaces/standardSkinning/snippets/snippet2.css 2008-05-22
13:20:44 UTC (rev 8695)
@@ -1,9 +1,9 @@
...
-rich-container select {
+.rich-container select {
//class content
}
-rich-container hr {
+.rich-container hr {
//class content
}
...
\ No newline at end of file