[richfaces-svn-commits] JBoss Rich Faces SVN: r13362 - in trunk/docs/userguide/en/src/main: resources/images and 1 other directory.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Thu Apr 2 11:10:23 EDT 2009
Author: artdaw
Date: 2009-04-02 11:10:23 -0400 (Thu, 02 Apr 2009)
New Revision: 13362
Added:
trunk/docs/userguide/en/src/main/resources/images/colorPicker_cn.png
trunk/docs/userguide/en/src/main/resources/images/colorPicker_pc.png
Modified:
trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml
Log:
https://jira.jboss.org/jira/browse/RF-6581 - Look and Feel customization is added
Modified: trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml 2009-04-02 14:48:10 UTC (rev 13361)
+++ trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml 2009-04-02 15:10:23 UTC (rev 13362)
@@ -101,7 +101,8 @@
<![CDATA[...
<rich:colorPicker value="#{bean.color}" colorMode="rgb" />
...]]>
- </programlisting>
+ </programlisting>
+ <para>This is the result:</para>
<figure>
<title>
Usage of the
@@ -172,19 +173,20 @@
</f:facet>
<f:facet name="arrows">
<f:verbatim>
- <div style="width: 33px; height: 5px; border: 1px solid #bed6f8; background:none;"></div>
+ <div style="width: 33px; height: 5px; border: 1px solid #bed6f8; background:none;" />
</f:verbatim>
</f:facet>
</rich:colorPicker>
...]]>
</programlisting>
+ <para>This is the result:</para>
<figure>
<title>
Usage of the
<emphasis>
- <property><icon></property>
+ <property>"icon"</property>
</emphasis>, and <emphasis>
- <property><arrows></property>
+ <property>"arrows"</property>
</emphasis>
facets
</title>
@@ -195,7 +197,173 @@
</mediaobject>
</figure>
</section>
-
+
+ <section>
+ <title>Look-and-Feel Customization</title>
+ <para>For skinnability implementation, the components use a <emphasis>
+ <property>style class redefinition method.</property>
+ </emphasis> Default style classes are mapped on <emphasis>
+ <property>skin parameters.</property>
+ </emphasis></para>
+ <para>There are two ways to redefine the appearance of all <emphasis role="bold">
+ <property><rich:colorPicker></property>
+ </emphasis> components at once:
+ <itemizedlist>
+ <listitem><para>Redefine the corresponding skin parameters</para></listitem>
+ <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold">
+ <property><rich:colorPicker></property>
+ </emphasis> component</para></listitem>
+ </itemizedlist>
+ </para>
+ </section>
+ <section>
+ <title>Skin Parameters Redefinition</title>
+ <table>
+ <title>Skin parameters redefinition for the input field that contains selected color</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+ <row>
+ <entry>generalSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+ <row>
+ <entry>generalFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Skin parameters redefinition for the wrapper <div> element of a widget</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+ <row>
+ <entry>generalBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ <row>
+ <entry>generalFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Skin parameters redefinition for the icon, color palette, current color, and new color</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Skin parameters redefinition for the hex, RGB, and HSB input fileds</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>generalSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+ <row>
+ <entry>generalFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ <row>
+ <entry>generalTextColor</entry>
+ <entry>color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+ <row>
+ <entry>controlBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Skin parameters redefinition for the "Apply" and "Cancel" button</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>buttonFontSize</entry>
+ <entry>font-size</entry>
+ </row>
+ <row>
+ <entry>buttonFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ <row>
+ <entry>headerTextColor</entry>
+ <entry>color</entry>
+ </row>
+ <row>
+ <entry>headerBackgroundColor</entry>
+ <entry>border-color</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+ <row>
+ <entry>generalSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+ <row>
+ <entry>generalFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ <row>
+ <entry>headerBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </section>
<!-- Definition of Custom Style Classes-->
<section>
<title>Definition of Custom Style Classes</title>
@@ -216,14 +384,14 @@
<tgroup cols="2">
<thead>
<row>
- <entry>Class name</entry>
+ <entry>Selector name</entry>
<entry>Description</entry>
</row>
</thead>
<tbody>
<row>
<entry>.rich-colorPicker-span input</entry>
- <entry>Defines styles for the input filed containing selected color</entry>
+ <entry>Defines styles for the input field that contains selected color</entry>
</row>
<row>
<entry>.rich-colorPicker-icon</entry>
@@ -285,15 +453,72 @@
</row>
</tbody>
</tgroup>
- </table>
- </section>
-
-<section>
+ </table>
+ <para>In order to redefine styles for all <emphasis role="bold">
+ <property><rich:colorPicker></property>
+ </emphasis> components on a page using CSS, it's enough to create classes with the
+ same names (possible classes could be found in the tables <link linkend="colorPicker_cn_inline"> above</link>) and define necessary properties in them. </para>
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![CDATA[...
+.rich-colorPicker-ext{
+ background-color: #ecf4fe;
+}
+...]]></programlisting>
+
+ <para>This is the result:</para>
+ <figure>
+ <title>Redefinition styles with predefined classes</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/colorPicker_pc.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>In the shown example the background color for the widget is changed.</para>
+
+ <!--para>It's aslo possible to change styles of a particular
+ <emphasis role="bold"> <property><rich:colorPicker></property></emphasis> component.
+ In this case you should create own style classes and use them in corresponding <emphasis role="bold"><property><rich:colorPicker></property></emphasis> <property>styleClass</property> attributes.
+ An example is placed below:</para>
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![CDATA[...
+.myClass {
+ background-color:#bed6f8;
+}
+...]]></programlisting>
+ <para>The <emphasis><property>"viewClass"</property></emphasis> attribute for <emphasis role="bold"
+ ><property><rich:colorPicker> </property></emphasis> is defined as it's shown in the example below:</para>
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[<rich:colorPicker value="click to edit" viewClass="myClass"/>
+]]></programlisting>
+
+ <para>This is a result:</para>
+
+ <figure>
+ <title>Modificaton of a look and feel with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/inplaceSelect_oc.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>As it could be seen on the picture above, the font style and background color in <property>view</property> state is changed.</para-->
+
+
+ </section>
+ <section>
<title>Relevant Resources Links</title>
<para>
<ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/colorPicker.jsf?c=colorPicker">Here</ulink>
you can see the example of <emphasis role="bold">
- <property><rich:colorPicker></property> component
- </emphasis> usage and sources for the given example. </para>
+ <property><rich:colorPicker></property>
+ </emphasis> component usage and sources for the given example. </para>
</section>
</section>
Added: trunk/docs/userguide/en/src/main/resources/images/colorPicker_cn.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/src/main/resources/images/colorPicker_cn.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/docs/userguide/en/src/main/resources/images/colorPicker_pc.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/src/main/resources/images/colorPicker_pc.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
More information about the richfaces-svn-commits
mailing list