Author: artdaw Date: 2009-03-31 12:04:25 -0400 (Tue, 31 Mar 2009) New Revision: 13319 Added: trunk/docs/userguide/en/src/main/docbook/included/colorPicker.desc.xml trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml Log: https://jira.jboss.org/jira/browse/RF-6581 - Description, Details of Usage sections are done Added: trunk/docs/userguide/en/src/main/docbook/included/colorPicker.desc.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/colorPicker.desc.xml (rev 0) +++ trunk/docs/userguide/en/src/main/docbook/included/colorPicker.desc.xml 2009-03-31 16:04:25 UTC (rev 13319) @@ -0,0 +1,48 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>rich:colorPicker</keyword> + <keyword>colorPicker</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Description</title> + <para> + The + <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> + component + lets you visually choose a color or define it in hex, RGB, or HSB input fields. + </para> + <figure> + <title> + Simple + <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> + component + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/colorPicker_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Possibility to get color in hex, or RGB color models</para> + </listitem> + <listitem> + <para>Flat/inline representation</para> + </listitem> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + </itemizedlist> + </section> +</section> Added: trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml (rev 0) +++ trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml 2009-03-31 16:04:25 UTC (rev 13319) @@ -0,0 +1,169 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>rich:colorPicker</keyword> + <keyword>colorPicker</keyword> + </keywordset> + </sectioninfo> + <table> + <title>Component identification parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ColorPicker</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlColorPicker</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ColorPicker</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ColorPickerRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ColorPickerTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> + <title>Creating the Component with a Page Tag</title> + <para>Here is a simple example of how the component can be used on a page:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <!-- itemLabels has to have realy value--> + <programlisting role="XML"> +<![CDATA[... +<rich:colorPicker value="#{bean.color}" /> +...]]> + </programlisting> + </section> + <section> + <title>Creating the Component Dynamically Using Java</title> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"> +<![CDATA[import org.richfaces.component.html.colorPicker; +... +HtmlColorPicker myColorPicker = new ColorPicker(); +...]]> + </programlisting> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> + component allows you simply select a color or define it in hex, RGB, or HSB input fields. + There are two squares in the widget that help you to compare the currently selected color and + the already selected color. + </para> + <para> + The + <property> + <emphasis>&quot;value&quot;</emphasis> + </property> + attribute stores + selected color. + </para> + <para> + The value of the + <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> + component could be saved in hex or RGB color models. + You can explicitly define a color model in the + <property> + <emphasis>"colorMode"</emphasis> + </property> + attribute. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"> +<![CDATA[... +<rich:colorPicker value="#{bean.color}" colorMode="rgb" /> +...]]> + </programlisting> + <para> + The + <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> + component has two representation states: flat and inline. + With the help of the + <property> + <emphasis>&quot;flat&quot;</emphasis> + </property> + attribute + you can define whether the component is rendered flat. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"> +<![CDATA[... +<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 + <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> widget. The default value is &quot;onclick&quot;. + </para> + <para> + The <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> + component allows to use the <emphasis><property>&quot;icon&quot;</property></emphasis> facet. + </para> + <para> + You can also customize <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> rainbow slider ( +<inlinemediaobject> +<imageobject> +<imagedata fileref="images/colorPicker_arrows.png"/> +</imageobject> +</inlinemediaobject> +) + + with the help of the + <property><emphasis>&quot;arrows&quot;</emphasis></property> facet. + </para> + + </section> +</section>