<?xml version='1.0' encoding='UTF-8'?>
<chapter id="FAQ" xreflabel="FAQ">
        <?dbhtml filename="FAQ.html"?>
        <sectioninfo>
                <keywordset>
                        <keyword>RichFaces</keyword>
                </keywordset>
        </sectioninfo>
        <title>FAQ</title>
        <section>
                <?dbhtml filename="WherecouldIfindadditionalinformationonRichFaces.html"?>
                <title>Where could I find additional information on RichFaces?</title>
                <para>
                        Most important links for RichFaces can be found <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=104575"
                                >here</ulink>.               
                </para>
        </section>
        <section>
                <?dbhtml filename="Wherearebinary/sourcedistributionforRichFacesrelease.html"?>
                <title>Where are binary/source distribution for RichFaces?</title>
                <para> 
                      <!--  RichFaces are built using CDK (Component Development Kit). 
                        CDK generates the library based on the meta-data, component templates and hand-written java classes.
                        What you see in the richfaces-ui-3.1.0-src.zip is a truly source, i.e. a source for CDK.
                        To the debug purpose, you need the source code that is generated by CDK before it is compiled into the binary. 
                        -->
                        There are two places where you can find binary/source distribution:
                        <itemizedlist>
                                <listitem>
                                        JBoss RichFaces Downloads area which can be found <ulink url="http://labs.jboss.com/jbossrichfaces/downloads/">here</ulink>.
                                        Source distribution you can see in the <property>richfaces-ui-3.2.0-src.zip</property>. 
                                        Binary stored in <property>richfaces-ui-3.2.0-bin.zip</property>
                                </listitem>
                                <listitem>
                                        If you use Maven, Maven knows the place where all distributions are stored.
                                        Actual links to the Maven repository can be found <ulink url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=104575">here</ulink>
                                </listitem>
                        </itemizedlist>
                </para>
        </section>

        <section>
                <?dbhtml filename="HowtobuildRichFacessnapshotmanually.html"?>
                <title>How to build RichFaces snapshot manually?</title>
                <para>This <ulink
                                url="http://labs.jboss.com/wiki/HowToBuildRichFacesSnapshotManually"
                                > wiki article</ulink> helps you to find an answer.</para>
        </section>

        <section>
                <?dbhtml filename="HowtobuildRichFacessnapshotmanually.html"?>
                <title>How to configure Maven for RichFaces</title>
                <itemizedlist>
                        <listitem>
                                <para>Download and install Maven if you have not it yet installed.
                                        Follow the instruction at <ulink
                                                url="http://maven.apache.org/download.html">
                                                http://maven.apache.org/download.html</ulink>.</para>
                        </listitem>

                        <listitem>
                                <para>Open
                                        <property>&lt;Maven-Root&gt;/conf/settings.xml</property>
                                        file to edit</para>

                                <para>Add into the <property>&lt;profile&gt;</property>
                                        section:</para>
                                <programlisting role="XML"><![CDATA[
   <id>RichFaces</id>
   <repositories>
      <repository>
         <releases>
            <enabled>true</enabled>
         </releases>
         <snapshots>
            <enabled>false</enabled>
            <updatePolicy>never</updatePolicy>
         </snapshots>
         <id>repository.jboss.com</id>
         <name>Jboss Repository for Maven</name>
         <url>
            http://repository.jboss.com/maven2/
         </url>
         <layout>default</layout>
      </repository>
      <repository>
         <releases>
            <enabled>false</enabled>
         </releases>
         <snapshots>
            <enabled>true</enabled>
            <updatePolicy>always</updatePolicy>
         </snapshots>
         <id>maven2-snapshots.jboss.com</id>
         <name>Jboss Repository for Maven Snapshots</name>
         <url>http://snapshots.jboss.com/</url>
         <layout>default</layout>
      </repository>
   </repositories>
 <pluginRepositories>
   <pluginRepository>
         <id>maven2-snapshots.jboss.com</id>
         <name>Jboss Repository for Maven Snapshots</name>
         <url>http://snapshots.jboss.com/</url>
     <releases>
       <enabled>false</enabled>
     </releases>
     <snapshots>
       <enabled>true</enabled>
       <updatePolicy>always</updatePolicy>
     </snapshots>
   </pluginRepository>
   <pluginRepository>
         <releases>
            <enabled>true</enabled>
         </releases>
         <snapshots>
            <enabled>false</enabled>
            <updatePolicy>never</updatePolicy>
         </snapshots>
         <id>repository.jboss.com</id>
         <name>Jboss Repository for Maven</name>
         <url>
            http://repository.jboss.com/maven2/
         </url>
         <layout>default</layout>
   </pluginRepository>
 </pluginRepositories>
]]></programlisting>
                                <para> Add into the
                                        <property>&lt;activeProfiles&gt;</property> section:</para>
                                <programlisting role="XML"><![CDATA[<activeProfile>RichFaces</activeProfile>]]></programlisting>

                        </listitem>

                </itemizedlist>
        </section>

        <section>
                <?dbhtml filename="WhatstructureofRichFacesSVNrepositoryis.html"?>
                <title>What is the structure of RichFaces SVN repository?</title>
                <para>RichFaces repository structure overview can be found <ulink
                                url="http://labs.jboss.com/wiki/RichFacesRepositoryStructureOverview"
                                >here</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Howtobuildrichfaces-samplesapplications.html"?>
                <title>How to build richfaces-samples applications?</title>
                <para>How to build and how to use richfaces-samples applications in Eclipse is
                        described <ulink
                                url="http://labs.jboss.com/wiki/RichFacesRepositoryStructureOverview"
                                >here</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="IstheredemoforRichFacescomponents.html"?>
                <title>Where could I find a demo for RichFaces components?</title>
                <para>Online demo Web applications that show the most important functionality of
                        RichFaces components are available <ulink
                                url="http://livedemo.exadel.com/richfaces-demo/">here</ulink>.</para>
                <para>War file of a nightly build can be found <ulink
                                url="http://maven.exadel.com/org/richfaces/samples/richfaces-demo/3.2.0.SR1/"
                                >here</ulink>.</para>
                <para>Source Code (SVN) can be found <ulink
                                url="http://anonsvn.jboss.org/repos/richfaces/trunk/samples/richfaces-demo/"
                                >here</ulink>.</para>
                <para>See also <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=113454"
                                >how to prevent richfaces-demo deployment failed</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="HowtouseSkinnability.html"?>
                <title>How to use Skinnability?</title>
                <para><ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=111143"
                                >Here</ulink> is an article that explains the Skinnability basics.</para>
                <para> For information you can also see discussion about this problem on the <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=103772"
                                >RichFaces Users Forum</ulink></para>
                <para>Also, the effect of predefined skins on the application whole look-and-feel
                        could be seen <ulink url="http://livedemo.exadel.com/richfaces-demo/"
                        >here</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Whythereisaproblemwithprototypes.html"?>
                <title>Why does a problem with prototypes in RichFaces 3.1.0 happen? The
                        Prototype.Browser() function can&apos;t be found.</title>
                <para>RichFaces 3.1.0 has been released with the latest Prototype 1.5.1.1. The
                        conflict happens because on your page an older version of prototypes that
                        can be added from Tomahawk 1.1.6 is used. See the solution for the problem
                                <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=118526&amp;postdays=0&amp;postorder=asc&amp;start=0"
                                >here.</ulink></para>
        </section>

        <section>
                <?dbhtml filename="WhyRichFaceslibrarycondataTablecomp.html"?>
                <title>Why RichFaces library contains &lt;rich:dataTable&gt; component,
                        though there is the standard &lt;h:dataTable&gt;?</title>
                <para>The article about <emphasis role="bold"
                        >&lt;rich:dataTable&gt;</emphasis> flexibility can be found <ulink
                                url="http://labs.jboss.com/wiki/RichFacesArticleDataTable"
                        >here</ulink>.</para>
                <para>Source code (SVN) could be found <ulink
                                url="http://anonsvn.jboss.org/repos/richfaces/trunk/samples/richfaces-art-datatable/"
                                >here</ulink>.</para>
                <para> Online demo for a Web application is available <ulink
                                url=" http://livedemo.exadel.com/richfaces-art-datatable/"
                        >here</ulink>.</para>
        </section>

        <section id="Organizewizards">
                <?dbhtml filename="Organizewizards.html"?>
                <title>How to organize wizards using the &lt;rich:modalPanel&gt; component?</title>
                <para>It&apos;s necessary to put <emphasis role="bold"
                                >&lt;a4j:include&gt;</emphasis> inside the <emphasis
                                role="bold">&lt;rich:modalPanel&gt;</emphasis> and perform
                        navigation inside it, as it&apos;s shown in the example below:</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
        <f:verbatim>
                <a href="javascript:Richfaces.showModalPanel('_panel',{left:'auto', top:'auto'})">Show Modal Panel</a>
        </f:verbatim>
        <rich:modalPanel id="_panel">
                <a4j:outputPanel id="view" >
                        <a4j:include viewId="/pages/included1.xhtml"></a4j:include>
                </a4j:outputPanel>
        </rich:modalPanel>
...

faces-config.xml:
...

        <navigation-rule>
                <from-view-id>/pages/included1.xhtml</from-view-id>
                <navigation-case>
                        <from-outcome>included2</from-outcome>
                        <to-view-id>/pages/included2.xhtml</to-view-id>
                </navigation-case>
        </navigation-rule>
...

included1.xhtml:
...
        <h:form>
                <h:outputText value="Go to the step 2"/>
                <a4j:commandButton value="next" action="included2" reRender="view"/>
        </h:form>
...

included2.xhtml

...
        <h:form>
                <h:outputText value="Close window"/>
                <h:commandButton type="button" value="Close" onclick="javascript:Richfaces.hideModalPanel('_panel')"/>
        </h:form>
...

]]></programlisting>
                <para>The discussion about <emphasis role="bold"
                        >&lt;a4j:include&gt;</emphasis> and navigation rules can be found on
                        the <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4062036#4062036"
                                >Ajax Users Forum</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Howtopreventmodalpanelfromclosure.html"?>
                <title>How to prevent modalPanel from closing when the validation inside fails?</title>
                <para>Examples of validation in <emphasis role="bold"
                                >&lt;rich:modalPanel&gt;</emphasis> could be found in the
                                <ulink url="http://labs.jboss.com/wiki/ModalPanelValidation">Wiki
                                article</ulink> and on the <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4061517"
                                >RichFaces Users Forum</ulink>. </para>
        </section>

        <section>
                <?dbhtml filename="HowtousesuggestionBox.html"?>
                <title>Why when I use suggestionBox inside the modalPanel content the popup
                        suggestion list doesn&apos;t show since it is behind the modalPanel.</title>
                <para>To solve this problem you should use the latest versions of RichFaces.</para>
                <para> Most important links for RichFaces can be found <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=104575"
                                >here</ulink>.</para>

        </section>

        <section>
                <?dbhtml filename="DoesRichFacesworkwithfacelets.html"?>
                <title>Does RichFaces work with facelets?</title>
                <para>Main <ulink url="http://livedemo.exadel.com/richfaces-demo/"> demo</ulink> of
                        RichFaces is a facelets based application. Full Facelets support is one of
                        the main features. Hence, the answer is yes.</para>
        </section>

        <section>
                <?dbhtml filename="Isitpossibletocreatedynamicmenu.html"?>
                <title>Is it possible to create dynamic menu using &lt;rich:dropDownMenu&gt;
                        component?</title>
                <para><emphasis role="bold">&lt;rich:dropDownMenu&gt;</emphasis> is a
                        standard JSF component. Thus, creation of the menu dynamically from the Java
                        Script code is the same as for any other jsf component.</para>
                <para>For more information follow the <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=110983"
                                >link</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Isitpossibletocustomizelookofdatascroller.html"?>
                <title>Is it possible to customize the look of dataScroller (the forward/back
                        buttons) and replace them with an images?</title>
                <para>The answer is yes. </para>
                <para>Component provides two controllers groups for switching:</para>
                <itemizedlist>
                        <listitem>Page numbers for switching onto a particular page</listitem>
                        <listitem>The controls of fast switching: &quot;first&quot;,
                                &quot;last&quot;, &quot;next&quot;,
                                &quot;previous&quot;, &quot;fastforward&quot;,
                                &quot;fastrewind&quot;</listitem>
                </itemizedlist>
                <para>The controls of fast switching are created adding the facets component with
                        the corresponding name:</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[ ...
    <rich:datascroller for="table" maxPages="10">
        <f:facet name="first">
            <h:outputText value="First"/>
        </f:facet>
        <f:facet name="last">
            <h:outputText value="Last"/>
        </f:facet>
    </rich:datascroller>
...
]]></programlisting>
                <para> There are also facets used to create the disabled states:
                        &quot;first_disabled&quot;, &quot;last_disabled&quot;,
                        &quot;next_disabled&quot;, &quot;previous_disabled&quot;,
                        &quot;fastforward_disabled&quot;,
                        &quot;fastrewind_disabled&quot;. </para>
        </section>

        <section>
                <?dbhtml filename="Howtoredirecttoanotherpage.html"?>
                <title>How to place simple links inside menu?</title>
                <para>If you want to navigate outside, when application uses an external URL, you
                        should use the following approach:</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
        <rich:dropDownMenu> 
        ...
                <rich:menuItem submitMode="none" 
                                onclick="document.location.href='http://labs.jboss.com/jbossrichfaces/'">
                        <h:outputLink value="http://labs.jboss.com/jbossrichfaces/">
                                        <h:outputText value="RichFaces Home Page"></h:outputText>
                        </h:outputLink>
                </rich:menuItem>
        ...
        </rich:dropDownMenu>
...
]]></programlisting>
                <para>Also online demo <emphasis role="bold"
                        >&lt;rich:dropDownMenu&gt;</emphasis> component is available <ulink
                                url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMenu.jsf"
                                >here</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="CanthedropDownMenubeincludedintreenodes.html"?>
                <title>Can I use dropDownMenu as context menu?</title>
                <para>The <emphasis role="bold">&lt;rich:dropDownMenu&gt;</emphasis> is
                        designed keeping in mind that it should not be used for a contextMenu
                        purpose. We have a <emphasis role="bold"
                        >&lt;rich:contextMenu&gt;</emphasis> component in the TODO list.
                        However, it is not schedule for the nearest versions.</para>
        </section>

        <section>
                <?dbhtml filename="HowtocustomizesimpleTogglePanel.html"?>
                <title>How to pass own parameters during a modalPanel opening or closing?</title>
                <para> You can pass your parameters during modalPanel opening or closing. This
                        passing could be performed in the following way: </para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="JAVA"><![CDATA[Richfaces.showModalPanel('panelId', {left: auto}, {param1: value1});]]></programlisting>
                <para> Thus, except the standard modalPanel parameters you can pass any of your own
                        parameters. </para>
        </section>

        <section>
                <?dbhtml filename="Howtoaddalinktothetreenode.html"?>
                <title>How to add a simple link to the tree node?</title>
                <para>Simple code is placed below:</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
        <rich:tree ...> 
                ...
                <rich:treeNode submitMode="none" 
                                                onclick="document.location.href='http://labs.jboss.com/jbossrichfaces/'">
                        <h:outputLink value="http://labs.jboss.com/jbossrichfaces/">
                                <h:outputText value="RichFaces Home Page"></h:outputText>
                        </h:outputLink>
                </rich:treeNode>
                ...
</rich:tree ...> 
...
]]></programlisting>
        </section>

        <section>
                <?dbhtml filename="Isitpossibletoplacetabsvertically.html"?>
                <title>Is it possible to place tabs upright in the tabPanel?</title>
                <para>It&apos;s not possible to place tabs upright in the tabPanel. For this
                        purporse use togglePanel. Toggle controls can be placed anywhere in the
                        layout.</para>
        </section>

        <section>
                <?dbhtml filename="HowtogetaacommandButton.html"?>
                <title>How to get a commandButton working within the modalPanel?</title>
                <para>Simple code is placed below:</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
        <rich:modalPanel> 
                <f:facet name="header"> 
                        <h:outputText value="Test" /> 
                </f:facet> 
                <f:facet name="controls"> 
                        <h:commandLink value="Close" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" /> 
                </f:facet> 
                <h:form> 
                        <t:commandButton value="Test" action="#{TESTCONTROLLER.test}" /> 
                </h:form> 
        </rich:modalPanel>
...
]]></programlisting>
                <para>
                        <note>
                                <title>Note:</title><para>Two rules are important for modalPanel: </para><itemizedlist>
                                        <listitem><para>modalPanel must have its own form if it has form
                                                elements (input or/and command components) inside
                                                (as it was shown in the example above) </para></listitem>
                                        <listitem><para>modalPanel must not be included into the form (on
                                                any level up) if it has the form inside.</para></listitem>
                                </itemizedlist></note>
                </para>
        </section>

        <section>
                <?dbhtml filename="Howtodefinecurrentselectedtab.html"?>
                <title>How to define the currently selected tab?</title>
                <para> Simple code is placed below:</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
        <rich:tabPanel selectedTab="t2">
                <rich:tab label="tab 1" name="t1">
                        <h:outputText value="tab 1" />
                </rich:tab>
                <rich:tab label="tab 1"  name="t2">
                        <h:outputText value="tab 2" />
                </rich:tab>
                <rich:tab label="tab 1"  name="t3">
                        <h:outputText value="tab 3" />
                </rich:tab>
        </rich:tabPanel>
...
]]></programlisting>
        </section>

        <section>
                <?dbhtml filename="Howtoremembercurrentselectedtab.html"?>
                <title>How to remember the current selected tab?</title>
                <para> For necessary information you can see discussion about this problem on the
                                <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=111761"
                                >RichFaces Users Forum</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Howtonavigatefromonetabtoanother.html"?>
                <title>How to navigate from one tab to another using buttons (apart from tabPanel
                        functionality)?</title>
                <para> For necessary information you can see <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4085931#4085931"
                                >RichFaces Users Forum</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Howtoretrievethecurrentvalue.html"?>
                <title>How to retrieve the current value from the inputNumberSlider?</title>
                <para>To catch the value of the inputNumberSlider from the JavaScrip, use the
                        following approach:</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
        <rich:inputNumberSlider width="500" step="20" 
                                onchange="someFunctionCall(this.input.value)"
                                minValue="0"
                                maxValue="500"
                                value="0"
                                showInput="false"
                                showToolTip="false"
                                showBoundaryValues="false"/>	
        ...
        <script>
                function someFunctionCall(value) {
                         alert(value);
                }
        </script>
...
]]></programlisting>
        </section>

        <section>
                <?dbhtml filename="Howtoapplyskins.html"?>
                <title>How to apply skins to the standard input components?</title>
                <para>The answer could be found <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=103494"
                                >here</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Isthereawaytocapturetherowdata.html"?>
                <title>Is there a way to capture the rowdata of dataTable and subTable?</title>
                <para> For necessary information you can see discussion about this problem on the
                                <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=111965"
                                >RichFaces Users Forum</ulink></para>
        </section>

        <section>
                <?dbhtml filename="Isitpossibletouse thedatascroller.html"?>
                <title>Is it possible to use datascroller without its table border and styles (to
                        show only links)?</title>
                <para> It&apos; necessary to redefine rich* classes for example like this:</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="JAVA"><![CDATA[.rich-datascr-button { 
border: 0px; 
} 
.rich-dtascroller-table { 
border: 0px; 
} 
.rich-datascr-button { 
background-color: transparent; 
}]]></programlisting>
        </section>

        <section>
                <?dbhtml filename="subTableincombinationwithdataTable.html"?>
                <title>How to use subTable in combination with dataTable?</title>
                <para>The answer could be found <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4059044#4059044"
                                >here</ulink>.</para>
        </section>

        <section id="Truepagination">
                <?dbhtml filename="Howtodotruepagination.html"?>
                <title>How to do correct pagination using datascroller (load a part of data from
                        database)?</title>
                <para>The answer could be found on the <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4060199#4060199"
                                >RichFaces Users Forum</ulink>.</para>
                <para>How to use <emphasis role="bold">&lt;rich:dataTable&gt;</emphasis> and
                                <emphasis role="bold">&lt;rich:dataScroller&gt;</emphasis>
                        in a context of Extended Data Model see <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=115636"
                                >here</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Howtomakehtmlscrollbars.html"?>
                <title>How to make html scrollbars in modalPanel?</title>
                <para>The answer could be found on the RichFaces Users Forum:</para>
                <itemizedlist>
                        <listitem>
                                <ulink
                                        url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4062877#4062877"
                                        >http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4062877#4062877</ulink>
                        </listitem>
                        <listitem>
                                <ulink
                                        url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=105412"
                                        >http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=105412</ulink>
                        </listitem>
                </itemizedlist>

        </section>

        <section>
                <?dbhtml filename="HowtoExpand/CollapseTreeNodesfromcode.html"?>
                <title>How to expand/collapse tree nodes from code?</title>
                <para>The answer could be found <ulink
                                url="http://labs.jboss.com/wiki/ExpandCollapseTreeNodes"
                        >here</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="HowtouseJavaScriptAPI.html"?>
                <title>How to use JavaScript API?</title>
                <para>The simple code is placed below:</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
         <a4j:form id="form">
                <h:panelGroup id="test" columns="2" style="width: 300px">
                        <h:selectBooleanCheckbox value="#{bean.check}">
                                <a4j:support event="onchange" reRender="test" />
                                <f:selectItem itemValue="true" itemLabel="Show" />
                                <f:selectItem itemValue="false" itemLabel="Hide" />
                        </h:selectBooleanCheckbox>
                        <rich:calendar popup="true"
                                        rendered="#{!bean.check}" value="#{bean.date}" id="c"/>
                                <a onclick="$('form:c').component.doExpand()" href="#">Show</a>	
                </h:panelGroup>
        </a4j:form>
...
]]></programlisting>
        </section>

        <section>
                <?dbhtml filename="HowtoloadtheScriptaculouslibrary.html"?>
                <title>How to load the Scriptaculous library?</title>
                <para>To load the whole Scriptaculous library shipped with RichFaces use <emphasis
                                role="bold">&lt;a4j:loadScript&gt;</emphasis> tag.</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<a4j:loadScript src="resource://scriptaculous.js" />
...
]]></programlisting>
                <para> Thus, this command allows loading an integrated version of the library that
                        includes all existing scriptaculous files except unittest.js. </para>
                <para> If you don&apos;t want to load the whole library, but only the particular
                        file, for example, effect.js, use the following line: </para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<a4j:loadScript src="resource://scriptaculous/effect.js" />
...
]]></programlisting>
                <para> Remember, it does not make sense to load the particular file if you already
                        load the whole version. </para>

                <para>For more information see <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=119044"
                                >RichFaces Users Forum</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Howtoavoidaproblemwithtextwrapping.html"?>
                <title>How to avoid a problem with text wrapping in &lt;rich:tab&gt; in
                        Internet Explorer 7?</title>
                <para>A problem with tab height occurs in IE 7. The tab height is correct in Firefox
                        and IE 6. This is IE&apos;s 7 bug. As a temporary solution you can try
                        to change doctype declaration from:</para>
                <programlisting role="XML"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">]]></programlisting>
                <para>to:</para>
                <programlisting role="XML"><![CDATA[<!doctype html public "-//w3c//dtd html 4.0 transitional//en">]]></programlisting>
                <para>See also <ulink url="http://jira.jboss.com/jira/browse/RF-1011"
                                >http://jira.jboss.com/jira/browse/RF-1011</ulink>.</para>
        </section>

        <section>
                <?dbhtml filename="Howtosaveeffectstatus.html"?>
                <title>How to save &lt;rich:effect&gt; status?</title>
                <para><emphasis role="bold">&lt;rich:effect&gt;</emphasis> component has
                        several callback methods such as beforeStart, afterFinish. You can use them
                        to save the status.</para>
                <para> See also <ulink
                                url="http://wiki.script.aculo.us/scriptaculous/show/CoreEffects"
                                >core effects</ulink> in scriptaculous.</para>
        </section>

        <section>
                <?dbhtml filename="Howtosaveeffectstatus.html"?>
                <title>How to send an additional parameter to server working with
                        &lt;rich:suggestionbox&gt;?</title>
                <para>An example is placed below:</para>
                <programlisting role="XML"><![CDATA[...
                <rich:suggestionbox width="200" height="200" for="test" suggestionAction="#{bean.autocomplete}" var="cap">
                        <h:column> 
                                <f:facet name="header">
                                        <h:outputText value="Sometext"></h:outputText>
                                </f:facet>
                                <h:outputText value="#{cap.text}"></h:outputText>
                        </h:column>
                        <a4j:support event="onselect" action="#{bean.action}">
                                <f:setPropertyActionListener value="#{cap.label}" target="#{bean.property1}" />
                        </a4j:support>
                </rich:suggestionbox>
...
]]></programlisting>
                <para>In the example <property>&quot;onselect&quot;</property> event is used
                        for sending selected value to the server. It&apos;s also possible to
                        pass additional fields of selected object (which don&apos;t belong to <emphasis>
                                <property>&quot;fetchvalue&quot;</property>
                        </emphasis> attribute.)</para>
        </section>

        <section>
                <?dbhtml filename="Howtosetrich:dataTableborder.html"?>
                <title>How to set &lt;rich:dataTable&gt; border to 0px?</title>
                <para>Add the following code to your css file:</para>
                <programlisting role="CSS"><![CDATA[...
                .rich-table, .rich-table-header,.rich-table-headercell, .rich-table-cell,
                        .rich-subtable-cell, .rich-table-footercell, .rich-subtable-footercell {
                                border-width:0px;
                }
...
]]></programlisting>
        </section>

        <section>
                <?dbhtml filename="Howtosetrich:dataTableborder.html"?>
                <title>How to create &lt;rich:suggestionBox&gt; dynamically?</title>
                <para>This is a working example:</para>
                <programlisting role="JAVA"><![CDATA[...
        org.apache.myfaces.component.html.ext.HtmlInputText searchBox = new org.apache.myfaces.component.html.ext.HtmlInputText();
        searchBox.setId( "inputQuery" );
        bar.getChildren().add( searchBox );

        org.richfaces.component.html.HtmlSuggestionBox suggestions = new org.richfaces.component.html.HtmlSuggestionBox();
        suggestions.setId( "sugg" );
        suggestions.setFor( "inputQuery" );
        suggestions.setTokens( ",[" );
        suggestions.setRules( "none" );

        javax.faces.el.MethodBinding mb = app.createMethodBinding( "#{suggestionBox.autocomplete}", new Class[] { Object.class } );
        suggestions.setSuggestionAction( mb );
        suggestions.setVar( "result" );

        suggestions.setRows( 0 );
        suggestions.setFirst( 0 );
        suggestions.setMinChars( "#{suggestionBox.minchars}" );
        suggestions.setShadowOpacity( "4" );
        suggestions.setBorder( "1" );
        suggestions.setWidth( "200" );
        suggestions.setHeight( "150" );
        suggestions.setShadowDepth( "4" );
        suggestions.setCellpadding( "2" );

        org.apache.myfaces.custom.column.HtmlSimpleColumn column = new org.apache.myfaces.custom.column.HtmlSimpleColumn();
        column.setId( "col1" );
        org.apache.myfaces.component.html.ext.HtmlOutputText text = new org.apache.myfaces.component.html.ext.HtmlOutputText();
        text.setId( "text1" );

        javax.faces.el.ValueBinding vb = app.createValueBinding( "#{result.text}" );
        text.setValueBinding( "value", vb );
        column.getChildren().add( text );
        suggestions.getChildren().add( column );
        bar.getChildren().add( suggestions );
...
]]></programlisting>
                <para> See also <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4099047#4099047"
                                >RichFaces User Forum</ulink>.</para>
        </section>

        <section id="Howtoapplybuttonlable">
                <?dbhtml filename="Howtoapplybuttonlable .html"?>
                <title>How to apply button lable for &lt;rich: calendar&gt;?</title>
                <para> Necessary information could be found on the <ulink
                        url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4120993#4120993"
                        >RichFaces User Forum</ulink>.</para>
        </section>



        <section id="DecidingWhatToChangeOnTheServerSide">
                <?dbhtml filename="DecidingWhatToChangeOnTheServerSide.html"?>
                <title>What should I change on the server side?</title>
                <para> The list of zones to be reRendered can be specified as EL expression. But
                        there is a question that must be specified more exactly. </para>
                <para> The list of Ids is formed during beforePhase of RENDER_RESPONSE. Therefore,
                        in this case one can point reRender to the Set type Bean&apos;s property
                        and fill the Set during a tracking request. </para>
                <para> It&apos;s the way to form a list of updatable areas dynamically. </para>
        </section>
        <section id="CheckSendingRequestConditions.CustomJavaScriptBeforeRequest.OnSubmitAttribute">
                <?dbhtml filename="CheckSendingRequestConditions.CustomJavaScriptBeforeRequest.OnSubmitAttribute.html"?>

                <title>How to check sending request conditions? Custom JavaScript before request
                        &quot;OnSubmit&quot; attribute.</title>
                <para> To check on the client some terms of request sending, the <emphasis>
                                <property>&quot;onSubmit</property>
                        </emphasis>&quot; attribute is added to all components, which may cause
                        the request. </para>
                <para>
                        <emphasis role="bold">Example: </emphasis>
                </para>
                <programlisting role="XML"><![CDATA[<h:inputText id="i" value="#{beanText.kennung}">
            <a4j:support event="onfocus" onsubmit="doSomething();" reRender="panelToReRender"/>
</h:inputText>]]></programlisting>
                <para> So in this case
                                &quot;<emphasis><property>doSomething()</property>&quot;</emphasis>
                        function is executed before the Ajax request. </para>
                <para> Besides, if this function returns &quot;false&quot;, Ajax request
                        isn&apos;t fired. </para>
                <note>
                        <title>Note:</title>
                        <para>Behavior of our <emphasis>
                                        <property>&quot;onsubmit&quot;</property>
                                </emphasis>slightly differs from the standard one. Do not return <emphasis>
                                        <property>&quot;true&quot;</property>
                                </emphasis> if you want to fire the request - because <emphasis
                                        role="bold">
                                        <property>&lt;xxx&gt;&lt;a4j:support
                                                event=&quot;onclick&quot;
                                                onsubmit=&quot;return
                                        true;&quot;&gt;</property>
                                </emphasis> is transformed into &lt;xxx onclick=&quot;return
                                true; A4J.Submit(.... );&quot; &gt; and the request
                                isn&apos;t fired also in this case (but the standard event
                                processing fired). You must only return <emphasis>
                                        <property>&quot;false&quot;</property>
                                </emphasis> if your conditions weren&apos;t completed or perform
                                some actions (if needed) without any returns in case you need to
                                fire it. </para>
                </note>
        </section>
        <section id="onCompleteAttribute.DifferencesAfterRelease1.0">
                <?dbhtml filename="onCompleteAttribute.DifferencesAfterRelease1.0.html"?>
                <title> What is differences of &quot;onCompelete&quot; attribute after
                        release 1.0?</title>
                <para> To avoid differences with other JavaScript attributes, a function placement
                        in a JavaScript call is changed, instead of simple inserting of attribute
                        content (..oncomplete :anotherFunction(this)..), it places (oncomplete:
                        function(){anotherFunction(this);}..) in anonymous function, to allow put
                        &quot;chain&quot; of statements in attribute. </para>
                <para> Since, <emphasis>
                                <property>&quot;this&quot;</property>
                        </emphasis> keyword will point to a parameters map instead of a control
                        element as it was before. You may use <emphasis>
                                <property>document.findElementById()</property>
                        </emphasis>to get references to this object after a request is processed as
                        when a page is updated in Ajax you will have reference to a control, removed
                        from a DOM tree. </para>
                <para> Or, if you are sure that your element is not updated, you can add <emphasis>
                                <property>&quot;onsubmit&quot;</property>
                        </emphasis> in <emphasis role="bold">
                                <property>&lt;a4j:support&gt;</property>
                        </emphasis> (or onclick in <emphasis role="bold">
                                <property>&lt;a4j:commandLink/Button&gt;</property>
                        </emphasis>) to place reference to known variable (<emphasis role="bold">
                                <property>&lt;a4j:commandLink onclick="var myControl=this;"
                                        oncomplete="anotherFunction(myControl)"/&gt;</property>
                        </emphasis>). </para>
                <important>
                        <title>New:</title>
                        <para> The onComplete syntax now is: </para>
                        <programlisting role="XML">
	<![CDATA[<someAjaxActionComponent ...oncomplete="myFunc(req,event,data)".../>]]>
            </programlisting>
                        <para> where the <property>event</property> is a variable where the JS event
                                copy that fires the request is placed into. One may use it to get
                                the element instead of this. and <property>data</property> is a
                                variable that contains deserialized value from the
                                <property>data</property> attribute. </para>
                </important>
        </section>
        <section id="InvokeOnComponentUsingWithJSF1.2">
                <?dbhtml filename="InvokeOnComponentUsingWithJSF1.2.html"?>
                <title>Is it possible to use InvokeOnComponent with JSF 1.2?</title>
                <para> RichFaces currently does not use <emphasis>invokeOnComponent</emphasis>
                        because of the 2 reasons: </para>
                <itemizedlist>
                        <listitem> Compatibility with JSF 1.1 and MyFaces applications is kept, due
                                to a big amount of code used in corporate applications. </listitem>
                        <listitem>
                                <emphasis> InvokeOnComponent</emphasis> works with already known
                                clientId, and works fine for communication between widget and backed
                                component, or updates content of already rendered component. But
                                there are some troubles to use this method for more complex
                                use-cases implemented in RichFaces, as there is a choice for
                                updatable components in application logic, where it&apos;s
                                necessary to navigate in a components tree by the native id, with
                                        <property>findComponent()</property> methods. </listitem>
                </itemizedlist>
                <para> Thus, for example, only entire dataTable can be updated in response (but all
                        Ajax core action components inside table work properly). </para>
        </section>
        <!--<section id="RegionsInDataTables">
      <?dbhtml filename="RegionsInDataTables.html"?>
    <title>Regions in Data Tables</title>
    <para>The regions in Data Tables aren&apos;t supported now, but the feature will be implemented in a new Ajax4jsf version for JSF 1.2.</para>
  </section>-->
        <section id="keepAliveComponentGeneratesException">
                <?dbhtml filename="keepAliveComponentGeneratesException.html"?>
                <title>How to avoid generating exception for &quot;keepAlive&quot;
                        component?</title>
                <para>To avoid exception, don&apos;t forget that the component stores beans in
                        serialized view, but your bean should implement java.io.Serializable.</para>
        </section>

        <section id="AFormIsNotSubmittedOrASetterIsNotCalledAfterAJAXrequest">
                <?dbhtml filename="AFormIsNotSubmittedOrASetterIsNotCalledAfterAJAXrequest.html"?>
                <title>Why form isn&apos;t submitted or setter isn&apos;t called after AJAX
                        request?</title>
                <para>This situation could happen because of conversion/validation errors on form
                        submission. In order to verify this, it&apos;s necessary to place this
                        updating via an Ajax error message inside a form:</para>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[<a4j:outputPanel ajaxRendered="true">
   <h:messages/>
</a4j:outpurPanel>]]></programlisting>
        </section>

        <section id="DelayedRenderZone">
                <?dbhtml filename="DelayedRenderZone.html"?>
                <title>How to create &quot;a4j delayed render zone&quot;?</title>
                <para>The <emphasis role="bold">&lt;a4j:support&gt;</emphasis> component has
                        a &quot;requestDelay&quot; attribute where you can define the delay.</para>
                <para>More information about this problem could be found on the <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=104969"
                                >Ajax4Jsf Users Forum.</ulink>
                </para>
        </section>


        <section id="HowToStopPoll">
                <?dbhtml filename="HowToStopPoll.html"?>
                <title>How to stop &quot;a4j:poll&quot;?</title>
                <para>More information about this problem could be found on the <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=104951"
                                >Ajax4Jsf Users Forum. </ulink>
                </para>
        </section>

        <section id="IgnoreDupResponsesAndRequestDelay">
                <?dbhtml filename="IgnoreDupResponsesAndRequestDelay.html"?>

                <title>How to use IgnoreDupResponses and requestDelay?</title>
                <para>The <emphasis>
                                <property>&quot;IgnoreDupResponses&quot;</property>
                        </emphasis> attribute appeared from 1.0.4 RC1 version and is used on the
                        client for response ignoring after an Ajax request if a newer request has
                        been already sent. <para> The additional information could be found <ulink
                                        url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=105766"
                                        >here</ulink>. </para>
                        <emphasis>
                                <property>&quot;RequestDelay&quot;</property>
                        </emphasis> attribute also defines the client behavior. It sets the time
                        delay, after which another request could be sent, all other requests are
                        taken away from a queue except the last one. </para>
        </section>


        <section id="RefreshImage">
                <?dbhtml filename="RefreshImage.html"?>
                <title>How to refresh an image using &lt;a4j:support&gt; component?</title>
                <para>More information about this problem could be found on the <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=105995"
                                >Ajax4Jsf Users Forum. </ulink>
                </para>
        </section>

        <section id="EventQueueUsage">
                <?dbhtml filename="EventQueueUsage.html"?>
                <title>How to use &quot;EventQueue&quot; attribute?</title>
                <para>The <emphasis>
                                <property>&quot;EventQueue&quot;</property>
                        </emphasis> attribute defines the query name where the requests are saved
                        before their sending to the server. The queue is created for redundant
                        requests deleting during frequent events, which call several requests
                        forming one after another. The queue cuts redundant requests and send only
                        the last one. The queue is created in any case and named on default, the
                        attribute usage only re-defines this name. </para>
        </section>

        <section id="PageRequiredOrNot">
                <?dbhtml filename="PageRequiredOrNot.html"?>
                <title>Is &lt;a4j:page&gt; component required or not?</title>
                <para>
                        <emphasis role="bold">&lt;4j:page&gt;</emphasis> is a component used
                        for solving of incompatibility problems in early Ajax4jsf and MyFaces
                        versions. The component encodes the full html page structure. </para>
                <para>More information about this problem could be found on the <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=106849&amp;postdays=0&amp;postorder=asc&amp;start=0"
                                >Ajax4Jsf Users Forum. </ulink>
                </para>
        </section>

        <section id="SeveralStatusOnPage">
                <?dbhtml filename="SeveralStatusOnPage.html"?>
                <title>Can I have several &lt;a4j:status&gt; components on one page?</title>
                <para>Yes, you can. More information about this problem could be found on the <ulink
                                url="http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?c=status"
                                >JBoss RichFaces Online Demos</ulink>. </para>
        </section>

        <section id="SomeProblemsWithRendering">
                <?dbhtml filename="SomeProblemsWithRendering.html"?>
                <title>Can I use &lt;a4j:region&gt; within &lt;a4j:repeat&gt;?</title>
                <para>
                        <emphasis role="bold">&lt;a4j:region&gt;</emphasis> can&apos;t
                        work inside iteration components like <emphasis role="bold"
                                >&lt;h:dataTable&gt;</emphasis> and <emphasis role="bold"
                                >&lt;a4j:repeat&gt;</emphasis>. </para>
                <para>The details could be found <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=109080"
                                >here. </ulink>
                </para>
        </section>

        <section id="CustomAjaxRequest">
                <?dbhtml filename="CustomAjaxRequest.html"?>
                <title>Why custom Ajax request does not work?</title>
                <para>More information about this problem could be found on the <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=114025"
                                >Ajax4Jsf Users Forum.</ulink>
                </para>
        </section>


        <section id="RerederingSingleDataTableColumn">
                <?dbhtml filename="RerederingSingleDataTableColumn.html"?>
                <title>How to reRender single dataTable column?</title>
                <para>More information about this problem could be found on the <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=105725"
                                >Ajax4Jsf Users Forum. </ulink>
                </para>
        </section>

        <section id="DisableSkins">
                <?dbhtml filename="DisableSkins.html"?>
                <title>How to disable skinability?</title>
                <para>There is possibility to use special skin with name "plain". It doesn't have
                        any parameters. It's necessary for embedding RichFaces components into
                        existing projecst which have its own styles.</para>
                <para>For information you can see discussion about this problem on the <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4066340#4066340"
                                >Ajax4Jsf Users Forum. </ulink>
                </para>
        </section>

        <section id="reRenderingfailed">
                <?dbhtml filename="reRenderingfailed.html"?>
                <title>Why does reRendering fail? Hide/Show components using rendered.</title>
                <para> During &quot;show/hide&quot; functionality implementation the main
                        error happens because of the &quot;reRender&quot; attribute of some
                        Ajax core Action Component is set on a component that depends on rendered
                        properties, i.e. a component that is to be hidden/rendered is tried to be
                        updated. The problem is that if rendered=&quot;false&quot; in this
                        moment, the component isn&apos;t in the DOM tree and can&apos;t be
                        updated because of the general limitations described in the Ajax Processing
                        chapter. </para>
                <para>The correct variant of functionality implantation:</para>

                <orderedlist>
                        <listitem>
                                <para>With the rendered attribute wrap the component that is to be
                                        hidden or rendered on Ajax in a wrapper component (e.g.
                                        a4j:outputPanel)</para>
                        </listitem>

                        <listitem>
                                <para>Set reRender of an Ajax core Action component on this wrapper
                                        component instead of the component itself.</para>
                        </listitem>
                </orderedlist>

                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>

                <programlisting role="XML"><![CDATA[...
<a4j:outputPanel id="panel"> 
	<h:panelGroup rendered="#{bean.rendered}">
		<!--Some nested content to be hidden/shown depending on bean.rendered -->
	</h:panelGroup>
</a4j:outputPanel>
...
<a4j:commandButton action=".." value=".." reRender="panel"/>
...
]]></programlisting>

                <para>In this case the wrapper component always presents in the DOM tree and its
                        inner content could be updated dynamically on AJAX.</para>
        </section>

        <section id="PreventDupRerenderingPoll">
                <?dbhtml filename="PreventDupRerenderingPoll.html"?>
                <title>How to prevent duplicate reRendering when using &lt;a4j:poll&gt;?</title>
                <para>For information you can see discussion about this problem on the <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4059731#4059731"
                                >Ajax4Jsf Users Forum. </ulink>
                </para>
        </section>

        <section id="JSCallPropblemsInInclude">
                <?dbhtml filename="JSCallPropblemsInInclude.html"?>
                <title>Why does JavaScript call don&apos;t work in &lt;a4j:include&gt;?</title>
                <para>More information about this problem could be found on the <ulink
                                url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=104317"
                                >Ajax4Jsf Users Forum. </ulink>
                </para>
        </section>

        <section id="IncludeAndNavRules">
                <?dbhtml filename="IncludeAndNavRules.html"?>
                <title>How to use &lt;a4j:include&gt; and navigation rules?</title>
                <para>For information you can see discussion about this problem on the <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4062036#4062036"
                                >Ajax4Jsf Users Forum. </ulink>
                </para>
        </section>

        <section id="ResourceNotRegisteredException">
                <?dbhtml filename="ResourceNotRegisteredException.html"?>
                <title>What does ResourceNotRegistered Exception mean?</title>

                <para>RichFaces registers its resources (scripts, images) after an application is
                        accessed and then accesses it via a generated URL. During an application
                        development when a developer constantly updates it on the server, it could
                        happen that RichFaces re-registers its resources after every server restart
                        and a browser tries to access them via cashed URL.</para>

                <para>The problem is solved with browser cash update (e.g. CTRL+F5).</para>
        </section>

        <section id="RerenderingPartPage">
                <?dbhtml filename="RerenderingPartPage.html"?>
                <title>How to reRender only particular row(s) of table?</title>
                <!--para> If you use dataTable then you may use <emphasis>
                                <property>&quot;ajaxKeys&quot;</property>
                        </emphasis> attribute to bind the rowKeys to be reRendered there. After you
                        need to point reRender on the specific rows. </para-->
                <para><emphasis>
                                <property>&quot;ajaxKeys&quot;</property>
                        </emphasis> attribute defines strings that are updated after an Ajax
                        request. It provides possibility to update several child components
                        separately without updating the whole page.</para>

                <programlisting role="XML"><![CDATA[...
    <a4j:poll intervall="1000" action="#{repeater.action}" reRender="text">
        <table>
            <tbody>
                <a4j:repeat value="#{bean.props}" var="detail" ajaxKeys="#{repeater.ajaxedRowsSet}">
                    <tr>                
                        <td>
                            <h:outputText value="detail.someProperty" id="text"/>
                        </td>                            
                    </tr>
                </a4j:repeat>
            </tbody>
        </table>
    </a4j:poll>
...
]]></programlisting>
        </section>
        <section id="RowSelectionInScrollableDataTable">
                <?dbhtml filename="RowSelectionInScrollableDataTable.html"?>
                <title>How to get row selection in scrollableDataTable using one and multi-selection
                        rows mode?</title>
                <para>In order to get row selection in scrollableDataTable using <property>one and
                                multi-selection rows mode</property> you should use the <emphasis>
                                <property>&quot;selection&quot;</property>
                        </emphasis> attribute. </para>
                <para>In the following example when user submits the form current collection of
                        objects selected by user is placed in the object's property. Then on
                        complete action the <emphasis role="bold">
                                <property>&lt;rich:modalPanel&gt;</property>
                        </emphasis> with selected data will be shown.</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<h:form>
        <rich:spacer height="30" />
        <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="200px" 
                width="300px" id="carList" rows="40" columnClasses="col"
                value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single"
                selection="#{dataTableScrollerBean.selection}">
                        <rich:column id="make">
                                <f:facet name="header">
                                        <h:outputText styleClass="headerText" value="Make" />
                                </f:facet>
                                <h:outputText value="#{category.make}" />
                        </rich:column>
                        <rich:column id="model">
                                <f:facet name="header">
                                        <h:outputText styleClass="headerText" value="Model" />
                                </f:facet>
                                <h:outputText value="#{category.model}" />
                        </rich:column>
                        <rich:column id="price">
                                <f:facet name="header">
                                        <h:outputText styleClass="headerText" value="Price" />
                                </f:facet>
                                <h:outputText value="#{category.price}" />
                        </rich:column>
        </rich:scrollableDataTable>
        <rich:spacer height="20px"/>
        <a4j:commandButton value="Show Current Selection" reRender="table" 
                action="#{dataTableScrollerBean.takeSelection}" 
                oncomplete="javascript:Richfaces.showModalPanel('panel');"/>
</h:form>
<rich:modalPanel id="panel" autosized="true">
        <f:facet name="header">
                <h:outputText value="Selected Rows"/>
        </f:facet>
        <f:facet name="controls">
                <span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('panel')">X</span>
        </f:facet>
        <rich:dataTable value="#{dataTableScrollerBean.selectedCars}" var="sel" id="table">
                <rich:column>
                        <f:facet name="header">
                                <h:outputText value="Make" />
                        </f:facet>
                        <h:outputText value="#{sel.make}" />
                </rich:column>
                <rich:column id="model">
                        <f:facet name="header">
                                <h:outputText value="Model" />
                        </f:facet>
                        <h:outputText value="#{sel.model}" />
                </rich:column>
                <rich:column id="price">
                        <f:facet name="header">
                                <h:outputText value="Price" />
                        </f:facet>
                        <h:outputText value="#{sel.price}" />
                </rich:column>
        </rich:dataTable>
</rich:modalPanel>
...]]></programlisting>
                <para>In order to build this application, you can create a managed bean like this
                        one. Function <emphasis>
                                <property>takeSelection()</property>
                        </emphasis> fills the array <property>selectedCars</property> with the data,
                        got from the <property>selection</property>. Function <emphasis>
                                <property>getSelectedCars()</property>
                        </emphasis> returns the array <property>selectedCars</property>, which is
                        used for filling <emphasis role="bold">
                                <property>&lt;rich:dataTable&gt;</property>
                        </emphasis> with selected row/rows data.</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
