[richfaces-svn-commits] JBoss Rich Faces SVN: r2723 - trunk/docs/userguide/en/src/main/docbook/included.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Mon Sep 3 11:56:27 EDT 2007
Author: vkorluzhenko
Date: 2007-09-03 11:56:27 -0400 (Mon, 03 Sep 2007)
New Revision: 2723
Modified:
trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml
Log:
http://jira.jboss.com/jira/browse/RF-447 - added classes
Modified: trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2007-09-03 15:46:25 UTC (rev 2722)
+++ trunk/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2007-09-03 15:56:27 UTC (rev 2723)
@@ -145,167 +145,167 @@
</para>
</section>
-
+
<section>
- <title>Relevant resources links</title>
- <para>
- <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf?c=scrollableDataTable">Here</ulink>
- you can see the example of <emphasis role="bold"><rich:scrollableDataTable></emphasis> usage. </para>
- </section>
- <!--section>
- <title>Details of Usage</title>
- <para>The <property>table</property> component is very similar to the custom JSF dataTable one,
- except for the common peculiarities of any rich component:</para>
- <itemizedlist>
- <listitem>Skin support. The <property>table</property> completely meets a three-class
- principle of Rich Faces skinnability</listitem>
- <listitem>Support of Ajax updates for a limited set of strings</listitem>
- </itemizedlist>
- <para>Skins support is described in the <link linkend="ArchitectureOverview">corresponding
- section</link>. Ajax support is possible because the component is created basing on the
- <emphasis role="bold">
- <property><a4j:repeat></property>
- </emphasis> component and as a result the component has its possibilities of Ajax updates for
- a limited set of strings. The component is implemented with the <emphasis>
- <property>"ajaxKeys"</property>
- </emphasis> attribute for a <property>table</property> and in contrast to the <emphasis
- role="bold">
- <property><a4j:repeat></property>
- </emphasis> outputs the standard HTML structure for table rendering.</para>
-
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[...
- <rich:dataTable value="#{capitalsBean.capitals}" var="capitals"
- ajaxKeys="#{bean.ajaxSet}" binding="#{bean.table}" id="table">
- <Set of columns and header/footer facets>
- </rich:dataTable>
-...
- <a4j:commandButton action="#{bean.someAction}" reRender="table"/>
-...
-]]></programlisting>
- <para>For such a table during <property>someAction</property> method processing called with AJAX
- request when the key is pressed it's possible to fill in lot's of ajaxKeys
- with strings indices that are to be updated. A resulting output on the client contains only
- required strings and they are updated in the tree, even when update is specified for the whole
- table.</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>.</para>
- <para>Default style classes are mapped on <emphasis><property>skin
- parameters</property>.</emphasis></para>
- <para>To redefine appearance of all dataTables at once, there are two ways:</para>
+
+ <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>
+
+ <para>There are two ways to redefine the appearance of all <emphasis role="bold">
+ <property><rich:scrollableDataTable></property>
+ </emphasis> components at once:</para>
+
<itemizedlist>
- <listitem>to redefine corresponding skin parameters</listitem>
- <listitem>to add <emphasis>
+ <listitem>
+ <para>Redefine the corresponding skin parameters</para>
+ </listitem>
+
+ <listitem>
+ <para>Add to your style sheets <emphasis>
<property>style classes</property>
- </emphasis> used by the dataTable to your page style sheets</listitem>
+ </emphasis> used by a <emphasis role="bold">
+ <property><rich:scrollableDataTable></property>
+ </emphasis> component</para>
+ </listitem>
</itemizedlist>
</section>
+ <!--section>
+ <title> Skin parameters redefinition</title>
+ </section-->
+
<section>
- <title>Definition custom Style Classes</title>
+ <title>Definition of Custom Style Classes</title>
+
<figure>
- <title>DataTable class names</title>
+ <title>Classes names</title>
+
<mediaobject>
<imageobject>
- <imagedata fileref="images/dataTable2.gif"/>
+ <imagedata fileref="images/sdt.png"/>
</imageobject>
</mediaobject>
</figure>
- <para>On the screenshot there are class names defining the marked elements.</para>
+ <para>On the screenshot, there are classes names defining specified elements.</para>
+
<table>
- <title>Component skin classes</title>
+ <title>Classes names that define component appearance</title>
+
<tgroup cols="2">
<thead>
<row>
<entry>Class name</entry>
- <entry>An element defined with a class</entry>
+
+ <entry>Description</entry>
</row>
</thead>
+
<tbody>
<row>
- <entry>rich-table</entry>
- <entry>Applied to the <emphasis><property>"table"</property></emphasis> element</entry>
+ <entry>rich-sdt</entry>
+
+ <entry>Defines the styles for component appearance</entry>
</row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Classes names that define footer and header elements</title>
+
+ <tgroup cols="2">
+ <thead>
<row>
- <entry>rich-table-caption</entry>
- <entry>Applied to facet="caption"</entry>
+ <entry>Class name</entry>
+
+ <entry>Description</entry>
</row>
+ </thead>
+
+ <tbody>
+
<row>
- <entry>rich-table-header</entry>
- <entry>Applied to a whole header "header"</entry>
+ <entry>rich-sdt-header-cell</entry>
+
+ <entry>Defines styles for header cells</entry>
</row>
+
<row>
- <entry>rich-table-headercell</entry>
- <entry>Applied to a particular cell of a header "header"</entry>
+ <entry>rich-sdt-footer-cell</entry>
+
+ <entry>Defines styles for footer cells</entry>
</row>
+
<row>
- <entry>rich-table-subheader</entry>
- <entry>Applied to the whole subheader "header"</entry>
+ <entry>rich-sdt-hsep</entry>
+
+ <entry>Defines styles for header separators</entry>
</row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Classes names that define rows and cells appearance</title>
+
+ <tgroup cols="2">
+ <thead>
<row>
- <entry>rich-table-subheadercell</entry>
- <entry>Applied to a particular cell of subheader "header"</entry>
+ <entry>Class name</entry>
+
+ <entry>Description</entry>
</row>
+ </thead>
+
+ <tbody>
+
<row>
- <entry>rich-table-cell</entry>
- <entry> Applied to a particular table cell</entry>
+ <entry>rich-sdt-column-cell</entry>
+
+ <entry>Defines styles for column cells</entry>
</row>
+
<row>
- <entry>rich-table-row</entry>
- <entry>Applied to the whole table row</entry>
+ <entry>rich-sdt-row-selected</entry>
+
+ <entry>Defines styles for selected row</entry>
</row>
+
<row>
- <entry>rich-table-subfooter</entry>
- <entry>Applied to the whole subheader "footer"</entry>
+ <entry>rich-sdt-row-active</entry>
+
+ <entry>Defines styles for active row</entry>
</row>
- <row>
- <entry>rich-table-subfootercell</entry>
- <entry>Applied to a particular subheader "footer"</entry>
- </row>
- <row>
- <entry>rich-table-footer</entry>
- <entry>Applied to the whole "footer"</entry>
- </row>
- <row>
- <entry>rich-table- footercell</entry>
- <entry>Applied to the specific of "footer"</entry>
- </row>
+
</tbody>
</tgroup>
</table>
- <para>To redefine an appearance of all <property>tables</property> on a page, redefine the
- corresponding class in the CSS file used with the page.</para>
- <para>To redefine a style of a particular page, use <emphasis>
- <property>"component class"</property>
- </emphasis> attributes which list is the same as the <property>dataTable</property> one and is
- known to you.</para>
+
+ <para>In order to redefine the style for all <emphasis role="bold">
+ <property><rich:scrollableDataTable></property>
+ </emphasis> components on a page using CSS, it's enough to create classes with the
+ same names and define the necessary properties in them.</para>
+
+ <para>To change the style of particular <emphasis role="bold">
+ <property><rich:scrollableDataTable></property>
+ </emphasis> components define your own style classes in the corresponding <emphasis
+ role="bold">
+ <property><rich:scrollableDataTable></property>
+ </emphasis>attributes.</para>
</section>
+
<section>
<title>Relevant resources links</title>
<para>
- <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?c=dataTable"
- >Here</ulink> you can see the example of <emphasis role="bold"
- ><rich:dataTable></emphasis> usage and sources for the given example. </para>
- <para>The article about <emphasis role="bold"><rich:dataTable></emphasis>
- flexibility can be found <ulink url="http://labs.jboss.com/wiki/RichFacesArticleDataTable"
- >here</ulink>.</para>
- <para>More information about using <emphasis role="bold"
- ><rich:dataTable></emphasis> and <emphasis role="bold"
- ><rich:subTable></emphasis> could be found on the <ulink
- url="http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4059044#4059044">RichFaces Users Forum.</ulink>
- </para>
- <para>How to use <emphasis role="bold"><rich:dataTable></emphasis> and <emphasis
- role="bold"><rich:dataScroller></emphasis> in a context of Extended
- Data Model see <ulink
- url="http://www.jboss.com/index.html?module=bb&op=viewtopic&t=115636"
- >here</ulink>.</para>
- </section-->
+ <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf?c=scrollableDataTable">Here</ulink>
+ you can see the example of <emphasis role="bold"><rich:scrollableDataTable></emphasis> usage. </para>
+ </section>
</section>
More information about the richfaces-svn-commits
mailing list