[richfaces-svn-commits] JBoss Rich Faces SVN: r13828 - trunk/docs/userguide/en/src/main/docbook/included.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Fri Apr 24 08:49:11 EDT 2009
Author: ochikvina
Date: 2009-04-24 08:49:11 -0400 (Fri, 24 Apr 2009)
New Revision: 13828
Modified:
trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml
Log:
https://jira.jboss.org/jira/browse/RF-6845 - adding the "onbeforeshow" description to the Details of Usage section;
Modified: trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml 2009-04-24 12:47:57 UTC (rev 13827)
+++ trunk/docs/userguide/en/src/main/docbook/included/colorPicker.xml 2009-04-24 12:49:11 UTC (rev 13828)
@@ -1,172 +1,150 @@
<?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">
+ <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">
+ </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><rich:colorPicker></property>
- </emphasis>
- component allows you easily 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>"value"</emphasis>
- </property>
- attribute stores
- the selected color.
- </para>
- <para>
- The value of the
- <emphasis role="bold">
- <property><rich:colorPicker></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">
+ </section>
+ <section>
+ <title>Details of Usage</title>
+ <para> The <emphasis role="bold">
+ <property><rich:colorPicker></property>
+ </emphasis> component allows you easily 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>"value"</emphasis>
+ </property> attribute stores the selected color. </para>
+ <para> The value of the <emphasis role="bold">
+ <property><rich:colorPicker></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>This is the result:</para>
- <figure>
- <title>
- Usage of the
- <property>
- <emphasis>"colorMode"</emphasis>
- </property>
- attribute.
- </title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/colorPicker_rgb.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- The
- <emphasis role="bold">
- <property><rich:colorPicker></property>
- </emphasis>
- component has two representation states: flat and inline.
- With the help of the
- <property>
- <emphasis>"flat"</emphasis>
- </property>
- attribute
- you can define whether the component is rendered flat.
- </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML">
+ <para>This is the result:</para>
+ <figure>
+ <title> Usage of the <property>
+ <emphasis>"colorMode"</emphasis>
+ </property> attribute. </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/colorPicker_rgb.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para> The <emphasis role="bold">
+ <property><rich:colorPicker></property>
+ </emphasis> component has two representation states: flat and inline. With the help of the <property>
+ <emphasis>"flat"</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>
- <para>
- The <property><emphasis>"showEvent"</emphasis></property> attribute defines
- the event that shows
- <emphasis role="bold">
- <property><rich:colorPicker></property>
- </emphasis> widget. The default value is "onclick".
- </para>
- <para>
- The <emphasis role="bold">
- <property><rich:colorPicker></property>
- </emphasis>
- component allows to use the <emphasis><property>"icon"</property></emphasis> facet.
- </para>
- <para>
- You can also customize <emphasis role="bold">
- <property><rich:colorPicker></property>
- </emphasis> rainbow slider (
-<inlinemediaobject>
-<imageobject>
-<imagedata fileref="images/colorPicker_arrows.png"/>
-</imageobject>
-</inlinemediaobject>
-)
-
- with the help of the
- <property><emphasis>"arrows"</emphasis></property> facet.
- </para>
- <programlisting role="XML">
+
+ <para>The component specific event handler <property><emphasis>"onbeforeshow"</emphasis></property> captures the event which occurs before
+ the <emphasis role="bold">
+ <property><rich:colorPicker></property>
+ </emphasis> widget is opened. The <property><emphasis>"onbeforeshow"</emphasis></property> attribute could be used in order to cancel this
+ event. See the example below:</para>
+ <programlisting role="XML">
<![CDATA[...
+<rich:colorPicker value="#{bean.color}" onbeforeshow="if (!confirm('Are you sure you want to change a color?')){return false;}" />
+...]]>
+ </programlisting>
+
+ <para> The <property>
+ <emphasis>"showEvent"</emphasis>
+ </property> attribute defines the event that shows <emphasis role="bold">
+ <property><rich:colorPicker></property>
+ </emphasis> widget. The default value is "onclick". </para>
+ <para> The <emphasis role="bold">
+ <property><rich:colorPicker></property>
+ </emphasis> component allows to use the <emphasis>
+ <property>"icon"</property>
+ </emphasis> facet. </para>
+ <para> You can also customize <emphasis role="bold">
+ <property><rich:colorPicker></property>
+ </emphasis> rainbow slider ( <inlinemediaobject>
+ <imageobject>
+ <imagedata fileref="images/colorPicker_arrows.png"/>
+ </imageobject>
+ </inlinemediaobject> ) with the help of the <property>
+ <emphasis>"arrows"</emphasis>
+ </property> facet. </para>
+ <programlisting role="XML">
+<![CDATA[...
<rich:colorPicker value="#{bean.color}">
<f:facet name="icon">
<h:graphicImage value="/pages/colorPicker_ico.png" />
@@ -179,44 +157,43 @@
</rich:colorPicker>
...]]>
</programlisting>
- <para>This is the result:</para>
- <figure>
- <title>
- Usage of the
- <emphasis>
- <property>"icon"</property>
- </emphasis>, and <emphasis>
- <property>"arrows"</property>
- </emphasis>
- facets
- </title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/colorPicker_facets.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- </section>
+ <para>This is the result:</para>
+ <figure>
+ <title> Usage of the <emphasis>
+ <property>"icon"</property>
+ </emphasis>, and <emphasis>
+ <property>"arrows"</property>
+ </emphasis> facets </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/colorPicker_facets.png"/>
+ </imageobject>
+ </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 style classes used by a <emphasis role="bold">
+ <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 style classes used by a <emphasis role="bold">
<property><rich:colorPicker></property>
- </emphasis> component to your style sheets</para></listitem>
- </itemizedlist>
- </para>
- </section>
- <section>
+ </emphasis> component to your style sheets</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>
@@ -242,9 +219,10 @@
</row>
</tbody>
</tgroup>
- </table>
+ </table>
<table>
- <title>Skin parameters redefinition for the wrapper <div> element of a widget</title>
+ <title>Skin parameters redefinition for the wrapper <div> element of a
+ widget</title>
<tgroup cols="2">
<thead>
<row>
@@ -267,9 +245,10 @@
</row>
</tbody>
</tgroup>
- </table>
+ </table>
<table>
- <title>Skin parameters redefinition for the icon, color palette, current color, and new color</title>
+ <title>Skin parameters redefinition for the icon, color palette, current color, and new
+ color</title>
<tgroup cols="2">
<thead>
<row>
@@ -284,7 +263,7 @@
</row>
</tbody>
</tgroup>
- </table>
+ </table>
<table>
<title>Skin parameters redefinition for the hex, RGB, and HSB input fileds</title>
<tgroup cols="2">
@@ -303,7 +282,7 @@
<entry>generalFamilyFont</entry>
<entry>font-family</entry>
</row>
- <row>
+ <row>
<entry>generalTextColor</entry>
<entry>color</entry>
</row>
@@ -319,7 +298,8 @@
</tgroup>
</table>
<table>
- <title>Skin parameters redefinition for the "Apply" and "Cancel" button</title>
+ <title>Skin parameters redefinition for the "Apply" and
+ "Cancel" button</title>
<tgroup cols="2">
<thead>
<row>
@@ -352,7 +332,7 @@
<entry>generalSizeFont</entry>
<entry>font-size</entry>
</row>
- <row>
+ <row>
<entry>generalFamilyFont</entry>
<entry>font-family</entry>
</row>
@@ -362,12 +342,13 @@
</row>
</tbody>
</tgroup>
- </table>
- </section>
- <!-- Definition of Custom Style Classes-->
+ </table>
+ </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>
+ <para>On the screenshot there are classes names that define styles for component
+ elements.</para>
<figure>
<title>Classes names</title>
@@ -376,11 +357,10 @@
<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>
+ </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>
@@ -393,14 +373,14 @@
<entry>.rich-colorPicker-span input</entry>
<entry>Defines styles for the input field that contains selected color</entry>
</row>
- <row>
+ <row>
<entry>.rich-colorPicker-icon</entry>
<entry>Defines styles for the icon</entry>
</row>
</tbody>
</tgroup>
</table>
- <table id="colorPicker_cn_widget">
+ <table id="colorPicker_cn_widget">
<title>Classes names for the widget</title>
<tgroup cols="2">
<thead>
@@ -433,7 +413,7 @@
</tbody>
</tgroup>
</table>
- <table id="colorPicker_cn_buttons">
+ <table id="colorPicker_cn_buttons">
<title>Classes names for the buttons representation</title>
<tgroup cols="2">
<thead>
@@ -447,26 +427,27 @@
<entry>.rich-colorPicker-submit</entry>
<entry>Defines styles for the "Apply" button</entry>
</row>
- <row>
+ <row>
<entry>.rich-colorPicker-cancel</entry>
<entry>Defines styles for the "Cancel" button</entry>
</row>
</tbody>
</tgroup>
</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>
+ <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>
-
+...]]></programlisting>
+
<para>This is the result:</para>
<figure>
<title>Redefinition styles with predefined classes</title>
@@ -477,7 +458,7 @@
</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.
@@ -512,13 +493,13 @@
<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>
+ </section>
+ <section>
+ <title>Relevant Resources Links</title>
<para>
- <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/colorPicker.jsf?c=colorPicker">On the component LiveDemo page</ulink>
- you can see the example of <emphasis role="bold">
- <property><rich:colorPicker></property>
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/colorPicker.jsf?c=colorPicker"
+ >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold">
+ <property><rich:colorPicker></property>
</emphasis> component usage and sources for the given example. </para>
</section>
</section>
More information about the richfaces-svn-commits
mailing list