<?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
                                                  <code>richfaces-ui-3.2.1-src.zip</code>. Binary
                                                  stored in <code>richfaces-ui-3.2.1-bin.zip</code>
                                        </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 &lt;Maven-Root&gt;/conf/settings.xml file
                                                  to edit</para>

                                        <para>Add into the <code>&lt;profile&gt;</code>
                                                  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
                                                  <code>&lt;activeProfiles&gt;</code>
                                                  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.1.0-SNAPSHOT/"
                                        >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">
                                        <property>&lt;rich:dataTable&gt;</property>
                              </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">
                                        <property>&lt;a4j:include&gt;</property>
                              </emphasis> inside the <emphasis role="bold">
                                        <property>&lt;rich:modalPanel&gt;</property>
                              </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">
                                        <property>&lt;a4j:include&gt;</property>
                              </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">
                                        <property>&lt;rich:modalPanel&gt;</property>
                              </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">
                                        <property>&lt;rich:dropDownMenu&gt;</property>
                              </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: <emphasis>
                                        <property>&quot;first_disabled&quot;</property>
                              </emphasis>, <emphasis>
                                        <property>&quot;last_disabled&quot;</property>
                              </emphasis>, <emphasis>
                                        <property>&quot;next_disabled&quot;</property>
                              </emphasis>, <emphasis>
                                        <property>&quot;previous_disabled&quot;</property>
                              </emphasis>, <emphasis>
                                        <property>&quot;fastforward_disabled&quot;</property>
                              </emphasis>, <emphasis>
                                        <property>&quot;fastrewind_disabled&quot;</property>
                              </emphasis>. </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">
                                        <property>&lt;rich:dropDownMenu&gt;</property>
                              </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">
                                        <property>&lt;rich:dropDownMenu&gt;</property>
                              </emphasis> is designed keeping in mind that it should not be used for
                              a contextMenu purpose. We have a <emphasis role="bold">
                                        <property>&lt;rich:contextMenu&gt;</property>
                              </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 JavaScript, 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="CSS"><![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">
                                        <property>&lt;rich:dataTable&gt;</property>
                              </emphasis> and <emphasis role="bold">
                                        <property>&lt;rich:dataScroller&gt;</property>
                              </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, <code>effect.js</code>, 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">
                                        <property>&lt;rich:effect&gt;</property>
                              </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 label 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&quot;</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;<code>doSomething()&quot;</code> 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 &quot;true&quot; if you want to fire the
                                        request - because
                                                  <code>&lt;xxx&gt;&lt;a4j:support
                                                  event=&quot;onclick&quot;
                                                  onsubmit=&quot;return
                                        true;&quot;&gt;</code> is transformed into
                                                  <code>&lt;xxx onclick=&quot;return true;
                                                  A4J.Submit(.... );&quot; &gt;</code> and
                                        the request isn&apos;t fired also in this case (but the
                                        standard event processing fired). You must only return
                                        &quot;false&quot; 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 (<code>..oncomplete
                              :anotherFunction(this)..</code>), it places (<code>oncomplete:
                                        function(){anotherFunction(this);}..</code>) 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
                                        <code>document.findElementById()</code>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
                                        (<code>&lt;a4j:commandLink onclick="var myControl=this;"
                                        oncomplete="anotherFunction(myControl)"/&gt;</code>). </para>
                    <tip>
                              <title>Tip:</title>
                              <para>The onComplete syntax now is:</para>
                              <programlisting role="XML">
	<![CDATA[<someAjaxActionComponent ...oncomplete="myFunc(req,event,data)".../>]]>
            </programlisting>
                              <para> where the <code>event</code> 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 <code>data</code> is
                                        a variable that contains deserialized value from the <emphasis>
                                                  <property>&quot;data&quot;</property>
                                        </emphasis> attribute. </para>
                    </tip>
          </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
                                        <code>findComponent()</code> 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 &lt;a4j:keepAlive&gt;
                              component?</title>
                    <para>To avoid exception, don&apos;t forget that the component stores beans
                              in serialized view, but your bean should implement
                                        <code>java.io.Serializable</code>.</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">
                                        <property>&lt;a4j:support&gt;</property>
                              </emphasis> component has a <emphasis>
                                        <property>&quot;requestDelay&quot;</property>
                              </emphasis> 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 &lt;a4j:poll&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=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">
                                        <property>&lt;4j:page&gt;</property>
                              </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">
                                        <property>&lt;a4j:region&gt;</property>
                              </emphasis> can&apos;t work inside iteration components like
                                        <emphasis role="bold">
                                        <property>&lt;h:dataTable&gt;</property>
                              </emphasis> and <emphasis role="bold">
                                        <property>&lt;a4j:repeat&gt;</property>
                              </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
                                        <code>rendered=&quot;false&quot;</code> 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. <emphasis role="bold">
                                                  <property>&lt;a4j:outputPanel&gt;</property>
                                                  </emphasis>)</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 <code>takeSelection()</code> fills the array
                                        <code>selectedCars</code> with the data, got from the
                                        <property>selection</property>. Function
                                        <code>getSelectedCars()</code> returns the array
                                        <code>selectedCars</code>, 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="JAVA"><![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 &lt;rich:simpleTogglePanel&gt;?</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 <emphasis>
                                        <property>&quot;onexpand&quot;</property>
                              </emphasis> and <emphasis>
                                        <property>&quot;oncollapse&quot;</property>
                              </emphasis> events. </para>
                    <para> In the following example when you click on the toggle icon <emphasis
                                        role="bold">
                                        <property>&lt;rich:simpleTogglePanel&gt;</property>
                              </emphasis> appears and current state displays on <emphasis
                                        role="bold">
                                        <property>&lt;rich:modalPanel&gt;</property>
                              </emphasis>. 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="#{bean.state}">
        <a4j:support event="onexpand" actionListener="#{bean.stateTrue}" reRender="repeater" oncomplete="Richfaces.showModalPanel('myFrom:panel')" />
        <a4j:support event="oncollapse" actionListener="#{bean.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.hibeandalPanel('myFrom:panel')">X</span>
        </f:facet>
        <h:outputText value="Expanded simpleTogglePanel: " style="font-weight:bold;" />
        <h:outputText value="#{bean.state}" id="repeater" />
</rich:modalPanel>
...]]></programlisting>
                    <para> In order to build this application, you can create a managed bean like
                              this one. </para>
                    <para id="beanState">
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
public class bean {

        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="PanelMenuGroupState">
                    <?dbhtml filename="PanelMenuGroupState.html"?>
                    <title>How to save the state of &lt;rich:panelMenuGroup&gt;?</title>
                    <para> With the help of the <emphasis>
                                        <property>&quot;expanded&quot;</property>
                              </emphasis> attribute and <emphasis role="bold">
                                        <property>&lt;a4j:support&gt;</property>
                              </emphasis> binded to <emphasis>
                                        <property>&quot;onexpand&quot;</property>
                              </emphasis> and <emphasis>
                                        <property>&quot;oncollapse&quot;</property>
                              </emphasis> events you could keep the state
                              (&quot;expand&quot;/&quot;collapse&quot;) of the
                                        <emphasis role="bold">
                                        <property>&lt;rich:panelMenuGroup&gt;</property>
                              </emphasis> component. </para>
                    <para> In the following example when you click on the toggle icon the <emphasis
                                        role="bold">
                                        <property>&lt;rich:panelMenuGroup&gt;</property>
                              </emphasis> expands and current state displays on <emphasis
                                        role="bold">
                                        <property>&lt;rich:modalPanel&gt;</property>
                              </emphasis>. This state is remembered between page views. </para>
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
<h:form id="myFrom">
        <rich:panelMenu expandMode="ajax" iconExpandedTopGroup="chevronUp" iconCollapsedTopGroup="chevronDown">
                <rich:panelMenuGroup label="Group 1" expanded="#{bean.state}">
                        <a4j:support event="onexpand" actionListener="#{bean.stateTrue}" reRender="repeater" oncomplete="Richfaces.showModalPanel('myFrom:panel')" />
                        <a4j:support event="oncollapse" actionListener="#{bean.stateFalse}" reRender="repeater" oncomplete="Richfaces.showModalPanel('myFrom:panel')" />
                        <rich:panelMenuItem label="Item 1.1" />
                        <rich:panelMenuItem label="Item 1.2" />
                        <rich:panelMenuItem label="Item 1.3" />
                </rich:panelMenuGroup>	
        </rich:panelMenu>
        <rich:modalPanel id="panel" width="230" height="50">
                <f:facet name="header">
                        <h:outputText value="States of rich:panelMenuGroup" />
                </f:facet>
                <f:facet name="controls">
                        <span style="cursor: pointer" onclick="Richfaces.hideModalPanel('myFrom:panel')">X</span>
                </f:facet>
                <h:outputText value="Expanded rich:panelMenuGroup: " />
                <h:outputText value="#{bean.state}" id="repeater" />
        </rich:modalPanel>
</h:form>
...]]></programlisting>
                    <para> In order to build this application, you can create a managed bean like
                                        <link linkend="beanState">this one</link>. </para>
          </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 &lt;rich:dataTable&gt; by clicking on it, even if clicked
                              in an &lt;h:inputText&gt; 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>&lt;a4j:support&gt;</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 web.xml 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>

          <section id="fileUploadConf">
                    <?dbhtml filename="FileUploadConf.html"?>
                    <title>&lt;rich:fileUpload&gt; with Seam</title>
                    <para> The <emphasis role="bold">
                                        <property>&lt;rich:fileUpload&gt;</property>
                              </emphasis> component could work together with Seam framework. </para>
                    <para> Initialization parameters should be defined for Seam Filter in web.xml.
                              They will be automatically set up for Ajax4Jsf Filer by Seam framework
                              on start up. </para>
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
<filter>
        <filter-name>Seam Filter</filter-name>
        <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class>
        <init-param>
                <param-name>createTempFiles</param-name>
                <param-value>true</param-value>
        </init-param>
        <init-param>
                <param-name>maxRequestSize</param-name>
                <param-value>200000</param-value>
        </init-param>
