Author: vsukhov Date: 2008-02-11 14:27:18 -0500 (Mon, 11 Feb 2008) New Revision: 6019 Added: trunk/docs/userguide/en/src/main/resources/images/comboBoxClass.png trunk/docs/userguide/en/src/main/resources/images/comboBoxStyle.png Modified: trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml Log: RF-1216 I've added information about event attribures. Code samples added. Modified: trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml 2008-02-11 19:17:32 UTC (rev 6018) +++ trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml 2008-02-11 19:27:18 UTC (rev 6019) @@ -151,9 +151,22 @@ <para> The <emphasis><property> &quot;defaultLabel&quot;</property></emphasis> attribute defines the default label of the input element. </para> - - - </section> + <para> + The <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component provides to use + specific event attributes: + <itemizedlist> + <listitem> + <emphasis><property> &quot;onlistcall&quot;</property></emphasis> is fired before the list opening + </listitem> + <listitem> + <emphasis><property> &quot;onselected&quot;</property></emphasis> is fired after some value from popup list was chosen + </listitem> + <listitem> + <emphasis><property> &quot;onchange&quot;</property></emphasis> is fired both with onselected and after the input value changed + </listitem> + </itemizedlist> + </para> + </section> <section> <title>JavaScript API</title> <table> @@ -266,32 +279,8 @@ </tbody> </tgroup> </table> + <table> - <title>Skin parameters redefinition for a popup list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>itemSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>itemFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>itemTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> <title>Skin parameters redefinition for a default message</title> <tgroup cols="2"> <thead> @@ -374,7 +363,7 @@ </mediaobject> </figure--> - <table> + <table id="comboBoxC"> <title>Classes names that define shadow representation</title> <tgroup cols="2"> <thead> @@ -491,12 +480,69 @@ </tbody> </tgroup> </table> - <para>In order to redefine styles for all <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> components on a page using CSS, - it's enough to create classes with the same names and define necessary properties in them. + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:comboBox&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="comboBoxC"> above</link>) and define necessary properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> </para> - <para>To change styles of particular <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> components, - define your own style classes in the corresponding <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component attributes. + <programlisting role="CSS"><![CDATA[... +.rich-combobox-list-decoration{ + background-color:#ecf4fe; +} +...]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/comboboxClass.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example background color for popup list was changed.</para> + + <para>Also it’s possible to change styles of particular <emphasis role="bold" + ><property>&lt;rich:comboBox&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" + ><property>&lt;rich:comboBox&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{ + font-weight:bold; +} +...]]></programlisting> + <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" + ><property>&lt;rich:comboBox&gt;</property></emphasis> is defined as it’s shown in the example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[<cmb:comboBox ... styleClass="myClass"/> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and styleClass attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/comboboxStyle.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, the font weight for items was changed.</para> + + + </section> <section> <title>Relevant Resources Links</title> Added: trunk/docs/userguide/en/src/main/resources/images/comboBoxClass.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/comboBoxClass.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/comboBoxStyle.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/comboBoxStyle.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream