Author: cluts Date: 2008-10-03 05:37:32 -0400 (Fri, 03 Oct 2008) New Revision: 10656 Modified: trunk/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml Log: RF-4501 - information is added Modified: trunk/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2008-10-03 09:05:15 UTC (rev 10655) +++ trunk/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2008-10-03 09:37:32 UTC (rev 10656) @@ -97,12 +97,12 @@ <property>&quot;opened&quot;</property> </emphasis> attribute responsible for keeping a panel state. It gives an - opportunity to manage state of the component from a model. + opportunity to manage state of the component from a model. If the value of this attribute is&quot;true&quot; the component is expanded. </para> - + <!--SIMPLE EXAMPLE NEEDED --> - + <itemizedlist> <listitem><para> <emphasis><property>&quot;onmouseover &quot;</property></emphasis></para></listitem> <listitem><para> <emphasis><property>&quot;onclick &quot;</property></emphasis></para></listitem> @@ -118,9 +118,26 @@ </mediaobject> </figure> <para> + <para> + With help of + <emphasis> + <property> + &quot;openMarker&quot; + </property> + </emphasis> + and + <emphasis> + <property> + &quot;closeMarker&quot; + </property> + </emphasis> facets you can set toggle icon for + <property> + simpleTogglePanel + </property>. + </para> Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">here</link>. </para> - + </section> <section> <title>Look-and-Feel Customization</title> @@ -129,16 +146,16 @@ </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:simpleTooglePanel&gt;</property> </emphasis> components at once:</para> - + <itemizedlist> <listitem> <para>Redefine the corresponding skin parameters</para> </listitem> - + <listitem> <para>Add to your style sheets <emphasis> <property>style classes</property> @@ -148,7 +165,7 @@ </listitem> </itemizedlist> </section> - + <section> <title>Skin Parameters Redefinition</title> <table> @@ -241,9 +258,9 @@ </section> <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>Style classes</title> <mediaobject> @@ -275,7 +292,7 @@ <entry>rich-stglpnl-marker</entry> <entry>Defines styles for a wrapper &lt;div&gt; element of a marker</entry> </row> - + <row> <entry>rich-stglpanel-body</entry> <entry>Defines styles for a component content</entry> @@ -283,8 +300,8 @@ </tbody> </tgroup> </table> - - + + <table> <title>Style component classes</title> <tgroup cols="2"> @@ -313,12 +330,12 @@ </tbody> </tgroup> </table> - + <para>In order to redefine styles for all <emphasis role="bold"> <property>&lt;rich:simpleTogglePanel&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="simpTogPanC"> above</link>) and define necessary properties in them. </para> - + <para> <emphasis role="bold">Example:</emphasis> </para> @@ -326,10 +343,10 @@ .rich-stglpanel-header{ font-style:italic; } -...]]></programlisting> - +...]]></programlisting> + <para>This is a result:</para> - + <figure> <title>Redefinition styles with predefined classes</title> <mediaobject> @@ -338,13 +355,13 @@ </imageobject> </mediaobject> </figure> - + <para>In the example the font style for header was changed.</para> - + <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - + <para> <emphasis role="bold">Example:</emphasis> </para> @@ -352,18 +369,18 @@ .myClass{ background-color:#ffead9; } -...]]></programlisting> +...]]></programlisting> <para>The <emphasis><property>&quot;bodyClass&quot;</property></emphasis> attribute for <emphasis role="bold" - + <para> <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[<rich:simpleTogglePanel ... bodyClass="myClass"/> -]]></programlisting> - +]]></programlisting> + <para>This is a result:</para> - + <figure> <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> <mediaobject> @@ -371,12 +388,12 @@ <imagedata fileref="images/simpleTogglePanel_oc.png"/> </imageobject> </mediaobject> - </figure> - + </figure> + <para>As it could be seen on the picture above,background color for body was changed.</para> - - - + + + </section> <section> <title>Relevant Resources Links</title>