</filter>
...]]></programlisting>
          </section>
          
          <section id="richfileUploadforMyFaces" role="new">
                    <?dbhtml filename="richfileUploadforMyFaces.html"?>
                    <title>&lt;rich:fileUpload&gt; with MyFaces</title>
                    <para>The following order, in which filters are defined and mapped in web.xml, is important for <emphasis role="bold">
                                        <property>&lt;rich:fileUpload&gt;</property>
                              </emphasis> component proper work with MyFaces. 
					Note that the extention filter should be mapped on faces servlet not to *.jsf (!) to provide this sequence work correctly.
					</para>
                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
<!--Ajax filter definition-->
<filter>
          <display-name>Ajax4jsf Filter</display-name>
          <filter-name>ajax4jsf</filter-name>
          <filter-class>org.ajax4jsf.Filter</filter-class>
          <init-param>
                    <param-name>createTempFiles</param-name>
                    <param-value>true</param-value>
          </init-param>
</filter>

<!--Extensions filter definition-->
<filter>
          <filter-name>extensionsFilter</filter-name>
          <filter-class>org.apache.myfaces.webapp.filter.ExtensionsFilter</filter-class>
          <init-param>
                    <description>
                              Set the size limit for uploaded files. Format: 10 - 10 bytes 10k - 10 KB 10m - 10 MB 1g - 1 GB 
                    </description>
                    <param-name>uploadMaxFileSize</param-name>
                    <param-value>100m</param-value>
          </init-param>
          <init-param>
                    <description>
                              Set the threshold size - files below this limit are stored in memory, files above this limit are stored on disk. Format: 10 - 10 bytes 10k - 10 KB 10m - 10 MB 1g - 1 GB 
                    </description>
                    <param-name>uploadThresholdSize</param-name>
                    <param-value>100k</param-value>
          </init-param>
