Author: SeanRogers
Date: 2010-01-08 02:02:13 -0500 (Fri, 08 Jan 2010)
New Revision: 16250
Added:
root/docs/trunk/Component_Reference/en-US/extras/exam-Component_Reference-richdataGrid-richdataGrid_example.xml_sample
root/docs/trunk/Component_Reference/en-US/images/figu-Component_Reference-richdataGrid-The_richdataGrid_component.png
root/docs/trunk/Component_Reference/en-US/images/figu-Component_Reference-richdataGrid-richdataGrid_example.png
Modified:
root/docs/trunk/Component_Reference/en-US/chap-Component_Reference-Common_features.xml
root/docs/trunk/Component_Reference/en-US/chap-Component_Reference-Tables_and_grids.xml
Log:
Updated tables and grids
Modified:
root/docs/trunk/Component_Reference/en-US/chap-Component_Reference-Common_features.xml
===================================================================
---
root/docs/trunk/Component_Reference/en-US/chap-Component_Reference-Common_features.xml 2010-01-06
22:39:57 UTC (rev 16249)
+++
root/docs/trunk/Component_Reference/en-US/chap-Component_Reference-Common_features.xml 2010-01-08
07:02:13 UTC (rev 16250)
@@ -4,7 +4,7 @@
<chapter id="chap-Component_Reference-Common_features">
<title>Common features</title>
<para>
- Incomplete
+ This chapter covers those attributes and features that are common to many of the
components in the tag libraries.
</para>
<section
id="sect-Component_Reference-Common_features-Positioning_in_popup_components">
<title>Positioning in popup components</title>
Modified:
root/docs/trunk/Component_Reference/en-US/chap-Component_Reference-Tables_and_grids.xml
===================================================================
---
root/docs/trunk/Component_Reference/en-US/chap-Component_Reference-Tables_and_grids.xml 2010-01-06
22:39:57 UTC (rev 16249)
+++
root/docs/trunk/Component_Reference/en-US/chap-Component_Reference-Tables_and_grids.xml 2010-01-08
07:02:13 UTC (rev 16250)
@@ -8,6 +8,33 @@
</para>
<section id="sect-Component_Reference-Tables_and_grids-richcolumn">
<title>rich:column</title>
+ <itemizedlist>
+ <listitem>
+ <para>
+ component-type: <classname>org.richfaces.Column</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ component-class:
<classname>org.richfaces.component.html.HtmlColumn</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ component-family: <classname>org.richfaces.Column</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ renderer-type:
<classname>org.richfaces.renderkit.CellRenderer</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ tag-class: <classname>org.richfaces.taglib.ColumnTag</classname>
+ </para>
+ </listitem>
+ </itemizedlist>
<para>
The <sgmltag><rich:column></sgmltag> component facilitates
columns in a table or other <classname>UIData</classname> component. It
supports merging columns and rows, sorting, filtering, and customized skinning.
</para>
@@ -117,6 +144,33 @@
<section
id="sect-Component_Reference-Tables_and_grids-richcolumnGroup">
<title>rich:columnGroup</title>
+ <itemizedlist>
+ <listitem>
+ <para>
+ component-type: <classname>org.richfaces.ColumnGroup</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ component-class:
<classname>org.richfaces.component.html.HtmlColumnGroup</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ component-family: <classname>org.richfaces.ColumnGroup</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ renderer-type: <classname>org.richfaces.ColumnGroupRenderer</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ tag-class: <classname>org.richfaces.taglib.ColumnGroupTag</classname>
+ </para>
+ </listitem>
+ </itemizedlist>
<para>
The <sgmltag><rich:columnGroup></sgmltag> component combines
multiple columns in a single row to organize complex parts of a table. The resulting
effect is similar to using the <varname>breakBefore</varname> attribute of the
<sgmltag><rich:column></sgmltag> component, but is clearer and
easier to follow in the source code.
</para>
@@ -131,19 +185,19 @@
<f:facet name="header">
<rich:columnGroup>
<rich:column rowspan="2">
- <h:outputText value="State Flag"/>
+ <h:outputText value="State Flag"/>
</rich:column>
<rich:column colspan="3">
- <h:outputText value="State Info"/>
+ <h:outputText value="State Info"/>
</rich:column>
<rich:column breakBefore="true">
- <h:outputText value="State Name"/>
+ <h:outputText value="State Name"/>
</rich:column>
<rich:column>
- <h:outputText value="State Capital"/>
+ <h:outputText value="State Capital"/>
</rich:column>
<rich:column>
- <h:outputText value="Time Zone"/>
+ <h:outputText value="Time Zone"/>
</rich:column>
</rich:columnGroup>
</f:facet>
@@ -174,8 +228,20 @@
<section id="sect-Component_Reference-Tables_and_grids-richcolumns">
<title>rich:columns</title>
+ <itemizedlist>
+ <listitem>
+ <para>
+ component-type: <classname>org.richfaces.Column</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ tag-class:
<classname>org.richfaces.taglib.ColumnsTagHandler</classname>
+ </para>
+ </listitem>
+ </itemizedlist>
<para>
- The <sgmltag><rich:columns></sgmltag> component allows for
dynamic sets of columns for tables. Columns and rows can be merged, and the look and feel
can be highly customized. The component gets a list from a data model and creates a
corresponding set of columns in a
<sgmltag><rich:dataTable></sgmltag> component. The
<sgmltag><rich:columns></sgmltag> component also supports header
and footer facets.
+ The <sgmltag><rich:columns></sgmltag> component allows for
dynamic sets of columns for tables. Columns and rows can be merged, and the look and feel
can be highly customized. The component gets a list from a data model and creates a
corresponding set of columns in a
<sgmltag><rich:dataTable></sgmltag> component. The
<sgmltag><rich:columns></sgmltag> component also supports
<literal>header</literal> and <literal>footer</literal> facets.
</para>
<para>
Basic usage of the <sgmltag><rich:columns></sgmltag>
component requires the <varname>value</varname> attribute, which points to the
data model; the <varname>var</varname> attribute, which holds the current
variable for the collection of data; and the <varname>index</varname>
attribute, which holds the current counter. The <varname>id</varname>
attribute is used for when the individuals rows require identifiers for Ajax events.
@@ -197,25 +263,172 @@
</programlisting>
</example>
<para>
- The <varname>columns</varname> attribute
+ The output can be customized to display specific columns and rows. The
<varname>columns</varname> attribute specifies the number of columns. The
<varname>rowspan</varname> attribute specifies the number of rows to display;
if the attribute is set to <literal>0</literal>, all remaining rows in the
table are displayed. The <varname>begin</varname> and
<varname>end</varname> attributes are used to specify the first and last
zero-based iteration items to display in the table. Columns can be adjusted using the
<varname>colspan</varname>, <varname>rowspan</varname>, and
<varname>breakBefore</varname> attributes the same as with the
<sgmltag><rich:column></sgmltag> component.
</para>
<para>
+ The <sgmltag><rich:columns></sgmltag> component can be used
alongside <sgmltag><rich:column></sgmltag> components.
+ </para>
+ <example
id="exam-Component_Reference-richcolumns-Using_richcolumns_and_richcolumn_together">
+ <title>Using <rich:columns> and <rich:column>
together</title>
+<programlisting language="XML" role="XML">
+<rich:dataTable value="#{dataTableScrollerBean.model}"
var="model" width="500px" rows="5">
+ <f:facet name="header">
+ <h:outputText value="Cars
Available"></h:outputText>
+ </f:facet>
+ <rich:columns value="#{dataTableScrollerBean.columns}"
var="columns" index="ind">
+ <f:facet name="header">
+ <h:outputText value="#{columns.header}" />
+ </f:facet>
+ <h:outputText value="#{model[ind].model} " />
+ </rich:columns>
+ <rich:column>
+ <f:facet name="header">
+ <h:outputText value="Price" />
+ </f:facet>
+ <h:outputText value="Price" />
+ </rich:column>
+ <rich:columns value="#{dataTableScrollerBean.columns}"
var="columns" index="ind">
+ <f:facet name="header">
+ <h:outputText value="#{columns.header}" />
+ </f:facet>
+ <h:outputText value="#{model[ind].mileage}$" />
+ </rich:columns>
+</rich:dataTable>
+</programlisting>
+ </example>
+ <para>
For details on filtering and sorting columns, refer to <xref
linkend="sect-Component_Reference-Tables_and_grids-Table_filtering" /> and
<xref linkend="sect-Component_Reference-Tables_and_grids-Table_sorting"
/>.
</para>
</section>
<section
id="sect-Component_Reference-Tables_and_grids-richdataFilterSlider">
<title>rich:dataFilterSlider</title>
+ <itemizedlist>
+ <listitem>
+ <para>
+ component-type: <classname>org.richfaces.DataFilterSlider</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ component-class:
<classname>org.richfaces.component.html.HtmlDataFilterSlider</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ component-family: <classname>org.richfaces.DataFilterSlider</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ renderer-type:
<classname>org.richfaces.DataFilterSliderRenderer</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ tag-class:
<classname>org.richfaces.taglib.dataFilterSliderTag</classname>
+ </para>
+ </listitem>
+ </itemizedlist>
<para>
- The <sgmltag><rich:dataFilterSlider></sgmltag> components is
a slider control that can be used for filtering data in a table.
+ The <sgmltag><rich:dataFilterSlider></sgmltag> components is
a slider control that can be used for filtering data in a table. The range and increment
of the slider control are defined using the <varname>startRange</varname>,
<varname>endRange</varname>, and <varname>increment</varname>
attributes.
</para>
+ <para>
+ The slider is bound to a <classname>UIData</classname> component specified
with the <varname>for</varname> attribute. The
<varname>forValRef</varname> attribute refers to the
<varname>value</varname> attribute used by the target component, and the
<varname>filterBy</varname> attribute specifies which object member to filter
according to the slider.
+ </para>
+ <para>
+ The <varname>handleValue</varname> attribute keeps the current handle
position on the slider control; filtering is based on this value. The
<varname>storeResults</varname> attribute allows the
<sgmltag><rich:dataFilterSlider></sgmltag> component to keep the
target <classname>UIData</classname> component in session.
+ </para>
+ <para>
+ The event defined with the <varname>submitOnSlide</varname> attribute is
triggered when the handle value on the slider is changed.
+ </para>
</section>
<section id="sect-Component_Reference-Tables_and_grids-richdataGrid">
<title>rich:dataGrid</title>
+ <itemizedlist>
+ <listitem>
+ <para>
+ component-type: <classname>org.richfaces.DataGrid</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ component-class:
<classname>org.richfaces.component.html.HtmlDataGrid</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ component-family: <classname>org.richfaces.DataGrid</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ renderer-type: <classname>org.richfaces.DataGridRenderer</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ tag-class: <classname>org.richfaces.taglib.DataGridTag</classname>
+ </para>
+ </listitem>
+ </itemizedlist>
<para>
- Incomplete
+ The <sgmltag><rich:dataGrid></sgmltag> component is used to
arrange data objects in a grid. Values in the grid can be updated dynamically from the
data model, and Ajax updates can be limited to specific rows. The component supports
<literal>header</literal>, <literal>footer</literal>, and
<literal>caption</literal> facets.
</para>
+ <figure
id="figu-Component_Reference-richdataGrid-The_richdataGrid_component">
+ <title>The rich:dataGrid component</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/figu-Component_Reference-richdataGrid-The_richdataGrid_component.png"
format="PNG" />
+ </imageobject>
+ <textobject>
+ <para>
+ The rich:dataGrid component displaying four elements in two columns, with a
<literal>header</literal> facet, and <literal>footer</literal>
facet containing a data scroller component.
+ </para>
+ </textobject>
+ </mediaobject>
+ </figure>
+ <para>
+ The <sgmltag><rich:dataGrid></sgmltag> component requires
the <varname>value</varname> attribute, which points to the data model, and
the <varname>var</varname> attribute, which holds the current variable for the
collection of data. The number of columns for the grid is specifed with the
<varname>columns</varname> attribute, and the number of elements to layout
among the columns is determined with the <varname>elements</varname>
attribute. The <varname>first</varname> attribute references the zero-based
element in the data model from which the grid starts.
+ </para>
+ <example
id="exam-Component_Reference-richdataGrid-richdataGrid_example">
+ <title>rich:dataGrid example</title>
+<programlisting language="XML" role="XML">
+<xi:include parse="text"
href="extras/exam-Component_Reference-richdataGrid-richdataGrid_example.xml_sample"
xmlns:xi="http://www.w3.org/2001/XInclude" />
+</programlisting>
+ <blockquote>
+ <figure
id="figu-Component_Reference-richdataGrid-richdataGrid_example">
+ <title>rich:dataGrid example</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/figu-Component_Reference-richdataGrid-richdataGrid_example.png"
format="PNG" />
+ </imageobject>
+ <textobject>
+ <para>
+ The result of the <sgmltag><rich:dataGrid></sgmltag>
example, with the <literal>header</literal> facet,
<literal>footer</literal> facet, and first element annotated.
+ </para>
+ </textobject>
+ </mediaobject>
+ </figure>
+ </blockquote>
+ </example>
+ <para>
+ The <sgmltag><rich:dataGrid></sgmltag> component can be used
with the <sgmltag><rich:dataScroller></sgmltag> component to
display multiple pages of grids. Refer to <xref
linkend="sect-Component_Reference-Tables_and_grids-richdataScroller" /> for
details on the <sgmltag><rich:dataScroller></sgmltag>
component.
+ </para>
+ <para>
+ As the component is based on the
<sgmltag><a4j:repeat></sgmltag> component, it can be partially
updated with Ajax. The <varname>ajaxKeys</varname> attribute allows row keys
to be defined, which are updated after an Ajax request.
+ </para>
+ <example id="exam-Component_Reference-richdataGrid-ajaxKeys_example">
+ <title><varname>ajaxKeys</varname> example</title>
+<programlisting language="XML" role="XML">
+<rich:dataGrid value="#{dataTableScrollerBean.allCars}"
var="car" ajaxKeys="#{listBean.list}"
binding="#{listBean.dataGrid}" id="grid" elements="4"
columns="2">
+ ...
+</rich:dataGrid>
+...
+<a4j:commandButton action="#{listBean.action}" reRender="grid"
value="Submit"/>
+</programlisting>
+ </example>
</section>
<section
id="sect-Component_Reference-Tables_and_grids-richdataScroller">
Added:
root/docs/trunk/Component_Reference/en-US/extras/exam-Component_Reference-richdataGrid-richdataGrid_example.xml_sample
===================================================================
---
root/docs/trunk/Component_Reference/en-US/extras/exam-Component_Reference-richdataGrid-richdataGrid_example.xml_sample
(rev 0)
+++
root/docs/trunk/Component_Reference/en-US/extras/exam-Component_Reference-richdataGrid-richdataGrid_example.xml_sample 2010-01-08
07:02:13 UTC (rev 16250)
@@ -0,0 +1,23 @@
+<rich:panel style="width:150px;height:200px;">
+ <h:form>
+ <rich:dataGrid value="#{dataTableScrollerBean.allCars}"
var="car" columns="2" elements="4" first="1">
+ <f:facet name="header">
+ <h:outputText value="Car Store"></h:outputText>
+ </f:facet>
+ <rich:panel>
+ <f:facet name="header">
+ <h:outputText value="#{car.make}
#{car.model}"></h:outputText>
+ </f:facet>
+ <h:panelGrid columns="2">
+ <h:outputText value="Price:"
styleClass="label"></h:outputText>
+ <h:outputText value="#{car.price}"/>
+ <h:outputText value="Mileage:"
styleClass="label"></h:outputText>
+ <h:outputText value="#{car.mileage}"/>
+ </h:panelGrid>
+ </rich:panel>
+ <f:facet name="footer">
+ <rich:datascroller></rich:datascroller>
+ </f:facet>
+ </rich:dataGrid>
+ </h:form>
+</rich:panel>
Added:
root/docs/trunk/Component_Reference/en-US/images/figu-Component_Reference-richdataGrid-The_richdataGrid_component.png
===================================================================
(Binary files differ)
Property changes on:
root/docs/trunk/Component_Reference/en-US/images/figu-Component_Reference-richdataGrid-The_richdataGrid_component.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added:
root/docs/trunk/Component_Reference/en-US/images/figu-Component_Reference-richdataGrid-richdataGrid_example.png
===================================================================
(Binary files differ)
Property changes on:
root/docs/trunk/Component_Reference/en-US/images/figu-Component_Reference-richdataGrid-richdataGrid_example.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream