Author: atsebro Date: 2009-09-28 07:55:49 -0400 (Mon, 28 Sep 2009) New Revision: 15677 Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tab.xml Log: RF-7804: Rich Output component group description review --> rich:tab Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tab.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tab.xml 2009-09-28 11:55:16 UTC (rev 15676) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tab.xml 2009-09-28 11:55:49 UTC (rev 15677) @@ -1,314 +1,334 @@ <section role="NotInToc" id="rich_tab"> - <title> - &lt; - rich:tab - &gt; - <emphasis role="since"> - <superscript> available since <emphasis role="version">3.0.0</emphasis> - </superscript> - </emphasis> - </title> - <section> - <title>Description</title> - <para>A <property>tab</property> section within a tab panel.</para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:tab&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tab_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para>Fully skinnable <property>tabs</property> content</para> - </listitem> - <listitem> - <para>Disabled/enabled <property>tab</property> options</para> - </listitem> - <listitem> - <para>Groups any content inside a <property>tab</property> - </para> - </listitem> - <listitem> - <para>Each <property>tab</property> has a unique name for a direct access (e.g. for - switching between tabs)</para> - </listitem> - <listitem> - <para>Switch methods can be easily customized for every <property>tab</property> - separately with attribute to:</para> - <itemizedlist> - <listitem> - <para> - <code>Server</code> - </para> - </listitem> - <listitem> - <para> - <code>Client</code> - </para> - </listitem> - <listitem> - <para> - <code>AJAX</code> - </para> - </listitem> - </itemizedlist> - </listitem> - </itemizedlist> - </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>"label"</property> - </emphasis> attribute defines text to be represented. If you can use - the <emphasis> - <property>"label"</property> - </emphasis> facet, you can even not use the <emphasis> - <property>"label"</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"/> - </f:facet> - ... - <!--Any Content inside--> - ... -</rich:tab> -... -]]></programlisting> + <title>&lt;rich:tab&gt;<emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis></superscript> + </emphasis></title> + <section> + <title>Description</title> + <para>The component defines a tab section within a tab panel.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tab_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> - <para>A marker on a <property>tab</property> header defined with the <emphasis> - <property>"label"</property> - </emphasis> attribute. Moreover, each <property>tab</property> could - be disabled (switching on this <property>tab</property> is impossible) - with the <emphasis> - <property>"disable"</property> - </emphasis> attribute.</para> - - <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" /> - ... - </tabs:tab> - <tabs:tab label="Nikon"> - <h:outputText value="Nikon D70s" /> - ... - </tabs:tab> - <tabs:tab label="Olympus"> - <h:outputText value="Olympus EVOLT E-500" /> - ... - </tabs:tab> - <tabs:tab disabled="true" name="disabled" label="Disabled"/> -</rich:tabPanel> -...]]></programlisting> - <para>With this example it'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>"id"</property> - </emphasis> attribute). Using this attribute value it'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> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Fully skinnable <property>tabs</property> content</para> + </listitem> + <listitem> + <para>Disabled/enabled <property>tab</property> options</para> + </listitem> + <listitem> + <para>Groups any content inside a <property>tab</property> + </para> + </listitem> + <listitem> + <para>Each <property>tab</property> has a unique name for a direct access (e.g. for switching between tabs)</para> + </listitem> + <listitem> + <para>Switch methods can be easily customized for every <property>tab</property> separately with attribute to:</para> + <itemizedlist> <listitem> - <para> - <emphasis> - <property>"onmouseover"</property> - </emphasis> - </para> + <para> + <code>Server</code> + </para> </listitem> <listitem> - <para> - <emphasis> - <property>"onmouseout"</property> - </emphasis> - </para> + <para> + <code>Client</code> + </para> </listitem> <listitem> - <para> etc. </para> + <para> + <code>AJAX</code> + </para> </listitem> - </itemizedlist> - <para> Some event could be performed on the tab which has been entered/left - using <emphasis> - <property>"ontabenter"</property> - </emphasis>/<emphasis> - <property>"ontableave"</property> - </emphasis> attributes. See the example below.</para> + </itemizedlist> + </listitem> + </itemizedlist> + </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> + + <programlisting role="XML"><![CDATA[<rich:tab> + <f:facet name="label"> + <h:graphicImage value="/images/img1.png"/> + </f:facet> + <!--Any Content inside--> +</rich:tab>]]></programlisting> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tabPanel> - <rich:tab label="Tab1" ontabenter="alert()"> - ... - </rich:tab> + <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>"disable"</property> + </emphasis> attribute.</para> + + + <programlisting role="XML"><![CDATA[<rich:tabPanel width="20%"> + <tabs:tab label="Canon"> + <h:outputText value="Canon EOS Digital Rebel XT" /> + ... + </tabs:tab> + <tabs:tab label="Nikon"> + <h:outputText value="Nikon D70s" /> + ... + </tabs:tab> + <tabs:tab label="Olympus"> + <h:outputText value="Olympus EVOLT E-500" /> + ... + </tabs:tab> + <tabs:tab disabled="true" name="disabled" label="Disabled"/> +</rich:tabPanel>]]></programlisting> + <para>With this example it'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>"id"</property> + </emphasis> attribute). Using this attribute value it'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> + <code>onmouseover</code> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <code>onmouseout</code> + </emphasis> + </para> + </listitem> + <listitem> + <para>etc.</para> + </listitem> + </itemizedlist> + <para> Some event could be performed on the tab which has been entered/left using &quot;<emphasis><property>"ontabenter"</property></emphasis>&quot; and + &quot;<emphasis><property>ontableave</property></emphasis>&quot; attributes. See the example below:</para> + + + <programlisting role="XML"><![CDATA[<rich:tabPanel> + <rich:tab label="Tab1" ontabenter="alert()"> ... -</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>"process"</property> - </emphasis> attribute usage you can find in the - <link linkend="process"> "Decide what to process" </link> guide section. </para> - </section> - <section> - <title>Reference Data</title> - <para> - <ulink url="&tlddoc;rich/tab.html">Table of - &lt;rich:tab&gt; - attributes</ulink>. - </para> - <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> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>label</entry> - <entry>Defines the text for the actual "tab" in a tab section</entry> - </row> - </tbody> - </tgroup> - </table> - <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> - You can find all necessary information about style classes redefinition in - <link linkend="customstyles">Definition of Custom Style Classes</link> - section. - </section> -</section> \ No newline at end of file + </rich:tab> + ... +</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>"process"</property> + </emphasis> attribute usage you can find in the <link linkend="process"> "Decide what to process" </link> guide section. </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/tab.html">Table of &lt;rich:tab&gt; attributes</ulink>. </para> + <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> + <table> + <title>Facet</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>label</entry> + <entry>Defines the text for the actual &quot;tab&quot; in a tab section</entry> + </row> + </tbody> + </tgroup> + </table> + + <table id="tab_classes"> + <title>Style classes (selectors) and mapped skin parameters</title> + <tgroup cols="4"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + <entry>Skin parameter</entry> + <entry>CSS property</entry> + </row> + </thead> + <tbody> + + <row> + <entry morerows="2">.rich-tab-active</entry> + <entry morerows="2">Defines styles for an active tab</entry> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>subBorderColor</entry> + <entry>border-color</entry> + </row> + + <row> + <entry>.rich-tab-bottom-line</entry> + <entry>Defines styles for a tab bottom line</entry> + <entry>panelBorderColor</entry> + <entry>border-bottom-color</entry> + </row> + + <row> + <entry morerows="2">.rich-tab-disabled</entry> + <entry morerows="2">Defines styles for a disabled tab</entry> + <entry>subBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tabBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>tabDisabledTextColor</entry> + <entry>color</entry> + </row> + + <row> + <entry morerows="2">.rich-tab-header</entry> + <entry morerows="2">Defines styles for a tab header</entry> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + + <row> + <entry morerows="1">.rich-tab-inactive</entry> + <entry morerows="1">Defines styles for an inactive tab</entry> + <entry>subBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tabBackgroundColor</entry> + <entry>background-color</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Internal style classes (selectors)</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name (selector)</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-disabled</entry> + <entry>Defines styles for a disabled tab</entry> + </row> + <row> + <entry>.rich-tab-header</entry> + <entry>Defines styles for a tab header</entry> + </row> + </tbody> + </tgroup> + </table> + + + + + <para>You can find all necessary information about style classes redefinition in <link linkend="customstyles">Definition of Custom Style Classes</link> section. </para> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.js... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + <para> + If you have any questions or ideas regarding the <emphasis role="bold"><property>&lt;rich:tab&gt;</property></emphasis> tell about them at the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>. + </para> + </section> +</section>