From richfaces-svn-commits at lists.jboss.org Thu Jul 10 11:59:23 2008 Content-Type: multipart/mixed; boundary="===============6562833378673371130==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r9515 - trunk/docs/userguide/en/src/main/docbook/modules. Date: Thu, 10 Jul 2008 11:59:23 -0400 Message-ID: --===============6562833378673371130== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: msorokin Date: 2008-07-10 11:59:23 -0400 (Thu, 10 Jul 2008) New Revision: 9515 Modified: trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml Log: http://jira.jboss.com/jira/browse/RF-3163 The article about Plug-n-Skin is rewritten and some info added. Modified: trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover= .xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2= 008-07-10 15:33:24 UTC (rev 9514) +++ trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2= 008-07-10 15:59:23 UTC (rev 9515) @@ -4023,7 +4023,7 @@ = The - "e;name"e; + "name" attribute of <u:selector> tag defines the CSS selector, while "name" @@ -4056,16 +4056,19 @@ Plug-n-Skin = - Plug-n-Skin feature is designed to easily create a new - custom skin which extends and overrides a base skin, it - allows to redefine the look of a set of components by - taking the base skin as basis and plugging-in custom - styles as well as to unify the appearance of standard - controls and RichFaces components. + Plug-n-Skin is a feature that gives a developer an opportunity + to easily create, customize and plug into a project a custom skin. = + The skin can be created basing on parameters of some predefined RichFa= ces skin. = = + + The feature also provides an option to unify + the appearance of rich controls with standard HTML elements. + + = + In order to create your own skin using Plug-n-Skin feature, you can follow these step by step instructions. @@ -4093,7 +4096,8 @@ -DarchetypeArtifactId=3Dmaven-archetype-plug-n-skin = -DarchetypeVersion=3DRF-VERSION -DartifactId=3DARTIFACT-ID --DgroupId=3DGROUP-ID -Dversion=3DVERSION +-DgroupId=3DGROUP-ID = +-Dversion=3DVERSION ... ]]> Primary keys for the command: @@ -4323,25 +4327,118 @@ = + Now you can start editing the XCSS files = + located in "\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\"= . = + New style properties can be assigned to the selectors (the selectors l= isted in the XCSS files) in two ways, which are both valid, and it'up = to the developer what way to choose. + + Applying a standard CSS coding approach, i.e. you can add= css properties to the given selectors are you normally do while doing CSS = coding. = + The only thing, you have to keep in mind is that the selectors must me i= nside = + <f:verbatim> <![CDATA[ ...]]> </f:verbatim> tags. + = + = + For example + = + + + = + = + = + + = + = + + = + Using XCSS coding approach, the same way as XCSS files are normally form= ed in RichFaces. = + The XCSS tags have to be placed outside <f:verbatim> <![CDATA[ = ...]]> </f:verbatim> tags. + = + + = + + + + + + + + +... +]]> + = + = + + = = + + = + = + = + = + + - Having performed the previous steps you can proceed to - building the new skin. This can be done by executing the + Having performed described above steps and edited the XCSS files = + you can proceed to building the new skin and to plugging it into the p= roject. = + Building the new skin can be done by executing the given below command in the command line in the root folder of you skin project (the one that contains pom.xml file). = - = = - - - Now, you can use your newly-created skin in your project + In addition Plug-n-Skin has a number of predefined = + fancy gradients that you can also you to make your application look ni= cer. The given below code snippet shows how the gradient can be used + + = + + + + + + + + + + + + = + +... +]]> + = + + So, as you can see, the background-image CSS pr= operty is defined with = + + <f:resource + f:key=3D"org.richfaces.renderkit.html.CustomizeableGradient&quo= t;> + + that sets the gradient. While the gradient type can be specified in t= he = + SKIN-NAME.properties file with gradien= tType property. = + = + = + The gradientType property can be set to one of th= e possible values glass, plastic, plain. = + The gradient in it's turn can be can be adjusted using baseCol= or, gradientColor, gradientHeight, valign attributes. + Their usage is shown in the snippet above. = + = + = + + = + = + = + = + Now, you can use your newly-created and customized skin in your project by adding your new skin parameters to web.xml file and placing the jar file with your skin ( the jar file is located in "target" folder of your skin p= roject) = @@ -4357,72 +4454,13 @@ ]]> = = - - So, now having built your new skin you can start - redefining style properties in the corresponding XCSS - files(located in - "\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\" - folder). In the example below, it's shown how to - redefine the style properties for the - <rich:combobox> component. - +
+ Details of Usage + = + This section will cover some practical aspects of Plug-n-Skin imple= mentation. + = +
= - - - - - - - - - = - - - - = - -... -]]> - - - Please notice that - background-image - can be used to set a predefined gradient by means of - - <f:resource - f:key=3D"org.richfaces.renderkit.html.CustomizeableGradient"= ;> - - and the - gradientType - constant set to one of the possible values. - - - - You can also apply these style properties to - background-image - : - - - - - baseColor - - - gradientColor - - - gradientHeight - - - valign - - - gradientType - - - - = --===============6562833378673371130==--