public class DataTableScrollerBean {
        private SimpleSelection selection = new SimpleSelection();
        private ArrayList<DemoInventoryItem> selectedCars = new ArrayList<DemoInventoryItem>(); 
        ...
        public SimpleSelection getSelection() {
                return selection;
        }
        public void setSelection(SimpleSelection selection) {
                System.out.println("Setting Started");
                this.selection = selection;
        System.out.println("Setting Complete");
        }
        public String takeSelection() {
                getSelectedCars().clear();
                Iterator<SimpleRowKey> iterator = getSelection().getKeys();
                while (iterator.hasNext()){
                        SimpleRowKey key = iterator.next();
                        getSelectedCars().add(getAllCars().get(key.intValue()));
                }
                return null;
        }
        public ArrayList<DemoInventoryItem> getSelectedCars() {
                return selectedCars;
        }
        public void setSelectedCars(ArrayList<DemoInventoryItem> selectedCars) {
                this.selectedCars = selectedCars;
        }
}
...]]></programlisting>
                <para>Some additional information about usage of <property>one and multi-selection
                                rows mode</property> can be found <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=122543"
                                >here</ulink>.</para>
        </section>
  <!--  <section id="RowSelectionInDataTable">
                <?dbhtml filename="RowSelectionInDataTable.html"?>
                <title>How to show a row of a dataTable on a modal panel?</title>
                <para>In order to get <property>a row selection in DataTable using </property>  you should use the <emphasis>
                                <property>&quot;selection&quot;</property>
                        </emphasis> attribute. </para>
                <para>In the following example when user submits the form current collection of
                        objects selected by user is placed in the object's property. Then on
                        complete action the <emphasis role="bold">
                                <property>&lt;rich:modalPanel&gt;</property>
                        </emphasis> with selected data will be shown.</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>``
                <programlisting role="XML"><![CDATA[...
<f:subview xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" id="subview"> 
        <style>
                .cur{
                        cursor:pointer; 
                }
        </style>
        <h:form id="form">
                <rich:contextMenu attached="false" id="menu" submitMode="ajax">
	<rich:menuItem >
	        <b>{car} {model}</b> details
	        <a4j:actionparam name="det" assignTo="#{ddmenu.current}" value="{car} {model} details"/>
	</rich:menuItem>
	<rich:menuGroup value="Actions">  
	        <rich:menuItem ajaxSingle="true">
	                Put <b>{car} {model}</b> To Basket
	                <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Put {car} {model} To Basket"/>
	        </rich:menuItem>
	        <rich:menuItem value="Read Comments" ajaxSingle="true">
	                <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Read Comments"/>
	        </rich:menuItem>				
	        <rich:menuItem ajaxSingle="true">
	                Go to <b>{car}</b> site
	                <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Go to {car} site"/>
	         </rich:menuItem>
	</rich:menuGroup>
                </rich:contextMenu> 
                <h:panelGrid columns="2">
                <rich:dataTable value="#{dataTableScrollerBean.tenRandomCars}" var="car" id="table"
		onRowMouseOver="this.style.backgroundColor='#F8F8F8'"
		onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" rowClasses="cur">
                                <a4j:support event="onRowClick" ajaxSingle="true" oncomplete="javascript:Richfaces.showModalPanel('subview:form:mhjgfjk'); return false;" reRender="panel">
	                   <a4j:actionparam name="car" assignTo="#{dataTableScrollerBean.currentCar}" value="#{car.make}"/>
	                   <a4j:actionparam name="model" assignTo="#{dataTableScrollerBean.currentModel}" value="#{car.model}"/>
	                   <a4j:actionparam name="price" assignTo="#{dataTableScrollerBean.currentPrice}" value="#{car.price}"/>
	</a4j:support>
	<rich:column>
	                <f:facet name="header">
		Make
	                </f:facet>
	        <h:outputText value="#{car.make}"/>
	</rich:column>
	<rich:column>
	                <f:facet name="header">
		Model
	                </f:facet>
	        <h:outputText value="#{car.model}"/>
	</rich:column>
	<rich:column>
	                <f:facet name="header">
		Price
	                </f:facet>
	        <h:outputText value="#{car.price}" />
	</rich:column>
                </rich:dataTable>
                <rich:modalPanel id="mhjgfjk"  minWidth="300" minHeight="50">
	        <f:facet name="controls">
		<span style="cursor:pointer" onclick="Richfaces.hideModalPanel('subview:form:mhjgfjk'); return false;">X</span>
	        </f:facet>
	        <f:facet name="header">
	                        Selection Row
	        </f:facet>
	        <rich:panel id="panel">
      	                <f:facet name="header">
	                                <h:outputText value="#{dataTableScrollerBean.currentCar}"/>
	                </f:facet>
	                <h:panelGrid columns="2">
		        <h:outputText value="Model" style="font-style:bold"></h:outputText>
		        <h:outputText value="#{dataTableScrollerBean.currentModel}"/>
		        <h:outputText value="Price" style="font-style:bold"></h:outputText>
		        <h:outputText value="#{dataTableScrollerBean.currentPrice}"/>
	                </h:panelGrid>
	        </rich:panel>
                </rich:modalPanel>
        </h:panelGrid>
</h:form>			
</f:subview>
...]]></programlisting>
                <para>In order to build this application, you can create a managed bean like this
                        one. Function <emphasis>
                                <property>takeSelection()</property>
                        </emphasis> fills the array <property>selectedCars</property> with the data,
                        got from the <property>selection</property>. Function <emphasis>
                                <property>getSelectedCars()</property>
                        </emphasis> returns the array <property>selectedCars</property>, which is
                        used for filling <emphasis role="bold">
                                <property>&lt;rich:dataTable&gt;</property>
                        </emphasis> with selected row/rows data.</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
