[richfaces-svn-commits] JBoss Rich Faces SVN: r13362 - in trunk/docs/userguide/en/src/main: resources/images and 1 other directory.

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>&lt;icon&gt;</property> + <property>&quot;icon&quot;</property> </emphasis>, and <emphasis> - <property>&lt;arrows&gt;</property> + <property>&quot;arrows&quot;</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>&lt;rich:colorPicker&gt;</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>&lt;rich:colorPicker&gt;</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 &lt;div&gt; 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 &quot;Apply&quot; and &quot;Cancel&quot; 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>&lt;rich:colorPicker&gt;</property> + </emphasis> components on a page using CSS, it&apos;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&apos;s aslo possible to change styles of a particular + <emphasis role="bold"> <property>&lt;rich:colorPicker&gt;</property></emphasis> component. + In this case you should create own style classes and use them in corresponding <emphasis role="bold"><property>&lt;rich:colorPicker&gt;</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>&quot;viewClass&quot;</property></emphasis> attribute for <emphasis role="bold" + ><property>&lt;rich:colorPicker&gt; </property></emphasis> is defined as it&apos;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... you can see the example of <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> component - </emphasis> usage and sources for the given example. </para> + <property>&lt;rich:colorPicker&gt;</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