Author: atsebro Date: 2008-10-01 08:29:54 -0400 (Wed, 01 Oct 2008) New Revision: 10639 Modified: trunk/docs/userguide/en/src/main/docbook/included/tab.xml trunk/docs/userguide/en/src/main/docbook/included/tabPanel.xml Log: RF-3560: Style class attributes Modified: trunk/docs/userguide/en/src/main/docbook/included/tab.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/tab.xml 2008-10-01 12:16:56 UTC (rev 10638) +++ trunk/docs/userguide/en/src/main/docbook/included/tab.xml 2008-10-01 12:29:54 UTC (rev 10639) @@ -1,54 +1,54 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>rich:tab</keyword> -<keyword>HtmlTab</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.Tab</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTab</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Tab</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.TabRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.TabTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> + <sectioninfo> + <keywordset> + <keyword>rich:tab</keyword> + <keyword>HtmlTab</keyword> + </keywordset> + </sectioninfo> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <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.Tab</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTab</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Tab</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.TabRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.TabTag</entry> + </row> + </tbody> + </tgroup> + </table> + + <section> + <title>Creating the Component with a Page Tag</title> + <para>To create the simplest variant on a page use the following syntax:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:tabPanel> <!--Set of Tabs inside--> <rich:tab> @@ -57,28 +57,38 @@ </rich:tabPanel> ... ]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> + </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.HtmlTab; + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlTab; ... HtmlTab myTab = new HtmlTab(); ... ]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The main component function is to define a content group that is rendered and processed when the <property>tab</property> is active, i.e. click on a <property>tab</property> causes switching onto a <property>tab</property> containing content corresponded to this <property>tab</property>.</para> - <para>The <emphasis ><property>&quot;label&quot;</property></emphasis > attribute defines text to be represented. If you can use the - <emphasis><property>&quot;label&quot;</property></emphasis> facet, you can even not use the <emphasis ><property>&quot;label&quot;</property></emphasis > attribute.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + </section> + <section> + <title>Details of Usage</title> + <para>The main component function is to define a content group that is rendered + and processed when the <property>tab</property> is active, i.e. click + on a <property>tab</property> causes switching onto a + <property>tab</property> containing content corresponded to this + <property>tab</property>.</para> + <para>The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute defines text to be represented. If you can use + the <emphasis> + <property>&quot;label&quot;</property> + </emphasis> facet, you can even not use the <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:tab> <f:facet name="label"> <h:graphicImage value="/images/img1.png"/> @@ -90,12 +100,18 @@ ... ]]></programlisting> - <para>A marker on a <property>tab</property> header defined with the <emphasis ><property>&quot;label&quot;</property></emphasis> attribute. Moreover, each <property>tab</property> could be disabled (switching on this <property>tab</property> is impossible) with the <emphasis ><property>&quot;disable&quot;</property></emphasis> attribute.</para> + <para>A marker on a <property>tab</property> header defined with the <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute. Moreover, each <property>tab</property> could + be disabled (switching on this <property>tab</property> is impossible) + with the <emphasis> + <property>&quot;disable&quot;</property> + </emphasis> attribute.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:tabPanel width="20%"> <tabs:tab label="Canon"> <h:outputText value="Canon EOS Digital Rebel XT" /> @@ -112,37 +128,66 @@ <tabs:tab disabled="true" name="disabled" label="Disabled"/> </rich:tabPanel> ...]]></programlisting> -<para>With this example it&apos;s possible to generate the <property>tab panel</property> - with the last disabled and three active <property>tabs</property> (see the picture).</para> -<figure> - <title><emphasis role="bold"><property>&lt;rich:tabPanel&gt;</property></emphasis> with disabled <emphasis role="bold"><property>&lt;rich:tab&gt;</property></emphasis></title> -<mediaobject> - <imageobject> - <imagedata fileref="images/tab2.png"/> - </imageobject> -</mediaobject> - </figure> -<para>Switching mode could be defined not only for the whole panel <property>tab</property>, but also -for each particular <property>tab</property>, i.e. switching onto one <property>tab</property> could be - performed right on the client with the corresponding JavaScript and onto another - <property>tab</property> with an Ajax request on the server. <property>Tab</property> switching modes - are the same as <property>tabPanel</property> ones.</para> -<para>Each <property>tab</property> also has an attribute name (alias for <emphasis ><property>&quot;id&quot;</property></emphasis> attribute). Using this attribute value it&apos;s possible e.g. to set an active <property>tab</property> on a model level specifying this name in the corresponding attribute of the whole <property>tab</property>.</para> -<para>Except the specific component attributes it has all necessary attributes for JavaScript event definition.</para> -<itemizedlist> - <listitem><para> <emphasis><property>&quot;onmouseover&quot;</property></emphasis> </para></listitem> - <listitem><para> <emphasis><property>&quot;onmouseout&quot;</property></emphasis> </para></listitem> - <listitem><para> - etc. - </para></listitem> -</itemizedlist> - <para> - Some event could be performed on the tab which has been entered/left using <emphasis><property>&quot;ontabenter&quot;</property></emphasis>/<emphasis><property>&quot;ontableave&quot;</property></emphasis> attributes. See the example below.</para> + <para>With this example it&apos;s possible to generate the <property>tab + panel</property> with the last disabled and three active + <property>tabs</property> (see the picture).</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> with disabled <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis></title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tab2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Switching mode could be defined not only for the whole panel + <property>tab</property>, but also for each particular + <property>tab</property>, i.e. switching onto one + <property>tab</property> could be performed right on the client with + the corresponding JavaScript and onto another <property>tab</property> + with an Ajax request on the server. <property>Tab</property> switching + modes are the same as <property>tabPanel</property> ones.</para> + <para>Each <property>tab</property> also has an attribute name (alias for <emphasis> + <property>&quot;id&quot;</property> + </emphasis> attribute). Using this attribute value it&apos;s + possible e.g. to set an active <property>tab</property> on a model + level specifying this name in the corresponding attribute of the whole + <property>tab</property>.</para> + <para>Except the specific component attributes it has all necessary attributes + for JavaScript event definition.</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>&quot;onmouseover&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>&quot;onmouseout&quot;</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> etc. </para> + </listitem> + </itemizedlist> + <para> Some event could be performed on the tab which has been entered/left + using <emphasis> + <property>&quot;ontabenter&quot;</property> + </emphasis>/<emphasis> + <property>&quot;ontableave&quot;</property> + </emphasis> attributes. See the example below.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:tabPanel> <rich:tab label="Tab1" ontabenter="alert()"> ... @@ -150,269 +195,293 @@ ... </rich:tabPanel> ...]]></programlisting> - <para> - The following example shows how on the client side to get the names of <code>entered</code>/<code>left</code> tabs. - </para> - <programlisting role="JAVA"><![CDATA[ontabenter="alert(leftTabName)"]]></programlisting> - <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> - - <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> - - <note><title>Note:</title><para> - A panel appearance and content is defined with a <property>tab</property> panel i.e. on the <property>tab</property> level it&apos;s possible to define only an appearance of this <property>tab</property> header. - </para> - </note> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:tab&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> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:tab&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a tab header</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for an active tab</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for an inactive tab</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a disabled tab</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tab_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - - <table id="tab_tab"> - <title>Classes names that define a tab</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tab-header</entry> - <entry>Defines styles for a tab header</entry> - </row> - - <row> - <entry>rich-tab-label</entry> - <entry>Defines styles for a tab label</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Classes names that define a tab states</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tab-active</entry> - <entry>Defines styles for an active tab</entry> - </row> - <row> - <entry>rich-tab-inactive</entry> - <entry>Defines styles for an inactive tab</entry> - </row> - <row> - <entry>rich-tab-disabled</entry> - <entry>Defines styles for a disabled tab</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:tab&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="tab_tab"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... + <para> The following example shows how on the client side to get the names of + <code>entered</code>/<code>left</code> tabs. </para> + <programlisting role="JAVA"><![CDATA[ontabenter="alert(leftTabName)"]]></programlisting> + <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> + + <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> + + <note> + <title>Note:</title> + <para> A panel appearance and content is defined with a + <property>tab</property> panel i.e. on the + <property>tab</property> level it&apos;s possible to + define only an appearance of this <property>tab</property> + header. </para> + </note> + + <para>There are two ways to redefine the appearance of all <emphasis role="bold"> + <property>&lt;rich:tab&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> + </emphasis> used by a <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + </section> + + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters redefinition for a tab header</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for an active tab</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>subBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for an inactive tab</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tabBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>subBorderColor</entry> + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for a disabled tab</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tabBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>subBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tabDisabledTextColor</entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>Definition of Custom Style Classes</title> + + <figure> + <title>Classes names</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tab_cn.png"/> + </imageobject> + </mediaobject> + </figure> + + + <table id="tab_tab"> + <title>Classes names that define a tab</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tab-header</entry> + <entry>Defines styles for a tab + header</entry> + </row> + + <row> + <entry>rich-tab-label</entry> + <entry>Defines styles for a tab + label</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a tab states</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tab-active</entry> + <entry>Defines styles for an active + tab</entry> + </row> + <row> + <entry>rich-tab-inactive</entry> + <entry>Defines styles for an inactive + tab</entry> + </row> + <row> + <entry>rich-tab-disabled</entry> + <entry>Defines styles for a disabled + tab</entry> + </row> + </tbody> + </tgroup> + </table> + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:tab&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="tab_tab"> above</link>) and define necessary + properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .rich-tab-header{ font-weight: bold; } -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tab_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a header font weight was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:tab&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:tab&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... +...]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tab_pc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example a header font weight was changed.</para> + + <para>Also it&apos;s possible to change styles of particular <emphasis + role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> component. In this case you should create own style + classes and use them in corresponding <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> + <emphasis> + <property>styleClass</property> + </emphasis> attributes. An example is placed below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... .myClass{ border-color: #5d9ffc; } -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:tab&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:tab ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tab_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the border color was changed.</para> - </section> - -</section> \ No newline at end of file +...]]></programlisting> + <para>The <emphasis> + <property>&quot;styleClass&quot;</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:tab&gt; </property> + </emphasis> is defined as it&apos;s shown in the example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:tab ... styleClass="myClass"/> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and <emphasis> + <property>styleClass</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tab_oc.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, the border color was + changed.</para> + </section> + +</section> Modified: trunk/docs/userguide/en/src/main/docbook/included/tabPanel.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2008-10-01 12:16:56 UTC (rev 10638) +++ trunk/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2008-10-01 12:29:54 UTC (rev 10639) @@ -1,4 +1,4 @@ -f<?xml version='1.0' encoding='UTF-8'?> +<?xml version='1.0' encoding='UTF-8'?> <section> <sectioninfo> <keywordset>