9:51 a.m.
Author: vkorluzhenko
Date: 2007-11-26 10:51:48 -0500 (Mon, 26 Nov 2007)
New Revision: 4263
Modified:
trunk/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml
trunk/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml
trunk/docs/userguide/en/src/main/docbook/included/dataGrid.xml
trunk/docs/userguide/en/src/main/docbook/included/dataList.xml
trunk/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml
trunk/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml
trunk/docs/userguide/en/src/main/docbook/included/dataTable.xml
Log:
http://jira.jboss.com/jira/browse/RF-657 - improved description, added pictures.
Modified: trunk/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml 2007-11-26
15:41:31 UTC (rev 4262)
+++ trunk/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml 2007-11-26
15:51:48 UTC (rev 4263)
@@ -75,7 +75,7 @@
<property><rich:dataDefinitionList></property>
</emphasis> component allows to generate an definition list from a
model.</para>
<para>The component has the <emphasis>
- <property>"type"</property>
+ <property>"term"</property>
</emphasis> facet, which corresponds to the <emphasis>
<property>"type"</property>
</emphasis> parameter for the <emphasis>
@@ -119,11 +119,11 @@
<property>"title"</property>
</emphasis> are used for popup title.</para>
- <para>The component is created basing on the <emphasis
role="bold">
+ <para>The component was created basing on the <emphasis
role="bold">
<property><a4j:repeat></property>
</emphasis> component and as a result it could be partially updated with Ajax.
<emphasis>
<property>"ajaxKeys"</property>
- </emphasis> attribute allows to define elements that are updated after an Ajax
request.</para>
+ </emphasis> attribute allows to define rows that are updated after an Ajax
request.</para>
<para>Here is an example:</para>
<para>
@@ -131,8 +131,8 @@
</para>
<programlisting role="XML"><![CDATA[...
<rich:dataDefinitionList value="#{dataTableScrollerBean.allCars}"
var="car" ajaxKeys="#{listBean.list}"
- binding="#{listBean.dataList}" id="list"
rows="5" type="disc">
- <h:outputText value="#{car.make}
#{car.model}"></h:outputText>
+ binding="#{listBean.dataList}" id="list">
+ ...
</rich:dataDefinitionList>
...
<a4j:commandButton action"#{listBean.action}" reRender="list"
value="Submit"/>
Modified: trunk/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml 2007-11-26
15:41:31 UTC (rev 4262)
+++ trunk/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml 2007-11-26
15:51:48 UTC (rev 4263)
@@ -13,7 +13,7 @@
<title>DataGrid component</title>
<mediaobject>
<imageobject>
- <imagedata fileref="images/datagrid1.gif"/>
+ <imagedata fileref="images/datagrid1.png"/>
</imageobject>
</mediaobject>
</figure>
Modified: trunk/docs/userguide/en/src/main/docbook/included/dataGrid.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/dataGrid.xml 2007-11-26 15:41:31 UTC
(rev 4262)
+++ trunk/docs/userguide/en/src/main/docbook/included/dataGrid.xml 2007-11-26 15:51:48 UTC
(rev 4263)
@@ -136,11 +136,11 @@
</mediaobject>
</figure>
- <para>The component is created basing on the <emphasis
role="bold">
+ <para>The component was created basing on the <emphasis
role="bold">
<property><a4j:repeat></property>
</emphasis> component and as a result it could be partially updated with
Ajax. <emphasis>
<property>"ajaxKeys"</property>
- </emphasis> attribute allows to define elements that are updated after an
Ajax request.</para>
+ </emphasis> attribute allows to define rows that are updated after an Ajax
request.</para>
<para>Here is an example:</para>
<para>
@@ -149,7 +149,7 @@
<programlisting role="XML"><![CDATA[...
<rich:dataGrid value="#{dataTableScrollerBean.allCars}"
var="car" ajaxKeys="#{listBean.list}"
binding="#{listBean.dataGrid}" id="grid"
elements="4" columns="2">
- <h:outputText value="#{car.make}
#{car.model}"></h:outputText>
+ ...
</rich:dataGrid>
...
<a4j:commandButton action"#{listBean.action}" reRender="grid"
value="Submit"/>
Modified: trunk/docs/userguide/en/src/main/docbook/included/dataList.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/dataList.xml 2007-11-26 15:41:31 UTC
(rev 4262)
+++ trunk/docs/userguide/en/src/main/docbook/included/dataList.xml 2007-11-26 15:51:48 UTC
(rev 4263)
@@ -131,11 +131,11 @@
</mediaobject>
</figure>
- <para>The component is created basing on the <emphasis
role="bold">
+ <para>The component was created basing on the <emphasis
role="bold">
<property><a4j:repeat></property>
</emphasis> component and as a result it could be partially updated with
Ajax. <emphasis>
<property>"ajaxKeys"</property>
- </emphasis> attribute allows to define elements that are updated after an
Ajax request.</para>
+ </emphasis> attribute allows to define rows that are updated after an Ajax
request.</para>
<para>Here is an example:</para>
<para>
@@ -144,7 +144,7 @@
<programlisting role="XML"><![CDATA[...
<rich:dataList value="#{dataTableScrollerBean.allCars}"
var="car" ajaxKeys="#{listBean.list}"
binding="#{listBean.dataList}" id="list"
rows="5" type="disc">
- <h:outputText value="#{car.make}
#{car.model}"></h:outputText>
+ ...
</rich:dataList>
...
<a4j:commandButton action"#{listBean.action}" reRender="list"
value="Submit"/>
Modified: trunk/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2007-11-26
15:41:31 UTC (rev 4262)
+++ trunk/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2007-11-26
15:51:48 UTC (rev 4263)
@@ -121,11 +121,11 @@
<property>"title"</property>
</emphasis> are used for popup title.</para>
- <para>The component is created basing on the <emphasis
role="bold">
+ <para>The component was created basing on the <emphasis
role="bold">
<property><a4j:repeat></property>
</emphasis> component and as a result it could be partially updated with Ajax.
<emphasis>
<property>"ajaxKeys"</property>
- </emphasis> attribute allows to define elements that are updated after an Ajax
request.</para>
+ </emphasis> attribute allows to define rows that are updated after an Ajax
request.</para>
<para>Here is an example:</para>
<para>
@@ -133,8 +133,8 @@
</para>
<programlisting role="XML"><![CDATA[...
<rich:dataOrderedList value="#{dataTableScrollerBean.allCars}"
var="car" ajaxKeys="#{listBean.list}"
- binding="#{listBean.dataList}" id="list"
rows="5" type="disc">
- <h:outputText value="#{car.make}
#{car.model}"></h:outputText>
+ binding="#{listBean.dataList}" id="list">
+ ...
</rich:dataOrderedList>
...
<a4j:commandButton action"#{listBean.action}" reRender="list"
value="Submit"/>
Modified: trunk/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml 2007-11-26
15:41:31 UTC (rev 4262)
+++ trunk/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml 2007-11-26
15:51:48 UTC (rev 4263)
@@ -1,29 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<section>
-<sectioninfo>
-<keywordset>
-<keyword>dataTable</keyword>
-</keywordset>
-</sectioninfo>
-<section>
-<title>Description</title>
- <para>The component for tables rendering that allows choosing data from a model
and obtains
- built-in support of Ajax updates.</para>
- <figure>
- <title>DataTable component</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/datatable1.gif"/>
- </imageobject>
- </mediaobject>
- </figure>
+ <sectioninfo>
+ <keywordset>
+ <keyword>dataTable</keyword>
+ </keywordset>
+ </sectioninfo>
+ <section>
+ <title>Description</title>
+ <para>The component for tables rendering that allows choosing data from a
model and obtains
+ built-in support of Ajax updates.</para>
+ <figure>
+ <title>DataTable component</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/datatable1.gif"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
</section>
<section>
- <title>Key Features</title>
- <itemizedlist>
- <listitem>A completely skinned table and child elements</listitem>
- <listitem>Possibility to insert the complex subcomponents
<emphasis><property>"colGroup"</property></emphasis>
and "subTable"</listitem>
- <listitem>Possibility to update a limited set of strings with
AJAX</listitem>
- </itemizedlist>
+ <title>Key Features</title>
+ <itemizedlist>
+ <listitem>A completely skinned table and child
elements</listitem>
+ <listitem>Possibility to insert the complex subcomponents
+ <property>"colGroup"</property> and
+
<property>"subTable"</property></listitem>
+ <listitem>Possibility to update a limited set of strings with
AJAX</listitem>
+ </itemizedlist>
+ </section>
</section>
-</section>
\ No newline at end of file
Modified: trunk/docs/userguide/en/src/main/docbook/included/dataTable.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/dataTable.xml 2007-11-26 15:41:31
UTC (rev 4262)
+++ trunk/docs/userguide/en/src/main/docbook/included/dataTable.xml 2007-11-26 15:51:48
UTC (rev 4263)
@@ -71,75 +71,123 @@
</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">
+ <para>The <emphasis role="bold">
+ <property><rich:dataTable></property>
+ </emphasis> component is similar to the <emphasis
role="bold">
+ <property><h:dataTable></property>
+ </emphasis> one, except Ajax support and skinnability . Ajax support is
possible, because the
+ component was 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>
+ </emphasis> component and as a result it could be partially updated with
Ajax. <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>
+ </emphasis> attribute allows to define rows that are updated after an Ajax
request.</para>
+ <para>Here is an example:</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-->
+ ajaxKeys="#{bean.ajaxSet}" binding="#{bean.table}"
id="table">
+ ...
</rich:dataTable>
...
- <a4j:commandButton action="#{bean.someAction}"
reRender="table"/>
+ <a4j:commandButton action"#{tableBean.action}"
reRender="table" value="Submit"/>
...
]]></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>
+ <para> In the example <emphasis>
+ <property>"reRender"</property>
+ </emphasis> attribute contains value of <emphasis>
+ <property>"id"</property>
+ </emphasis> attribute for <emphasis role="bold">
+ <property><rich:dataTable></property>
+ </emphasis> component. As a result the component are updated after an Ajax
request.</para>
+
+ <para>The component allows to use <emphasis>
+ <property>"header"</property>
+ </emphasis>, <emphasis>
+ <property>"footer"</property>
+ </emphasis> and <emphasis>
+ <property>"caption"</property>
+ </emphasis> facets for output. See an example below:</para>
+
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[...
+ <rich:dataTable value="#{capitalsBean.capitals}" var="cap"
rows="5">
+ <f:facet name="caption">United States Capitals</f:facet>
+ <f:facet name="header">Capitals and States Table</f:facet>
+ <rich:column>
+ <f:facet name="header">State Flag</f:facet>
+ <h:graphicImage value="#{cap.stateFlag}"/>
+ <f:facet name="footer">State Flag</f:facet>
+ </rich:column>
+ <rich:column>
+ <f:facet name="header">State Name</f:facet>
+ <h:outputText value="#{cap.state}"/>
+ <f:facet name="footer">State Name</f:facet>
+ </rich:column>
+ <rich:column >
+ <f:facet name="header">State Capital</f:facet>
+ <h:outputText value="#{cap.name}"/>
+ <f:facet name="footer">State Capital</f:facet>
+ </rich:column>
+ <rich:column>
+ <f:facet name="header">Time Zone</f:facet>
+ <h:outputText value="#{cap.timeZone}"/>
+ <f:facet name="footer">Time Zone</f:facet>
+ </rich:column>
+ <f:facet name="footer">Capitals and States Table</f:facet>
+ </rich:dataTable>
+...
+]]></programlisting>
+
+ <para>This is a result:</para>
+
+ <figure>
+ <title>Component usage</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/datatable3.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
</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>
-
+ <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:dataTable></property>
- </emphasis> components at once:</para>
-
+ <property><rich:dataTable></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><rich:dataTable></property>
- </emphasis> component</para>
+ <property>style classes</property>
+ </emphasis> used by a <emphasis role="bold">
+ <property><rich:dataTable></property>
+ </emphasis> component</para>
</listitem>
</itemizedlist>
</section>
-
- <section id="SPR">
+
+ <section id="SPR">
<title>Skin Parameters Redefinition</title>
-
+
<table>
<title>Skin parameters redefinition for a table</title>
<tgroup cols="2">
@@ -157,7 +205,7 @@
</tbody>
</tgroup>
</table>
-
+
<table>
<title>Skin parameters redefinition for a header</title>
<tgroup cols="2">
@@ -175,7 +223,7 @@
</tbody>
</tgroup>
</table>
-
+
<table>
<title>Skin parameters redefinition for a footer</title>
<tgroup cols="2">
@@ -193,7 +241,7 @@
</tbody>
</tgroup>
</table>
-
+
<table>
<title>Skin parameters redefinition for a column header</title>
<tgroup cols="2">
@@ -211,7 +259,7 @@
</tbody>
</tgroup>
</table>
-
+
<table>
<title>Skin parameters redefinition for a column footer</title>
<tgroup cols="2">
@@ -229,7 +277,7 @@
</tbody>
</tgroup>
</table>
-
+
<table>
<title>Skin parameters redefinition for cells</title>
<tgroup cols="2">
@@ -255,14 +303,14 @@
</tbody>
</tgroup>
</table>
-
+
</section>
-
+
<section id="DofCCS">
<title>Definition of Custom Style Classes</title>
-
+
<para>On the screenshot there are classes names that define styles for
component elements.</para>
-
+
<figure>
<title>DataTable class names</title>
<mediaobject>
@@ -271,7 +319,7 @@
</imageobject>
</mediaobject>
</figure>
-
+
<table>
<title>Classes names that define a whole component appearance</title>
<tgroup cols="2">
@@ -293,7 +341,7 @@
</tbody>
</tgroup>
</table>
-
+
<table>
<title>Classes names that define header and footer elements</title>
<tgroup cols="2">
@@ -304,12 +352,12 @@
</row>
</thead>
<tbody>
-
+
<row>
<entry>rich-table-header</entry>
<entry>Defines styles for a table header row</entry>
</row>
-
+
<row>
<entry>rich-table-header-continue</entry>
<entry>Defines styles for all header lines after the
first</entry>
@@ -317,13 +365,13 @@
<row>
<entry>rich-table-subheader</entry>
<entry>Defines styles for a column header</entry>
- </row>
-
+ </row>
+
<row>
<entry>rich-table-footer</entry>
<entry>Defines styles for a footer row</entry>
</row>
-
+
<row>
<entry>rich-table-footer-continue</entry>
<entry>Defines styles for all footer lines after the
first</entry>
@@ -335,7 +383,7 @@
</tbody>
</tgroup>
</table>
-
+
<table>
<title>Classes names that define rows and cells of a table</title>
<tgroup cols="2">
@@ -346,11 +394,11 @@
</row>
</thead>
<tbody>
- <row>
+ <row>
<entry>rich-table-headercell</entry>
<entry>Defines styles for a header cell</entry>
</row>
-
+
<row>
<entry>rich-table-subheadercell</entry>
<entry>Defines styles for a column header cell</entry>
@@ -367,12 +415,12 @@
<entry>rich-table-firstrow</entry>
<entry>Defines styles for a table start row</entry>
</row>
-
+
<row>
<entry>rich-table-footercell</entry>
<entry>Defines styles for a footer cell</entry>
</row>
-
+
<row>
<entry>rich-table-subfootercell</entry>
<entry>Defines styles for a column footer cell</entry>
@@ -380,37 +428,44 @@
</tbody>
</tgroup>
</table>
-
+
<para>In order to redefine styles for all <emphasis
role="bold">
- <property><rich:dataTable></property>
- </emphasis> components on a page using CSS, it's enough to create
classes with the
+ <property><rich:dataTable></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>
-
+
<para>To change styles of particular <emphasis role="bold">
- <property><rich:dataTable></property>
- </emphasis> components, define your own style classes in the corresponding
<emphasis
- role="bold">
- <property><rich:dataTable></property>
- </emphasis>attributes.</para>
+ <property><rich:dataTable></property>
+ </emphasis> components, define your own style classes in the corresponding
<emphasis
+ role="bold">
+ <property><rich:dataTable></property>
+ </emphasis>attributes.</para>
</section>
<section>
<title>Relevant Resources Links</title>
<para>
<ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j...
- >Here</ulink> you can see the example of <emphasis
role="bold"
-
><property><rich:dataTable></property></emphasis> usage
and sources for the given example. </para>
- <para>The article about <emphasis
role="bold"><property><rich:dataTable></property></emphasis>
- flexibility can be found <ulink
url="http://labs.jboss.com/wiki/RichFacesArticleDataTable"
- >here</ulink>.</para>
- <para>More information about using <emphasis role="bold"
-
><property><rich:dataTable></property></emphasis> and
<emphasis role="bold"
-
><property><rich:subTable></property></emphasis> could
be found on the <ulink
-
url="http://www.jboss.com/index.html?module=bb&op=viewtopic&...
Users Forum.</ulink>
+ >Here</ulink> you can see the example of <emphasis
role="bold">
+ <property><rich:dataTable></property>
+ </emphasis> usage and sources for the given example. </para>
+ <para>The article about <emphasis role="bold">
+ <property><rich:dataTable></property>
+ </emphasis> flexibility can be found <ulink
+
url="http://labs.jboss.com/wiki/RichFacesArticleDataTable">h...
+ <para>More information about using <emphasis role="bold">
+ <property><rich:dataTable></property>
+ </emphasis> and <emphasis role="bold">
+ <property><rich:subTable></property>
+ </emphasis> could be found on the <ulink
+
url="http://www.jboss.com/index.html?module=bb&op=viewtopic&...
+ >RichFaces Users Forum.</ulink>
</para>
- <para>How to use <emphasis
role="bold"><property><rich:dataTable></property></emphasis>
and <emphasis
-
role="bold"><property><rich:dataScroller></property></emphasis>
in a context of Extended
- Data Model see <ulink
+ <para>How to use <emphasis role="bold">
+ <property><rich:dataTable></property>
+ </emphasis> and <emphasis role="bold">
+ <property><rich:dataScroller></property>
+ </emphasis> in a context of Extended Data Model see <ulink
url="http://www.jboss.com/index.html?module=bb&op=viewtopic&...
- >here</ulink>.</para>
+ >here</ulink>.</para>
</section>
</section>