Author: cluts
Date: 2008-05-03 08:50:07 -0400 (Sat, 03 May 2008)
New Revision: 8429
Added:
trunk/docs/userguide/en/src/main/resources/images/tab_oc.png
trunk/docs/userguide/en/src/main/resources/images/tab_pc.png
Modified:
trunk/docs/userguide/en/src/main/docbook/included/tab.xml
Log:
RF-1052 - added screens and information for tab
Modified: trunk/docs/userguide/en/src/main/docbook/included/tab.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/tab.xml 2008-05-03 11:59:41 UTC (rev
8428)
+++ trunk/docs/userguide/en/src/main/docbook/included/tab.xml 2008-05-03 12:50:07 UTC (rev
8429)
@@ -97,19 +97,23 @@
</para>
<programlisting role="XML"><![CDATA[...
<rich:tabPanel width="20%">
- <rich:tab label="Tab">
- <h:outputText value="Active Tab content"/>
- </rich:tab>
- <rich:tab label="Disabled Tab" disabled="true">
- ...
- </rich:tab>
- <rich:tab label="Next Enabled Tab">
- ...
- </rich:tab>
+ <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 second disabled and two active <property>tabs</property> (see the
picture).</para>
+ with the last disabled and three active <property>tabs</property> (see the
picture).</para>
<figure>
<title><emphasis
role="bold"><property><rich:tabPanel></property></emphasis>
with disabled <emphasis
role="bold"><property><rich:tab></property></emphasis></title>
<mediaobject>
@@ -306,7 +310,7 @@
</figure>
- <table>
+ <table id="tab_tab">
<title>Classes names that define a tab</title>
<tgroup cols="2">
<thead>
@@ -356,14 +360,63 @@
<para>In order to redefine styles for all <emphasis
role="bold">
<property><rich:tab></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>
+ same names (possible classes could be found in the tables <link
linkend="tab_tab"> above</link>) and define necessary properties in
them. </para>
- <para>To change styles of particular <emphasis role="bold">
- <property><rich:tab></property>
- </emphasis> components define your own style classes in the corresponding
<emphasis
- role="bold">
- <property><rich:tab></property>
- </emphasis>attribute.</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’s possible to change styles of particular <emphasis
role="bold"
+ ><property><rich:tab></property></emphasis>
component. In this case you should create own style classes and use them in corresponding
<emphasis role="bold"
+ ><property><rich:tab></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>"styleClass"</property></emphasis>
attribute for <emphasis role="bold"
+ ><property><rich:tab> </property></emphasis>
is defined as it’s shown in the example below:</para>
+
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![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
Added: trunk/docs/userguide/en/src/main/resources/images/tab_oc.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/src/main/resources/images/tab_oc.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/docs/userguide/en/src/main/resources/images/tab_pc.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/src/main/resources/images/tab_pc.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Show replies by date