public class DataTableScrollerBean {
        private SimpleSelection selection = new SimpleSelection();
        private ArrayList<DemoInventoryItem> selectedCars = new ArrayList<DemoInventoryItem>(); 
        ...
        public SimpleSelection getSelection() {
                return selection;
        }
        public void setSelection(SimpleSelection selection) {
                System.out.println("Setting Started");
                this.selection = selection;
        System.out.println("Setting Complete");
        }
        public String takeSelection() {
                getSelectedCars().clear();
                Iterator<SimpleRowKey> iterator = getSelection().getKeys();
                while (iterator.hasNext()){
                        SimpleRowKey key = iterator.next();
                        getSelectedCars().add(getAllCars().get(key.intValue()));
                }
                return null;
        }
        public ArrayList<DemoInventoryItem> getSelectedCars() {
                return selectedCars;
        }
        public void setSelectedCars(ArrayList<DemoInventoryItem> selectedCars) {
                this.selectedCars = selectedCars;
        }
}
...]]></programlisting>
                <para>Some additional information about usage of <property>one and multi-selection
                        rows mode</property> can be found <ulink
                                url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=122543"
                                >here</ulink>.</para>
    </section>    -->
        
        <section id="ScrollableDataTableDragAndDrop">
                <?dbhtml filename="ScrollableDataTableDragAndDrop.html"?>
                <title>How to select several rows in a scrollableDataTable and Drag-and-Drop them on dataTable?</title>
        <para>
                How to get row selection in scrollableDataTable using <property>one and multi-selection rows mode</property> 
                you could see the section <link  linkend="RowSelectionInScrollableDataTable">above</link>.
        </para>
        <para>
                In order to perform Drag-and-Drop of selected columns on a dataTable you could use 
                <emphasis role="bold"><property>&lt;rich:dragSupport&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;rich:dropSupport&gt;</property></emphasis>
                components as it is shown in the example below.
        </para>
        <para>
                <emphasis role="bold">Example:</emphasis>
        </para>      
        <programlisting role="XML"><![CDATA[...
<rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="400px" width="700px" id="carList" rows="40" columnClasses="col"
                                        value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single" selection="#{dataTableScrollerBean.selection}">
        <rich:column id="make">
                <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Make" />
                </f:facet>
                <a4j:outputPanel>
                        <rich:dragSupport dragType="selectionDrag" dragIndicator=":indicator"/>
                        <h:outputText value="#{category.make}" />
                </a4j:outputPanel>
        </rich:column>
        <rich:column id="model">
                <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Model" />
                </f:facet>
                <h:outputText value="#{category.model}" />
        </rich:column>
        <rich:column id="price">
                <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Price" />
                </f:facet>
                <h:outputText value="#{category.price}" />
        </rich:column>
        <rich:column id="mileage">
                <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Mileage" />
                </f:facet>
                <h:outputText value="#{category.mileage}" />
        </rich:column>
        <rich:column width="200px" id="vin">
                <f:facet name="header">
                        <h:outputText styleClass="headerText" value="VIN" />
                </f:facet>
                <h:outputText value="#{category.vin}" />
        </rich:column>
        <rich:column id="stock">
                <f:facet name="header">
                        <h:outputText styleClass="headerText" value="Stock" />
                </f:facet>
                <h:outputText value="#{category.stock}" />
        </rich:column>
</rich:scrollableDataTable>
<rich:spacer height="20px"/>
<rich:panel style="width:300px; height:300px">
        <f:facet name="header">
                <h:outputText value="Drop Here"/>
        </f:facet>
        <rich:dropSupport acceptedTypes="selectionDrag" dropListener="#{dataTableScrollerBean.dropListener}" reRender="table"/>
        <rich:dataTable value="#{dataTableScrollerBean.droppedCars}" var="sel" id="table">
                <rich:column>
                        <f:facet name="header">
                                <h:outputText value="Make" />
                        </f:facet>
                        <h:outputText value="#{sel.make}" />
                </rich:column>
                <rich:column id="model">
                        <f:facet name="header">
                                <h:outputText value="Model" />
                        </f:facet>
                        <h:outputText value="#{sel.model}" />
                </rich:column>
                <rich:column id="price">
                        <f:facet name="header">
                                <h:outputText value="Price" />
                        </f:facet>
                        <h:outputText value="#{sel.price}" />
                </rich:column>
                <rich:column id="mileage">
                        <f:facet name="header">
                                <h:outputText value="Mileage" />
                        </f:facet>
                        <h:outputText value="#{sel.mileage}" />
                </rich:column> 
                <rich:column id="stock">
                        <f:facet name="header">
                                <h:outputText value="Stock" />
                        </f:facet>
                        <h:outputText value="#{sel.stock}" />
                </rich:column>
        </rich:dataTable>
</rich:panel>
...]]></programlisting>
                <para>This is the page from <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf">RichFaces LiveDemo</ulink> site and also uses beans from RichFaces LiveDemo site. 
                       Only one method is added where the dropped selection is stored:</para>
        <programlisting role="JAVA"><![CDATA[...
public void dropListener(DropEvent event) {
        System.out.println("Drop Listener Fired");
        getDroppedCars().clear();
        Iterator<SimpleRowKey> item = getSelection().getKeys();
        while (item.hasNext()){
                SimpleRowKey key = item.next();
                getDroppedCars().add(getAllCars().get(key.intValue()));
        }
}
...]]></programlisting>        
        </section>
        
        <section id="SimpleTogglePanelPanelMenuState">
                <?dbhtml filename="SimpleTogglePanelPanelMenuState.html"?>
                <title>How to save the state of simpleTogglePanel?</title>
                <para>
                In order to save the state (exapnd/collapse) of the <emphasis role="bold"><property>&lt;rich:simpleTogglePanel&gt;</property></emphasis> component 
                you could use  <emphasis><property>&quot;opened&quot;</property></emphasis> attribute responsible for keeping a panel state 
                and <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> binded to <property>onexpand</property> and <property>oncollapse</property> events.
                </para>
                <para>
                        In the following example when you click on the toggle icon simpleTogglePanel appears and current state displays on modal panel.
                        This state is remembered between page views.
                </para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
<programlisting role="XML"><![CDATA[...
<rich:simpleTogglePanel id="toggleP" label="simpleTogglePanel" switchType="client" width="600px" opened="#{demo.state}">
        <a4j:support event="onexpand" actionListener="#{demo.stateTrue}" reRender="repeater" oncomplete="Richfaces.showModalPanel('myFrom:panel')" />
        <a4j:support event="oncollapse" actionListener="#{demo.stateFalse}" reRender="repeater" oncomplete="Richfaces.showModalPanel('myFrom:panel')" />
        <h:panelGrid columns="2" border="0">
                <h:graphicImage url="pics/Canon.jpg" alt="" width="100px" height="100px" />
                <h:panelGroup>
                        <h:outputText style="font: 18px;font-weight: bold;" value="Canon EOS Digital Rebel XT" />
                        <f:verbatim>
                                <br />
                                8.2 Megapixels - SLR / Large Digital Camera - 1.8 in LCD Screen -
                                Storage: Compact Flash, Compact Flash Type II - Built In Flash
                        </f:verbatim>
                </h:panelGroup>
        </h:panelGrid>
</rich:simpleTogglePanel>
<rich:modalPanel id="panel" width="300" height="100">
        <f:facet name="header">
                <h:outputText value="States of simpleTogglePanel" />
        </f:facet>
        <f:facet name="controls">
                <span style="cursor: pointer" onclick="Richfaces.hideModalPanel('myFrom:panel')">X</span>
        </f:facet>
        <h:outputText value="Expanded simpleTogglePanel: " style="font-weight:bold;" />
        <h:outputText value="#{demo.state}" id="repeater" />
</rich:modalPanel>
...]]></programlisting>         
                <para>
                        In order to build this application, you can create a managed bean like this one.
                </para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
public class demo {

        private boolean  state = false;
        
        public boolean isState() {
                return state;
        }
        
        public void setState(boolean state) {
                this.state = state;
        }	
        
        public void stateTrue(ActionEvent event) {
                this.state = true;
        }
        
