Author: msorokin
Date: 2008-07-14 12:48:36 -0400 (Mon, 14 Jul 2008)
New Revision: 9584
Modified:
trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml
Log:
http://jira.jboss.com/jira/browse/RF-3163
Details of usage section is added
Modified: trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2008-07-14
16:41:19 UTC (rev 9583)
+++ trunk/docs/userguide/en/src/main/docbook/modules/RFCarchitectover.xml 2008-07-14
16:48:36 UTC (rev 9584)
@@ -2687,7 +2687,7 @@
</listitem>
<listitem>
<para>
- Elements that has class name corresponding to
+ Elements that have class name corresponding to
one of the basic elements name/type mapped by
the following scheme
<code>
@@ -4300,14 +4300,15 @@
<property>XCSS files</property>
If the command is executed with the
"DcreateExt" key set to
- "true", XCSS files that define style
+ "true", the XCSS (extended_classes.xcss and extended.xcss) files
that define style
for standard controls will be created. Location:
"\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\".
</para>
</listitem>
<listitem>
<para>
- <property>SKIN-NAME-ext.xcss</property>
+ <property>SKIN-NAME-ext.xcss</property> /
+
If the command is executed with the
"DcreateExt" key set to
"true", the configuration
@@ -4457,10 +4458,115 @@
<section>
<title>Details of Usage</title>
- <para>This section will cover some practical aspects of Plug-n-Skin
implementation. </para>
+ <para>This section will cover some practical aspects of Plug-n-Skin
implementation.
+ It's assumed that you have read the section of the guide that tells how the new skin
using Plug-n-Skin prototype can be created. </para>
+ <para>Above all, we need to create a new skin, in order to do that we just have
to follow
+ the steps described in the previous section.</para>
+ <para>This command will be used to create a template of the new skin project.
</para>
+
+ <programlisting role="XML"><![CDATA[
+mvn archetype:create
+-DarchetypeGroupId=org.richfaces.cdk
+-DarchetypeArtifactId=maven-archetype-plug-n-skin
+-DarchetypeVersion=3.2.2-SNAPSHOT
+-DartifactId=P-n-S
+-DgroupId=GROUPID
+-Dversion=1.0.-SNAPSHOT
+]]></programlisting>
+ <para>
+ Now you can browse the "P-n-S" folder to view what files and folders
were created there.
+ </para>
+
+ <para>
+ Next, we will also use Maven to add all needed files to the skin project. This will
done by the following command:
+ </para>
+
+ <programlisting role="XML"><![CDATA[
+mvn cdk:add-skin -DbaseSkin=blueSky -DcreateExt=true -Dname=PlugnSkinDemo
-Dpackage=SKINPACKAGE
+]]></programlisting>
+
+ <para>
+ As you remember from the previous section "-DbaseSkin" key defines
what skin to be used as a base,
+ "-DcreateExt=true" determines that the new skin will
+ come with XCSS files that unify the look of the rich components with standard HTML
controls.
+ </para>
+
+
+ <para>
+ So, now the files and folder with all needed resources are created
+ and we can start redefining/editing the new skin.
+ </para>
+
+ <para>
+ Now we can start editing XCSS files of the rich components.
+ In order to see how the Plug-n-Skin feature works we will change some style attributes
of <emphasis role="bold">
+ <property><rich:calendar></property></emphasis> and
some basic HTML controls to see how they are affected by standard controls skinning.
+
+ </para>
+ <para>Thus, it will be demonstrated how to: </para>
+ <itemizedlist>
+ <listitem><para>Recolor the current day's cell background of the
<emphasis role="bold">
+ <property><rich:calendar></property></emphasis> to
see how the new skin created with the help of Plug-n-Skin feature affects the style of the
component;</para></listitem>
+ <listitem><para>Recolor a standard HTML submit
button;</para></listitem>
+
+ </itemizedlist>
+
+
+ <para>In oder to edit the style properties of <emphasis
role="bold">
+ <property><rich:calendar></property></emphasis> you
+ need to open the "calendar.xcss" file located in
"P-n-S\src\main\resources\skinpackage\plugnskindemo\css\". Once, you
have opened the file, please find ".rich-calendar-today" selector and add
specify it the following way:<code>background-color:
#075ad1;</code>.</para>
+
+ <para>Now we will see how font style of a standard HTML submit button can be
changed. Please, open "extended.xcss" file located in
"P-n-S\src\main\resources\skinpackage\plugnskindemo\css\" and
<code>font-weight: bold;</code>inside the curly braces of these coma separated
selectors </para>
+ <code>button[type="button"],
button[type="reset"], button[type="submit"],
input[type="reset"], input[type="submit"],
input[type="button"]</code>
+
+ <para>All the changes that were planned to be preformed are done and now you can
proceed to building the new PlugnSkinDemo skin and import it into the project.
+ As you read, the skin should be built in the "P-n-S" folder of the
skin project be executing <code>mvn clean install</code> command. This
procedure results in creating a "target" folder that contains a .jar
file with a compiled new skin, it our case the file is named
"P-n-S-1.0.-SNAPSHOT.jar".
+ The next step is to import the new PlugnSkinDemo skin into the project.</para>
+ <para>What you need to do, in order to have the new skin imported to the project
is</para>
+ <itemizedlist>
+
+ <listitem><para>Copy the "P-n-S-1.0.-SNAPSHOT.jar" file
to the "\WebContent\WEB-INF\lib\" folder.</para></listitem>
+ <listitem><para>Add the new skin's name to the
"web.xml" file. It is done like this</para>
+
+<programlisting role="XML"><![CDATA[
+ <context-param>
+ <param-name>org.ajax4jsf.SKIN</param-name>
+ <param-value>PlugnSkinDemo</param-value>
+ </context-param>
+]]></programlisting>
+
+
+
+ </listitem>
+ </itemizedlist>
+
+
+<para>
+
+ Please, do not forget that standard controls skinning has to be enabled in the
"web.xml" file, which can be done by adding the following code to the
"web.xml" file:
+ </para>
+
+
+ <programlisting role="XML"><![CDATA[
+ <context-param>
+ <param-name>org.richfaces.CONTROL_SKINNING</param-name>
+ <param-value>enable</param-value>
+ </context-param>
+]]></programlisting>
+ <para>The result of both action is displayed on the figure below.</para>
+
+
+
+ <figure>
+ <title>Plug-n-Skin feature in action. </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/PlugnSkinDemo.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
</section>
-
</section>
</section>