<?xml version='1.0' encoding='UTF-8'?>
<section>
<sectioninfo>
<keywordset>
<keyword>rich:columnGroup</keyword>
<keyword>HtmlcolumnGroup</keyword>
</keywordset>
</sectioninfo>
     <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.ColumnGroup</entry>
          </row>
          <row>
            <entry>component-class</entry>
            <entry>org.richfaces.component.html.HtmlColumnGroup</entry>
          </row>
          <row>
            <entry>component-family</entry>
            <entry>org.richfaces.ColumnGroup</entry>
          </row>
          <row>
            <entry>renderer-type</entry>
            <entry>org.richfaces.ColumnGroupRenderer</entry>
		  </row>
		  <row>
			<entry>tag-class</entry>
            <entry>org.richfaces.taglib.ColumnGroupTag</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    <section>
    <title>Creating the Component with a Page Tag</title>
    <para>To create the simplest variant of <property>columnGroup</property> on a page, use the following syntax:</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
        <rich:columnGroup>
                <rich:column>
                        <h:outputText value="Column1"/>
                </rich:column>
                <rich:column>
                        <h:outputText value="Column2"/>
                </rich:column>
        </rich:columnGroup>
...
]]></programlisting>
  </section>
  <section>
    <title>Creating the Component Dynamically Using Java</title>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlColumnGroup;
...	
HtmlColumnGroup myRow = new HtmlColumnGroup();
...
]]></programlisting>
  </section>
  <section>
    <title>Details of Usage</title>
      <para>The <emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property></emphasis> component combines columns set wrapping them into the <emphasis role="bold"><property>&lt;tr&gt;</property></emphasis> element and outputting them
     into one row. Columns are combined in a group the same way as when the <emphasis ><property>&quot;breakBefore&quot;</property></emphasis> attribute is used for 
     columns to add a moving to the next rows, but the first variant is clearer from a source code. Hence, the 
     following simple examples are very same.</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
     <programlisting role="XML"><![CDATA[...
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"> 
        <rich:column colspan="3">
            <f:facet name="header">State Flag</f:facet>
            <h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
        <rich:columnGroup>
            <rich:column> 
                <h:outputText value="#{cap.state}"/>
            </rich:column>
            <rich:column >
                <h:outputText value="#{cap.name}"/>
            </rich:column>
            <rich:column >
                <h:outputText value="#{cap.timeZone}"/>
            </rich:column>
        </rich:columnGroup>	
    </rich:dataTable>
...
]]></programlisting>
<para>And representation without a grouping:</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
<programlisting role="XML"><![CDATA[...
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"> 
        <rich:column colspan="3">
            <f:facet name="header">State Flag</f:facet>
            <h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
        <rich:column breakBefore="true">
                <h:outputText value="#{cap.state}"/>
        </rich:column>
        <rich:column breakBefore="true">
                <h:outputText value="#{cap.name}"/>
        </rich:column>
        <rich:column >
                <h:outputText value="#{cap.timeZone}"/>
        </rich:column>
    </rich:dataTable>
....
]]></programlisting>
<para>The result is:</para>
<figure>
    <title>Generated <emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property></emphasis> component 
        with <emphasis ><property>&quot;breakBefore&quot;</property></emphasis> attribute</title>
      <mediaobject> 
        <imageobject>
            <imagedata fileref="images/columnGroup2.png"/>
        </imageobject>
    </mediaobject>
    </figure>
    <para>It&apos;s also possible to use the component for output of complex headers in a table. For example adding
     of a complex header to a facet for the whole table looks the following way:</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
     <programlisting role="XML"><![CDATA[...
    <f:facet name="header">
        <rich:columnGroup>
            <rich:column rowspan="2">
                <h:outputText value="State Flag"/>
            </rich:column>
            <rich:column colspan="3">
                <h:outputText value="State Info"/>
            </rich:column>
            <rich:column breakBefore="true">
                <h:outputText value="State Name"/>
            </rich:column>
            <rich:column>
                <h:outputText value="State Capital"/>
            </rich:column>
            <rich:column>
                <h:outputText value="Time Zone"/>
            </rich:column>
        </rich:columnGroup>
    </f:facet>
...
]]></programlisting>
<para>Generated on a page as:</para>
<figure>
    <title><emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property></emphasis>with complex headers</title>
      <mediaobject> 
        <imageobject>
            <imagedata fileref="images/columnGroup3.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>
        
        <para>There are two ways to redefine the appearance of all <emphasis role="bold">
            <property>&lt;rich:columnGroup&gt;</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>&lt;rich:columnGroup&gt;</property>
                </emphasis> component</para>
            </listitem>
        </itemizedlist>
    </section>
    
    <section>
        <title>Skin Parameters Redefinition</title>
        
        <para>Skin parameters redefinition for <emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property>
        </emphasis> are the same as for the <emphasis role="bold">
            <property>&lt;rich:dataTable&gt;</property>
        </emphasis> <link linkend="SPR">component</link>.</para>
    </section>
    
    <section>
    <title>Definition of Custom Style Classes</title>
        
        <para>Custom style classes for <emphasis role="bold">
            <property>&lt;rich:columnGroup&gt;</property>
        </emphasis> are the same as for  the <emphasis role="bold">
            <property>&lt;rich:dataTable&gt;</property>
        </emphasis><link linkend="DofCCS">component</link>.
        </para>
	       
        <para>In order to redefine styles for all <emphasis role="bold">
            <property>&lt;rich:columnGroup&gt;</property>
        </emphasis> components on a page using CSS, it&apos;s enough to create classes with the
            same names (possible classes could be found in the tables <link linkend="SPR"> above</link>) and define necessary properties in them. </para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.rich-table-cell{
        color:  #316ac5;
}	
...]]></programlisting>  
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/columnGroup_pc.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example cells color was changed.</para>
        
        <para>Also it&apos;s possible to change styles of particular <emphasis role="bold"
            ><property>&lt;rich:columnGroup&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"
                ><property>&lt;rich:columnGroup&gt;</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{
        background-color: #c0c0c0; 
}
...]]></programlisting>  
        <para>The <emphasis><property>&quot;columnClasses&quot;</property></emphasis> attribute for <emphasis role="bold"
            ><property>&lt;rich:columnGroup&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[<rich:columnGroup  columnClasses="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/columnGroup_oc.png"/>
                </imageobject>
            </mediaobject>
        </figure>  
        
        <para>As it could be seen on the picture above, the background color for columns was changed.</para>
    </section>
    
    <section>
        <title>Relevant Resources Links</title>
        <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?c=columnGroup"
            >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"
                ><property>&lt;rich:columnGroup&gt;</property></emphasis> usage and sources for the given example. </para>
        </section>
</section>