        public void stateFalse(ActionEvent event) {
                this.state = false;
        } 
}
...]]></programlisting>                  
        </section>
        
        
        <section id="RowSelectionInDataTable">
                <?dbhtml filename="HighlightRowDataTable.html"?>
                <title>How to highlight rows in a dataTable when the mouse is over?</title>
                <para>
                        In order to highlight rows in a dataTable when the mouse is over you should use 
                        <emphasis><property>&quot;onRowMouseOver&quot;</property></emphasis> and <emphasis><property>&quot;onRowMouseOut&quot;</property></emphasis>  attributes. 
                </para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<h:form>		
        <rich:dataTable onRowMouseOver="this.style.font = 'bold 20pt Arial'"
                                     onRowMouseOut="this.style.font='#{a4jSkin.tableFont}'"
                                     cellpadding="0" cellspacing="0" 
                                     width="700" border="0" var="record" value="#{report.expReport.records}" 
                                     onRowClick="#{dataTableBean.onRowClick}">
                <f:facet name="header">
                        <rich:columnGroup>
                                <rich:column rowspan="2">
                                        <rich:spacer />
                                </rich:column>
                                <rich:column colspan="3">
                                               <h:outputText value="Expenses" />
                                </rich:column>
                                <rich:column rowspan="2">
                                        <h:outputText value="subtotals" />
                                </rich:column>
                                <rich:column breakBefore="true">
                                        <h:outputText value="Meals" />
                                </rich:column>
                                <rich:column>
                                        <h:outputText value="Hotels" />
                                </rich:column>
                                <rich:column>
                                        <h:outputText value="Transport" />
                                </rich:column>
                        </rich:columnGroup>
                </f:facet>
                <rich:column  colspan="5">
                        <h:outputText value="#{record.city}" />
                </rich:column>
                <rich:subTable onRowMouseOver="this.style.font = 'bold 20pt Arial'"
                                            onRowMouseOut="this.style.font='#{a4jSkin.tableFont}'"
                                            var="expense" value="#{record.items}">
                        <rich:column>
                                <h:outputText value="#{expense.day}"></h:outputText>
                                <f:facet name="footer">
                                        <rich:spacer />
                                </f:facet>
                        </rich:column>
                        <rich:column>
                                <h:outputText value="#{expense.meals}"><f:convertNumber   pattern="$####.00"  /></h:outputText>
                                <f:facet name="footer">
                                        <h:outputText value="#{record.totalMeals}"><f:convertNumber  pattern="$####.00" /></h:outputText>
                                </f:facet>
                        </rich:column>
                        <rich:column>
                                        <h:outputText value="#{expense.hotels}"><f:convertNumber  pattern="$####.00"  /></h:outputText>
                                        <f:facet name="footer">
                                                        <h:outputText value="#{record.totalHotels}"><f:convertNumber   pattern="$####.00"  /></h:outputText>
                                        </f:facet>
                        </rich:column>
                        <rich:column>
                                        <h:outputText value="#{expense.transport}"><f:convertNumber   pattern="$####.00"  /></h:outputText>
                                        <f:facet name="footer">
                                                <h:outputText value="#{record.totalTransport}"><f:convertNumber   pattern="$####.00"  /></h:outputText>
                                        </f:facet>
                        </rich:column>
                        <rich:column>
                                <rich:spacer></rich:spacer>
                                <f:facet name="footer">
                                        <h:outputText value="#{record.total}"><f:convertNumber   pattern="$####.00"    /></h:outputText>
                                </f:facet>
                        </rich:column>					
                </rich:subTable>
                <f:facet name="footer">
                <rich:columnGroup>
                        <rich:column>Totals</rich:column>
                        <rich:column>
                                <h:outputText value="#{report.expReport.totalMeals}"><f:convertNumber   pattern="$####.00"  /></h:outputText>
                        </rich:column>
                        <rich:column>
                                <h:outputText value="#{report.expReport.totalHotels}"><f:convertNumber   pattern="$####.00"  /></h:outputText>
                        </rich:column>
                        <rich:column>
                                <h:outputText value="#{report.expReport.totalTransport}"><f:convertNumber   pattern="$####.00"  /></h:outputText>
                        </rich:column>
                        <rich:column>
                                <h:outputText value="#{report.expReport.grandTotal}"><f:convertNumber   pattern="$####.00"  /></h:outputText>
                        </rich:column>
                </rich:columnGroup>
        </f:facet>
</rich:dataTable>
</h:form>
...]]></programlisting>
                
        </section>
        
        <section id="OneRowSelectionInDataTable">
                <?dbhtml filename="HighlightRowDataTable.html"?>
                <title>How to select one row of a dataTable by clicking on it, even if clicked in an inputText of this row?</title>
                <para>In order  to select one row of a dataTable by clicking on it you could use JavaScript function described below. </para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<script type="text/javascript">
        var oldRow;
        function changeColor(row)
        {
                if (oldRow!=undefined)
                        {
	oldRow.style.backgroundColor='#ffffff';
                        } 
                row.style.backgroundColor='#ffff00'; 
                oldRow=row;
        }
</script>                  
...]]></programlisting>
                <para>Then you could use <emphasis role="bold"><property>a4j:support</property></emphasis> with <emphasis><property>&quot;event&quot;</property></emphasis> and <emphasis><property>&quot;onsubmit&quot;</property></emphasis> attributes.</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<h:form>
        <rich:dataTable cellpadding="0" cellspacing="0" 
                                     width="700" border="0" var="record" value="#{report.expReport.records}">
                <a4j:support event="onRowClick" onsubmit="changeColor(this)" ajaxSingle="true">
                                <f:param name="currentRow" value="#{record.city}"/>
                </a4j:support>
               ...
        </rich:dataTable>
</h:form>    
...]]></programlisting>                
        </section>      
         <section id="reRenderCells">
                <?dbhtml filename="reRenderCells.html"?>
                <title>How to reRender table cells with &lt;a4j:support&gt;?</title>
                <para>In order to reRender table cells with <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis>
                        you should set exact <property>ids</property> values for every updatable components 
                        and point this <property>id</property> to the <emphasis><property>&quot;reRender&quot;</property></emphasis> attribute.</para>
                
                <note>
                        <title>Note:</title>
                        <para>The value of <emphasis><property>&quot;reRender&quot;</property></emphasis> 
                                attribute of the <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> tag defines which part(s) 
                                of our page is (are) to be updated. In this case, the only part of the page to update is the 
                                <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis> tag because its <property>id</property>
                                value matches to the value of <emphasis><property>&quot;reRender&quot;</property></emphasis> 
                                attribute. 
                                As you see, it's not difficult to update multiple elements on the page, only list their <property>ids</property> as the value of  
                                <emphasis><property>&quot;reRender&quot;</property></emphasis> 
                                attribute .</para>
                </note>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<rich:column>
        <f:facet name="header">
                <h:outputText  value="Input1"/>
        </f:facet>
        <f:facet name="footer">
                <h:outputText  value="#{Controller.totalInput1}"/>
        </f:facet>
        <h:inputText id="input1" value="#{entry.input1}">
                <a4j:support actionListener="{Controller.updateEntry}"event="onblur" reRender="output1"/>
        </h:inputText>
</rich:column>
<rich:column>
        <f:facet name="header">
                <h:outputText value="Value2"/>
        </f:facet>
        <f:facet name="footer">
                <h:outputText value="#{Controller.totalOutput1}"/>
        </f:facet>
        <h:outputText id="output1" value="#{entry.output1}"/>
</rich:column>
...]]></programlisting> 
                <para>As it could be seen in the example above, the footer with <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis> reRenderes.</para>
        </section>
        <!--section>
                <?dbhtml filename="HighlightRowDataTable.html"?>
                <title>How to use jsFunction with JSON?</title>
                <para>JsFunction and JSON can be used in many ways, for example:</para>
                         
                <para>You want to create device in a circuit diagram. Here is the number of steps for creating:</para>
                <itemizedlist>
                        <listitem>
                You drag and drop it from the toolbox in our embedded Javascript(!) graphical editor. But first only a "please wait"-ModalPanel is shown. 
                        </listitem>
                                <listitem>
                With JSFunction we come to the SessionBean and from there to the DB to fetch some Data for drawing the device in the Editor. 
                                </listitem>
                                        <listitem>
                 When the answer comes back, we asked you with a modal panel to give a name to the device. 
                                        </listitem>
                                                <listitem>
                After you click OK, the model panel disappears (and the please wait model panel shows up again) and another JSFunction call goes over the SessionBean to the DB to create the device data there. 
                                                </listitem>
                                                        <listitem>
                When the answer comes back, a JSON-String is created with all data for drawing the device (for example the given name) and the Editor is advised to draw it (and the please wait modal panel disappears again).
                                                        </listitem>
                </itemizedlist>
                <para>Here you can see the example of creating the JSONExporter, where you can put any dataclass.</para>
                <note>
                        <para>JSON exporter class, knows what data of the data class you need directly in Javascript.</para>       
                 </note>
                              <para>  Here an example for such an exporter class: </para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="JAVA"><![CDATA[	import org.richfaces.json.JSONException;
    import org.richfaces.json.JSONObject;
public class SomeDataToJSON implements DataToJSON    {
public String toJSON(Object obj)
{
SomeData data = (SomeData) obj;    
JSONObject dataToJSON = new JSONObject();
try
{
dataToJSON.put("ID", data.getObjPhysName()); 
dataToJSON.put("name", data.getName());        
dataToJSON.put("width", data.getWidth());
dataToJSON.put("height", data.getHeight());      
}
catch (JSONException e)
{
e.printStackTrace();
}    
return dataToJSON.toString();
}
}]]></programlisting> 
                <para>As you can see, the SimpleJSON library build the JSON-String for you (integrated in RichFaces). 
                Sometimes you have to add some brackets or something else.</para> 
                <para>Here your Javascript code.</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="JAVA"><![CDATA[var jsonString = executeObjectCreation("test", "anotherParam");
var myObject = eval(jsonString);
var name = myObject.name;
...]]></programlisting--> 
                <!--para>You can use  jsFunction to call the jsonTest backing bean that generates some random data in a JSON-String. 
                That JSON-String is then passed to the updateFields method, which evaluates it and populates some html tags with its content. </para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.ajax4jsf.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">
        <ui:define name="content">
                <script lang="javascript" >
                        function updateFields(data){
                        var myObj = eval("("+ data +")");
                                document.getElementById('cpty').innerHTML = myObj.cpty;
                                document.getElementById('exposure').innerHTML = myObj.exposure;
                                document.getElementById('limit').innerHTML = myObj.limit;
                                }
                </script>
        <a4j:form>
                <a4j:jsFunction name="testJsFunc" action="#{jsonTest.actionMethod}" data="#{jsonTest.jsonData}" ajaxSingle="true"
                ignoreDupResponses="true" eventQueue="foo" oncomplete="updateFields(data);" >
                        <a4j:actionparam name="Param1" assignTo="#{jsonTest.cptyParam}"/>
                </a4j:jsFunction>
        </a4j:form>
                <table>
                <tr>
                        <td>
                                <a href="#" onclick="testJsFunc('VALUE1')">Set for VALUE1</a>
                        </td>
                </tr>
                <tr>
                        <td>
                                <a href="#" onclick="testJsFunc('VALUE2')">Set for VALUE2</a>
                        </td>
                </tr>
                <tr>
                        <td>
                                <a href="#" onclick="testJsFunc('VALUE3')">Set for VALUE3</a>
                        </td>
                </tr>
                <tr>
                        <td>
                                <a href="#" onclick="testJsFunc('VALUE4')">Set for VALUE4</a>
                        </td>
                </tr>
                </table>
                <table>
                        <tr>
                                <th>Counterparty</th>
                                <th>Exposure</th>
                                <th>Limit</th>
                        </tr>
                        <tr>
                                <th>
                                        <h:outputText id="cpty" value=""/>
                                </th>
                                <th>
                                        <h:outputText id="exposure" value=""/>
                                </th>
                                <th>
                                        <h:outputText id="limit" value=""/>
                                </th>
                        </tr>
                </table>
        </ui:define>
