Author: artdaw Date: 2009-04-01 13:19:20 -0400 (Wed, 01 Apr 2009) New Revision: 13348 Added: trunk/docs/userguide/en/src/main/resources/images/colorPicker_arrows.png trunk/docs/userguide/en/src/main/resources/images/colorPicker_facets.png trunk/docs/userguide/en/src/main/resources/images/colorPicker_init.png trunk/docs/userguide/en/src/main/resources/images/colorPicker_rgb.png Modified: trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml Log: https://jira.jboss.org/jira/browse/RF-6581 - Definition of Custom Style Classes section Modified: trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml 2009-04-01 16:27:48 UTC (rev 13347) +++ trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml 2009-04-01 17:19:20 UTC (rev 13348) @@ -90,7 +90,7 @@ component could be saved in hex or RGB color models. You can explicitly define a color model in the <property> - <emphasis>"colorMode"</emphasis> + <emphasis>&quot;colorMode&quot;</emphasis> </property> attribute. </para> @@ -101,7 +101,21 @@ <![CDATA[... <rich:colorPicker value="#{bean.color}" colorMode="rgb" /> ...]]> - </programlisting> + </programlisting> + <figure> + <title> + Usage of the + <property> + <emphasis>&quot;colorMode&quot;</emphasis> + </property> + attribute. + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/colorPicker_rgb.png"/> + </imageobject> + </mediaobject> + </figure> <para> The <emphasis role="bold"> @@ -123,20 +137,6 @@ <rich:colorPicker value="#{bean.color}" flat="true" /> ...]]> </programlisting> - <figure> - <title> - Usage of the - <emphasis> - <property>&lt;flat&gt;</property> - </emphasis> - attribute - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/colorPicker_flat.png"/> - </imageobject> - </mediaobject> - </figure> <para> The <property><emphasis>&quot;showEvent&quot;</emphasis></property> attribute defines the event that shows @@ -163,7 +163,137 @@ with the help of the <property><emphasis>&quot;arrows&quot;</emphasis></property> facet. - </para> - - </section> + </para> + <programlisting role="XML"> +<![CDATA[... +<rich:colorPicker value="#{bean.color}"> + <f:facet name="icon"> + <h:graphicImage value="/pages/colorPicker_ico.png" /> + </f:facet> + <f:facet name="arrows"> + <f:verbatim> + <div style="width: 33px; height: 5px; border: 1px solid #bed6f8; background:none;"></div> + </f:verbatim> + </f:facet> +</rich:colorPicker> +...]]> + </programlisting> + <figure> + <title> + Usage of the + <emphasis> + <property>&lt;icon&gt;</property> + </emphasis>, and <emphasis> + <property>&lt;arrows&gt;</property> + </emphasis> + facets + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/colorPicker_facets.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + <!-- Definition of Custom Style Classes--> + <section> + <title>Definition of Custom Style Classes</title> + <para>On the screenshot there are classes names that define styles for component elements.</para> + + <figure> + <title>Classes names</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/colorPicker_cn.png"/> + </imageobject> + </mediaobject> + </figure> + <table id="colorPicker_cn_inline"> + <title> + Classes names for the representation of the input field and icon containing selected color + </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class 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> + </row> + <row> + <entry>.rich-colorPicker-icon</entry> + <entry>Defines styles for the icon</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="colorPicker_cn_widget"> + <title>Classes names for the widget</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>.rich-colorPicker-ext</entry> + <entry>Defines styles for the wrapper &lt;div&gt; element of a widget</entry> + </row> + <row> + <entry>.rich-colorPicker-color</entry> + <entry>Defines styles for the color palette</entry> + </row> + <row> + <entry>.rich-colorPicker-current-color</entry> + <entry>Defines styles for the currently selected color</entry> + </row> + <row> + <entry>.rich-colorPicker-new-color</entry> + <entry>Defines styles for the already selected color</entry> + </row> + <row> + <entry>.rich-colorPicker-colors-input</entry> + <entry>Defines styles for the hex, RGB, and HSB input fileds</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="colorPicker_cn_buttons"> + <title>Classes names for the buttons representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>.rich-colorPicker-submit</entry> + <entry>Defines styles for the &quot;Apply&quot; button</entry> + </row> + <row> + <entry>.rich-colorPicker-cancel</entry> + <entry>Defines styles for the &quot;Cancel&quot; button</entry> + </row> + </tbody> + </tgroup> + </table> + </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> + </section> </section> Added: trunk/docs/userguide/en/src/main/resources/images/colorPicker_arrows.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/colorPicker_arrows.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/colorPicker_facets.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/colorPicker_facets.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/colorPicker_init.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/colorPicker_init.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/colorPicker_rgb.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/colorPicker_rgb.png ___________________________________________________________________ Name: svn:executable + * Name: svn:mime-type + application/octet-stream