</filter>

<!--Mapping Ajax filter on the faces servlet-->
<filter-mapping>
           <filter-name>ajax4jsf</filter-name>
           <servlet-name>Faces Servlet</servlet-name>
           <dispatcher>REQUEST</dispatcher>
           <dispatcher>FORWARD</dispatcher>
           <dispatcher>INCLUDE</dispatcher>
           <dispatcher>ERROR</dispatcher>
</filter-mapping>

<!--Mapping MyfFaces extention filter on the faces servlet-->
<filter-mapping>
          <filter-name>extensionsFilter</filter-name>
          <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

<!--Listener, that allows Jetty serving MyFaces applications-->
<listener>
          <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>

<!--Faces servlet definition-->
<servlet>
          <servlet-name>Faces Servlet</servlet-name>
          <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
          <load-on-startup>1</load-on-startup>
</servlet>

<!--MappingFaces servlet on the *.jsf -->
<servlet-mapping>
          <servlet-name>Faces Servlet</servlet-name>
          <url-pattern>*.jsf</url-pattern>
</servlet-mapping>
...]]></programlisting>
                    
          </section>
          
          <section id="suggestionboxObjectSelection">
                    <?dbhtml filename="suggestionboxObjectSelection.html"?>
                    <title>Optional object selection in &lt;rich:suggestionbox&gt;</title>
                    <para> The <emphasis role="bold">
                                        <property>&lt;rich:suggestionbox&gt;</property>
                              </emphasis> component provides such feature as object selection. In
                              order to store selected items as objects and then get access to them
                              you could use next scenario: </para>
                    <itemizedlist>
                              <listitem>
                                        <para> Add <emphasis>
                                                  <property>&quot;usingSuggestObjects&quot;</property>
                                                  </emphasis> attribute with
                                                  &quot;true&quot; value to <emphasis
                                                  role="bold">
                                                  <property>&lt;rich:suggestionbox&gt;</property>
                                                  </emphasis>
                                        </para>
                              </listitem>
                              <listitem>
                                        <para> Use <emphasis>
                                                  <property>&quot;onobjectchanged&quot;</property>
                                                  </emphasis> event attribute to store objects
                                                  currently selected </para>
                              </listitem>
                              <listitem>
                                        <para> All selected objects are stored under
                                                  <code>suggestion.SelectedItems</code>
                                                  array. Each array element contains of
                                                  <code>text</code> and <code>object</code>
                                                  properties. So, you could iterate this array, get
                                                  <property>not null objects</property>
                                                  and then get the property you need. </para>
                              </listitem>
                    </itemizedlist>
          </section>
          <section id="viewExpiredException">
                    <?dbhtml filename="viewExpiredException.html"?>
                    <title>How to handle ViewExpiredException?</title>
                    <para> As <property>RichFaces 3.1</property> is targeted at JSF 1.1, you
                              won&apos;t get <code>ViewExpiredExceptions</code> generated when
                              using it with JSF 1.2. This exception appears after session timeout. </para>
                    <para> Fortunately there is an easy workaround. Add to your web.xml: </para>
                    <programlisting role="XML"><![CDATA[...
<context-param>
        <param-name>com.sun.faces.enableRestoreView11Compatibility</param-name>
        <param-value>true</param-value>
</context-param>
...]]></programlisting>
          </section>
          <section id="sessionExpiredHandling">
                    <?dbhtml filename="sessionExpiredHandling.html"?>
                    <title>How to handle Request Errors and Session Expiration?</title>
                    <para> 
                   	In order to redefine standard handlers responsible for processing of different exceptional situations 
                    you should take the following steps:
                    </para>
                    <itemizedlist>
                    	<listitem>
                    		<para>
                    			add to your <property>web.xml</property> the following code:		
                    		</para>
                 	        <programlisting role="XML"><![CDATA[...
<context-param>
	<param-name>org.ajax4jsf.handleViewExpiredOnClient</param-name>
	<param-value>true</param-value>
</context-param> 
...]]></programlisting>
                    	</listitem>
                    	<listitem>
                    		<para>
                    			add custom <emphasis><property>&quot;onError&quot;</property></emphasis>, <emphasis><property>&quot;onExpire&quot;</property></emphasis> handlers: 
                    		</para>
                   	        <programlisting role="Java"><![CDATA[...
A4J.AJAX.onError = function(req,status,message){
	window.alert("Custom onError handler "+message);
}
A4J.AJAX.onExpired = function(loc,expiredMsg){
	if(window.confirm("Custom onExpired handler "+expiredMsg+" for a location: "+loc)){
		return loc;
	} else {
		return false;
	}
} 
...]]></programlisting>
							<para>
								For the detailed description see 
								the <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html_single/index.html#RequestErrorsAndSessionExpirationHandling">Request Errors and Session Expiration Handling</ulink> section of the Developer Guide.
							</para>
                    	</listitem>
                    </itemizedlist> 
                <note>
				<title>Note:</title>
				<para>
				Note that custom <emphasis><property>&quot;onError&quot;</property></emphasis>, <emphasis><property>&quot;onExpire&quot;</property></emphasis> handlers 
				do not work under MyFaces. MyFaces handles exception by its internals generating debug page. 
				You could use the following code to prevent such behavior:
				</para>
				<programlisting role="XML"><![CDATA[...
<context-param>
	<param-name>org.apache.myfaces.ERROR_HANDLING</param-name>
	<param-value>false</param-value>
</context-param> 
...]]></programlisting>
			</note>
          </section>
	  <section id="ajaxCookie">
                    <?dbhtml filename="ajaxCookie.html"?>
                    <title>How to add cookie in an AJAX Respond?</title>
		<para> 
			In order to add cookie in an AJAX Respond you could use bean described below.
		</para>
		<para>
			<emphasis role="bold">Example:</emphasis>
		</para>
                    <programlisting role="JAVA"><![CDATA[...
public class CookieBean {
	
	private String testCookie = null;
	
	public String setTestCookie() {
		ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
		HttpServletResponse response = (HttpServletResponse) externalContext.getResponse();
		Cookie cookie = new Cookie("test", "Setted at time " + System.currentTimeMillis());
		cookie.setMaxAge(60 * 60 * 24 * 365);
		response.addCookie(cookie);
		return "verify_cookie";
	}

	public String getTestCookie() {
		ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
		HttpServletRequest request = (HttpServletRequest) externalContext.getRequest();
		Cookie[] cookies = request.getCookies();
		for (int i = 0; i < cookies.length; i++) {
			if (cookies[i].getName().equals("test")) {
				testCookie = cookies[i].getValue();
				return testCookie;
			}
		}
		return null;
	}
}
...]]></programlisting>
	<para>
		Then you could try to set cookie with AJAX Respond as it is shown in the following example. 
		After the cookie &quot;test&quot; is set the value of this cookie appears on a page.
	</para>
	<para>
		<emphasis role="bold">Example:</emphasis>
	</para>
        <programlisting role="XML"><![CDATA[...
<h:form>
	<h:outputText id="text" value="Cookie value: #{cookieBean.testCookie}"/>
    	<br />
 	<a4j:commandButton action="#{cookieBean.setTestCookie}" value="Set Cookie by AJAX">
       		<a4j:support event="oncomplete" reRender="text" />
       	</a4j:commandButton>
</h:form>
...]]></programlisting>
          </section>
		  
		  <section id="newin32x">
		     <title>What's new in a4j in 3.2.x release</title>
		        <para>RichFaces 3.2.x releases have some new features: 
			       <itemizedlist>
				      <listitem>
					     <para>the <emphasis role="bold"><property>&lt;a4j:portlet&gt;</property></emphasis> 
						 component is DEPRECATED as far as JSR-301 was defined a same functionality for a UIViewRoot component;
						 </para>
					  </listitem>
					  <listitem>
					     <para>to provide different types of validations <emphasis role="bold"><property>&lt;rich:ajaxValidator&gt;</property></emphasis>, 
						 <emphasis role="bold"><property>&lt;rich:beanValidator&gt;</property></emphasis> and 
						 <emphasis role="bold"><property>&lt;rich:graphValidator&gt;</property></emphasis> validators are added.
						 </para>
					  </listitem>
				   </itemizedlist>
			  </para>
		  </section>
</chapter>
