Author: ochikvina Date: 2007-11-08 09:51:00 -0500 (Thu, 08 Nov 2007) New Revision: 3824 Modified: trunk/docs/userguide/en/src/main/docbook/included/toggleControl.xml trunk/docs/userguide/en/src/main/docbook/included/togglePanel.xml trunk/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml Log: http://jira.jboss.com/jira/browse/RF-771 - unifying Look and feel customization section Modified: trunk/docs/userguide/en/src/main/docbook/included/toggleControl.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/toggleControl.xml 2007-11-08 14:49:58 UTC (rev 3823) +++ trunk/docs/userguide/en/src/main/docbook/included/toggleControl.xml 2007-11-08 14:51:00 UTC (rev 3824) @@ -111,18 +111,22 @@ ]]></programlisting> <para>In this example the switching is performed on facets specified in the <emphasis - </section> + </section> + <section> <title>Look-and-Feel Customization</title> - <para>On component generation the framework substitutes the default - class <emphasis ><property>rich-toggle-control</property></emphasis> into - styleClass of a generated component, i.e. to redefine at once all <property>toggle controls</property> appearance on a - page, redefine this class in your CSS.</para> - <para>To define a particular <property>toggle controls</property> appearance, write down your own CSS properties and - classes in component style attributes (<emphasis -><property>&quot;style&quot;</property>,</emphasis> <emphasis -><property>&quot;styleClass&quot;</property></emphasis>)and the properties have been changed.</para> + <para>For skinnability implementation, the components use a <emphasis> + <property>style class redefinition method.</property></emphasis></para> + <para>To redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> components at once, you should add to your style sheets <emphasis> + <property>style class</property> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> component. +</para> </section> + <section> <title>Definition of Custom Style Classes</title> <table> @@ -143,5 +147,16 @@ </tbody> </tgroup> </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create a class with the + same name and define necessary properties in it.</para> + + <para>To change styles of particular <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> components define your own style class in the corresponding <emphasis + role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis>attributes.</para> </section> </section> \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/togglePanel.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2007-11-08 14:49:58 UTC (rev 3823) +++ trunk/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2007-11-08 14:51:00 UTC (rev 3824) @@ -169,6 +169,7 @@ </tbody> </tgroup> </table> + </section> <section> Modified: trunk/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml 2007-11-08 14:49:58 UTC (rev 3823) +++ trunk/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml 2007-11-08 14:51:00 UTC (rev 3824) @@ -76,7 +76,56 @@ ]]></programlisting> </section> + <section> + <title>Details of Usage</title> + <para>A <property>toolBarGroup</property> is a wrapper component that groups <property>toolBar</property> content and facilitates creation of menu and tool bars. All components defined inside are located on a stylized bar with a possibility to group, arrange on the both bar sides, and place predefined separators between them.</para> + <para>Separators are located between components with the help of the <emphasis + +><property>&quot;itemSeparator&quot;</property></emphasis> attribute with four + predefined values:</para> + <itemizedlist> + <listitem> + none + </listitem> + <listitem> + line + </listitem> + <listitem> + square + </listitem> + <listitem> + disc + </listitem> + </itemizedlist> + <para>To control the group location inside, use the <emphasis + +><property>&quot;location&quot;</property></emphasis> attribute with left (DEFAULT) and right values.</para> + <para><emphasis role="bold">Example:</emphasis></para> + <programlisting role="XML"><![CDATA[... + <rich:toolBar itemSeparator="disc" width="500"> + <rich:toolBarGroup itemSeparator="line"> + <h:commandLink value="Command 1.1"/> + <h:commandLink value="Command 2.1"/> + </rich:toolBarGroup> + <rich:toolBarGroup itemSeparator="line" location="right"> + <h:commandLink value="Command 1.2"/> + <h:commandLink value="Command 2.2"/> + </rich:toolBarGroup> + </rich:toolBar> +... +]]></programlisting> +<para>The code result is the following:</para> + <figure> + <title>Stylized toolBarGroup</title> +<mediaobject> + <imageobject> + <imagedata fileref="images/toolBar3.gif"/> + </imageobject> +</mediaobject> + </figure> + </section> + <section> <title>Look-and-Feel Customization</title> <para>For skinnability implementation, the components use a <emphasis> @@ -111,8 +160,8 @@ <tgroup cols="2"> <thead> <row> - <entry>Skin parameters for the toolBarGroup component</entry> - <entry>Corresponding CSS parameters</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> </thead> <tbody> @@ -133,54 +182,5 @@ </table> </section> - <section> - <title>Details of Usage</title> - <para>A <property>toolBarGroup</property> is a wrapper component that groups <property>toolBar</property> content and facilitates creation of menu and tool bars. All components defined inside are located on a stylized bar with a possibility to group, arrange on the both bar sides, and place predefined separators between them.</para> - <para>Separators are located between components with the help of the <emphasis - -><property>&quot;itemSeparator&quot;</property></emphasis> attribute with four - predefined values:</para> - <itemizedlist> - <listitem> - none - </listitem> - <listitem> - line - </listitem> - <listitem> - square - </listitem> - <listitem> - disc - </listitem> - </itemizedlist> - <para>To control the group location inside, use the <emphasis - -><property>&quot;location&quot;</property></emphasis> attribute with left (DEFAULT) and right values.</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[... - <rich:toolBar itemSeparator="disc" width="500"> - <rich:toolBarGroup itemSeparator="line"> - <h:commandLink value="Command 1.1"/> - <h:commandLink value="Command 2.1"/> - </rich:toolBarGroup> - <rich:toolBarGroup itemSeparator="line" location="right"> - <h:commandLink value="Command 1.2"/> - <h:commandLink value="Command 2.2"/> - </rich:toolBarGroup> - </rich:toolBar> -... -]]></programlisting> -<para>The code result is the following:</para> - <figure> - <title>Stylized toolBarGroup</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/toolBar3.gif"/> - </imageobject> -</mediaobject> - </figure> - </section> - </section> \ No newline at end of file