</ui:composition>
...]]></programlisting> 
                <para>If you are not familiar with the annotations, 
                they are from the Seam framework and can be removed and replaced with a managed bean definition in faces-config.xml.</para>
                <programlisting role="JAVA"><![CDATA[import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import org.jboss.seam.ScopeType;
import org.jboss.seam.annotations.Name;
import org.jboss.seam.annotations.Scope;
import org.richfaces.json.JSONException;
import org.richfaces.json.JSONObject;

@Name("jsonTest")
@Scope(ScopeType.EVENT)
public class JsonTest {

    public String cptyParam;

    public String jsonData;

    public String actionMethod(){
        Random rand = new Random(System.currentTimeMillis());

        Map<String,String> data = new HashMap<String,String>();
        data.put("cpty", cptyParam);
        data.put("exposure", ""+(rand.nextFloat()*10) );
        data.put("limit", ""+(rand.nextInt(50)));

        jsonData = toJSON(data);

        return null;
    }

    public String toJSON(Map<String,String> data){

      JSONObject dataToJSON = new JSONObject();
      try{
        dataToJSON.put("cpty", data.get("cpty"));
        dataToJSON.put("exposure", data.get("exposure"));
        dataToJSON.put("limit", data.get("limit"));
      }
      catch (JSONException e){
       //TODO Approriate exception handling
        e.printStackTrace();
      }
      return dataToJSON.toString();
    }

    public String getCptyParam() {
        return cptyParam;
    }

    public void setCptyParam(String aCptyParam) {
        cptyParam = aCptyParam;
    }

    public String getJsonData() {
        return jsonData;
    }

    public void setJsonData(String aJsonData) {
        jsonData = aJsonData;
    }
}
...]]></programlisting--> 
        <!--/section-->
        <section id="DinamicColumns">
                <?dbhtml filename="DinamicColumns.html"?>
                <title>How to dynamic columns?</title>
                <para>In order to create dynamic columns you could use the <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> component
                        with the<emphasis><property>&quot;rendered&quot;</property></emphasis> attribute. You should just set the value of defined dynamic cell to the 
                        <emphasis><property>&quot;rendered&quot;</property></emphasis> attribute field.</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<ui:composition  template="/WEB-INF/layout/template.xhtml">	
        <ui:define name="body">
                <h2>Table</h2>
                        <h:form>
                                <rich:dataTable id="aTable" onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                                 onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" value="#{trb.tableData}" var="row">
                                        <f:facet name="header">
                                                <rich:columnGroup>
                                                        <rich:column colspan="2">
                                                                Testing
                                                        </rich:column>
                                                </rich:columnGroup>
                                        </f:facet>			
                                        <f:facet name="footer">
                                                <rich:columnGroup>
                                                        <rich:column colspan="2">
                                                                Footer
                                                        </rich:column>
                                                </rich:columnGroup>
                                        </f:facet>			
                                <rich:column rendered="#{trb.cellRendered['value1']}">
                                        <f:facet name="header">	
                                                <s:div>
                                                        value1 <h:commandLink value="x" action="#{trb.hideColumn('value1')}"/>
                                                </s:div>										
                                        </f:facet>
                                        #{row.value1}
                                </rich:column>				
                                </rich:dataTable>
                                        Generate new table values:
                                <h:commandButton value="generate" action="#{trb.createData}"/>
                        </h:form>	
                        <h:form>
                                Select which columns are rendered.
                                <br/>
                                        <h:selectBooleanCheckbox title="value1" value="#{trb.cellRendered['value1']}"/>
                                <br/>
                                <h:commandButton value="Apply" action="rerender"/>
                        </h:form>
        </ui:define>
</ui:composition>
...]]></programlisting>
                <para>In order to build this application, you can create a managed bean like this
                        one.</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="JAVA"><![CDATA[
public class TableBackingRendered implements Serializable {
	private static final long serialVersionUID = 1L;
	private Random rand = new Random(System.currentTimeMillis());
	private List<TableItem> tableData;
	private Map<String, Boolean> cellRendered = new HashMap<String, Boolean>();
	public TableBackingRendered() {
		createData();
		allCellsRendered();
	}
	public String createData(){	
			int count = rand.nextInt(25)+1;
			tableData = new ArrayList<TableItem>(count);
			for(int i=0; i<count; i++){
				tableData.add( new TableItem(
						"value1_" +i,
						));
			}
			return null;
		}
	public String allCellsRendered() {
		cellRendered.put("value1", Boolean.TRUE);
		return null;
	}
	public String hideColumn(final String columnToHide) {
		cellRendered.put(columnToHide, Boolean.FALSE);
		return null;
	}
	public List<TableItem> getTableData() {
		return tableData;
	}
	public Map<String, Boolean> getCellRendered() {
		return cellRendered;
	}
	public void setCellRendered(Map<String, Boolean> cellRendered) {
		this.cellRendered = cellRendered;
	}
	public void setTableData(List<TableItem> tableData) {
		this.tableData = tableData;
	}
}
...]]></programlisting>      
                <!--para>Another solution when you are dealing with a significant amount of rows, if you are using facelets you can use c:forEach (jslt).</para>
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...<rich:dataTable value="report.rows" var="row">
<f:facet name="header">
        <rich:columnGroup>
                <c:forEach var="col" items="#{report.columns}/>
                        <h:outputText value="#{col.label}"/>
                </c:forEach>
        </rich:columnGroup>
</f:facet>
                <c:forEach var="cell" items="#{report.columns}" varStatus="col">
                        <h:outputText value="#{rowCol.index?.cells.value}"/>
                </c:forEach>
</rich:dataTable>
...]]></programlisting-->      
        </section>
        <section id="Trinidad">
                <?dbhtml filename="Trinidad.html"?>
                <title>RichFaces with Trinidad?</title>
                <para>Here is a stripped down version of<property> web.xml</property> that integrates RichFaces and Trinidad.</para>
     
                <para>
                        <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[
<?xml version="1.0" ?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_5.xsd" 
  version="2.5">
  
  <!-- Ajax4jsf -->
  <context-param>
    <param-name>org.ajax4jsf.SKIN</param-name>
    <param-value>blueSky</param-value>
  </context-param>
  
  <!-- Seam -->
  <listener>
    <listener-class>org.jboss.seam.servlet.SeamListener</listener-class>
  </listener>
  <filter>
    <filter-name>Seam Filter</filter-name>
    <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>Seam Filter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <servlet>
    <servlet-name>Seam Resource Servlet</servlet-name>
    <servlet-class>org.jboss.seam.servlet.SeamResourceServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Seam Resource Servlet</servlet-name>
    <url-pattern>/seam/resource/*</url-pattern>
  </servlet-mapping>
  
  <!-- Facelets -->
  <context-param>
    <param-name>facelets.DEVELOPMENT</param-name>
    <param-value>true</param-value>
  </context-param>
  
  <!-- JSF -->
  <context-param>
    <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
    <param-value>.xhtml</param-value>
  </context-param>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
  <context-param>        
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>        
    <param-value>server</param-value>    
  </context-param> 

  <!-- Trinidad - as suggested by a4j-trinidad example-->
  <context-param>
    <param-name>org.apache.myfaces.trinidad.ALTERNATE_VIEW_HANDLER</param-name>
    <param-value>com.sun.facelets.FaceletViewHandler</param-value>
  </context-param>
  <filter>
    <filter-name>Trinidad</filter-name>
    <filter-class>org.apache.myfaces.trinidad.webapp.TrinidadFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>Trinidad</filter-name>
    <url-pattern>*.xhtml</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
    <dispatcher>INCLUDE</dispatcher>
  </filter-mapping>
  <context-param>
    <param-name>org.apache.myfaces.trinidad.CACHE_VIEW_ROOT</param-name>
    <param-value>false</param-value>
  </context-param>
  <servlet>
    <servlet-name>Trinidad Resources</servlet-name>
    <servlet-class>org.apache.myfaces.trinidad.webapp.ResourceServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Trinidad Resources</servlet-name>
    <url-pattern>/adf/*</url-pattern>
  </servlet-mapping>
  
  <!-- Security -->
  <security-constraint>
    <web-resource-collection>
      <web-resource-name>Secure Content</web-resource-name>
      <url-pattern>*.xhtml</url-pattern>
    </web-resource-collection>
    <auth-constraint>
      <role-name>AuthorizedUser</role-name>
    </auth-constraint>
    <user-data-constraint>
      <transport-guarantee>NONE</transport-guarantee>
    </user-data-constraint>
  </security-constraint>
  <login-config>
    <auth-method>BASIC</auth-method>
    <realm-name>The Restricted Zone</realm-name>
  </login-config>
  <security-role>
    <description>The role required to access restricted content</description>
    <role-name>AuthorizedUser</role-name>
  </security-role>
  
  <!-- Welcome files -->
  <welcome-file-list>
    <welcome-file>index.xhtml</welcome-file>
  </welcome-file-list>  
  
</web-app>
]]></programlisting> 
        </section>
        <section>
                <?dbhtml filename="WhydoesJSScriptsconflict.html"?>
                <title>Why does Java Script conflict?</title>
                <para>Richfaces 3.1.3 uses 1.6.0 version of prototype.js script instead of 1.5.1 
                        that's been used for earlier versions. There are 2 prototype versions included 
                        (the first included implicitly as a dependency of toggle panel components and 
                        the second one included explicitly as a link). Versions conflict is the cause of the problem.</para>
                <para>RichFaces 3.1.3 is bundled with the same ones as Prototype 1.6.0, Scriptaculous 1.8.0</para>
                <para>
                        <emphasis role="bold">Example in web.xml::</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<context-param>
	<param-name>org.richfaces.ExcludeScripts</param-name>
	<param-value>Prototype,Scriptaculous</param-value>
</context-param>
...]]></programlisting>       
                <para>RichFaces components use Prototype very hard. In particular, some patches has been removed that are already included into 1.6.0. 
                        Adding feature with exclusion makes it possible to use Prototype with version less than 1.6.0. This will break some of the components.</para>
               
        </section>
</chapter>
