[jboss-cvs] JBossAS SVN: r91917 - in projects/docs/enterprise/5.0: RichFaces and 1 other directories.
jboss-cvs-commits at lists.jboss.org
jboss-cvs-commits at lists.jboss.org
Mon Aug 3 02:50:35 EDT 2009
Author: laubai
Date: 2009-08-03 02:50:35 -0400 (Mon, 03 Aug 2009)
New Revision: 91917
Added:
projects/docs/enterprise/5.0/RichFaces/
projects/docs/enterprise/5.0/RichFaces/Makefile
projects/docs/enterprise/5.0/RichFaces/en-US/
projects/docs/enterprise/5.0/RichFaces/en-US/Architecture_Overview.xml
projects/docs/enterprise/5.0/RichFaces/en-US/Author_Group.xml
projects/docs/enterprise/5.0/RichFaces/en-US/Book_Info.xml
projects/docs/enterprise/5.0/RichFaces/en-US/FAQ.xml
projects/docs/enterprise/5.0/RichFaces/en-US/Getting_Started.xml
projects/docs/enterprise/5.0/RichFaces/en-US/IDE_Support.xml
projects/docs/enterprise/5.0/RichFaces/en-US/Introduction.xml
projects/docs/enterprise/5.0/RichFaces/en-US/Links_to_Resources.xml
projects/docs/enterprise/5.0/RichFaces/en-US/Revision_History.xml
projects/docs/enterprise/5.0/RichFaces/en-US/RichFaces_Developer_Guide.ent
projects/docs/enterprise/5.0/RichFaces/en-US/RichFaces_Developer_Guide.xml
projects/docs/enterprise/5.0/RichFaces/en-US/Settings.xml
projects/docs/enterprise/5.0/RichFaces/en-US/Technical_Requirements.xml
Log:
Building RichFaces docs.
Added: projects/docs/enterprise/5.0/RichFaces/Makefile
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/Makefile (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/Makefile 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,12 @@
+#Makefile for RichFaces Developer Guide
+
+XML_LANG = en-US
+
+BRAND = JBoss
+
+#OTHER_LANGS = as-IN bn-IN de-DE es-ES fr-FR gu-IN hi-IN it-IT ja-JP kn-IN ko-KR ml-IN mr-IN or-IN pa-IN pt-BR ru-RU si-LK ta-IN te-IN zh-CN zh-TW
+OTHER_LANGS = de-DE es-ES fr-FR pt-BR zh-CN ja-JP
+
+COMMON_CONFIG = /usr/share/publican
+include $(COMMON_CONFIG)/make/Makefile.common
+
Property changes on: projects/docs/enterprise/5.0/RichFaces/Makefile
___________________________________________________________________
Name: svn:executable
+ *
Added: projects/docs/enterprise/5.0/RichFaces/en-US/Architecture_Overview.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/Architecture_Overview.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/Architecture_Overview.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,2745 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<chapter id="ArchitectureOverview">
+ <title>Basic concepts of the RichFaces Framework</title>
+ <section id="introToBasics">
+ <title>Introduction</title>
+ <para>
+ The RichFaces Framework is implemented as a component library that adds AJAX capabilities into existing pages. This means that you do not need to write any JavaScript code or replace existing components with new AJAX widgets. RichFaces enables page-wide AJAX support instead of the traditional component-wide support, so you can define areas of the page that will reflect changes made by AJAX events on the client.
+ </para>
+ <para>The diagram following shows the process in full:</para>
+ <figure>
+ <title>Request Processing flow</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/newpic1.png" scalefit="1"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>
+ RichFaces lets you use JSF tags to define sections of a JSF page that you wish to update with the results of an AJAX request. It also provides you with several options for sending AJAX requests to the server. You do not need to write any JavaScript or <literal>XMLHTTPRequest</literal> objects by hand — everything is done automatically.</para>
+ </section>
+ <section id="RichFacesArchitectureOverview">
+ <title>RichFaces Architecture Overview</title>
+ <para>The following figure lists several important elements of the RichFaces Framework.</para>
+ <figure>
+ <title>Core AJAX component structure</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/newpic2.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <formalpara>
+ <title>AJAX Filter.</title>
+ <para>To make the most of RichFaces, you should register a <literal>Filter</literal> in your application's <filename>web.xml</filename>. The <literal>Filter</literal> recognizes multiple request types. (Information about configuring the <literal>Filter</literal> can be cound in the <xref linkend="FilterConfiguration" /> section.) The sequence diagram in Figure 5.3 shows the differences in processing between a <emphasis>regular</emphasis> JSF request and an AJAX request.</para>
+ </formalpara>
+ <figure>
+ <title>Request processing sequence diagram</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/newpic3.png" scalefit="1"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>In either case, the required static or dynamic resource information that your application requests is registered in the <literal>ResourceBuilder</literal> class.</para>
+ <para>When a resource request is issued, the RichFaces filter checks the <literal>Resource Cache</literal> for this resource. If it is present, the resource is returned to the client. Otherwise, the filter searches for the resource among those registered in the <literal>ResourceBuilder</literal>. If the resource is registered, the RichFaces filter requests that the <literal>ResourceBuilder</literal> creates (delivers) the resource.</para>
+ <para>The diagram that follows illustrates the process of requesting a resource.</para>
+ <figure>
+ <title>Resource request sequence diagram</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/newpic4.png" scalefit="1"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <formalpara>
+ <title>AJAX Action Components</title>
+ <para>AJAX Action components are used to send AJAX requests from the client side. There are a number of AJAX Action components, including <literal><a4j:commandButton></literal>, <literal><a4j:commandLink></literal>, <literal><a4j:poll></literal>, and <literal><a4j:support></literal>.</para>
+ </formalpara>
+ <formalpara>
+ <title>AJAX Containers</title>
+ <para><literal>AjaxContainer</literal> is an interface that defines an area on your JSF page that should be decoded during an AJAX request. <literal>AjaxViewRoot</literal> and <literal>AjaxRegion</literal> are both implementations of this interface.</para>
+ </formalpara>
+ <formalpara>
+ <title>JavaScript Engine</title>
+ <para>
+ The RichFaces JavaScript Engine runs on the client side, and updates different areas of your JSF page based on information from the AJAX response. This JavaScript code operates automatically, so there is no need to use it directly.</para>
+ </formalpara>
+ </section>
+ <section id="IntegralParts" role="new">
+ <title>RichFaces Integral Parts</title>
+ <para>
+ RichFaces includes several integral parts (framework, libraries, etc.):</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <ulink url="http://prototypejs.org">Prototype 1.6.0.3</ulink>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <ulink url="http://jquery.com">jQuery 1.3.1</ulink>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <ulink url="http://script.aculo.us">Script.aculo.us 1.8.1</ulink>
+ </para>
+ </listitem>
+ </itemizedlist>
+ <para>For more information about framework and library loading, see the linked section in the <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/faq/faq.html#d0e581">FAQ</ulink>.</para>
+ <note>
+ <para>To prevent conflict between different versions of JavaScript, you should use only one version of the framework or library. More information about library exclusion is available in the linked section of the <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/faq/faq.html#d0e1546">FAQ</ulink>.</para>
+ </note>
+ </section>
+
+ <section id="LimitationsAndRules">
+ <title>Limitations and Rules</title>
+ <para>RichFaces applications do have limits. To make the most of your RichFaces applications, keep these points in mind:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Your AJAX framework should not append or delete, but <emphasis>replace the contents</emphasis> of a page element. For your element updates to succeed, the element ID and the response ID must match. If you do want to append code to a page, include an empty element as a placeholder. Similarly, we recommend that you place messages in the <literal>AjaxOutput</literal> component, since 'no messages' is also a message.</para>
+ </listitem>
+ <listitem>
+ <para>Do not use <literal><f:verbatim></literal> for self-rendered containers. This component is transient, and is not saved in the tree.</para>
+ </listitem>
+ <listitem>
+ <para>AJAX requests are made in XML format by <literal>XMLHTTPRequest</literal> functions. This bypasses most validations and corrections that might be made in a browser. It is therefore important that you create strict, standards-compliant code for HTML and XHTML, without omitting any required elements or attributes. Any necessary XML corrections are made automatically by the server's XML filter, but incorrect HTML code can produce a number of undesired effects.
+ </para>
+ </listitem>
+ <listitem>
+ <para>The RichFaces <literal>ViewHandler</literal> places itself ahead of the Facelets <literal>ViewHandler</literal> chain.</para>
+ </listitem>
+ <listitem>
+ <para>RichFaces components use their own renderers. During the <emphasis>Render Response</emphasis> phase, the RichFaces framework traverses the component tree, calls its own renderer, and adds the result to the Faces Response.</para>
+ </listitem>
+ </itemizedlist>
+ </section>
+ <section id="AjaxRequestOptimization">
+ <title>Ajax Request Optimization</title>
+ <section id="Re-Rendering">
+ <title>Re-Rendering</title>
+ <para>AJAX attributes are common in AJAX components such as <literal><a4j:support></literal>, <literal><a4j:commandButton></literal>, <literal><a4j:jsFunction></literal>, <literal><a4j:poll></literal>, <literal><a4j:push></literal> and similar. Most RichFaces components with built-in AJAX support also contain these attributes. AJAX component attributes let RichFaces expose its features. Most attributes are assigned default values, so you can start working with RichFaces without understanding the particular use of each attribute. However, familiarizing yourself with attributes will let you tune AJAX behavior more effectively.</para>
+ <para><varname>reRender</varname> is a key attribute that points to one or more areas on a page that should be updated with a response upon AJAX interaction. The value of the <varname>reRender</varname> attribute can be the ID of the JSF component, or an ID list. A simple example would be:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:commandButton value="update" reRender="infoBlock"/>
+...
+<h:panelGrid id="infoBlock">
+ ...
+</h:panelGrid>
+...]]></programlisting>
+ <para>The value of the <varname>reRender</varname> attribute belonging to the <literal>a4j:commandButton</literal> tag defines the part or parts of your page to be updated. In this case, the only part of the page that will be updated is the <literal><h:panelGrid></literal> tag, because its ID value matches the value of the <varname>reRender</varname> attribute. It is very easy to update multiple elements on a page: simply list their IDs as the value of <varname>reRender</varname>.</para>
+ <para><varname>reRender</varname> uses the <ulink url="http://java.sun.com/javaee/javaserverfaces/1.2_MR1/docs/api/javax/faces/component/UIComponent.html#findComponent(java.lang.String)"><literal>UIComponent.findComponent()</literal> algorithm</ulink> (with some exceptions) to locate the component on the component tree. The algorithm presumes that several steps are required, and each step is executed only if the previous step is unsuccessful. You can hasten the process of locating the component by mentioning it more explicitly. The following example shows the different approaches available. Both buttons will work, but the <guibutton>Shortcut</guibutton> will work faster.</para>
+ <programlisting role="XML"><![CDATA[...
+<h:form id="form1">
+ ...
+ <a4j: commandButton value="Usual Way" reRender="infoBlock, infoBlock2" />
+ <a4j:commandButton value="Shortcut" reRender=":infoBlockl,:sv:infoBlock2" />
+ ...
+</h:form>
+<h:panelGrid id="infoBlock">
+ ...
+</h:panelGrid>
+...
+<f:subview id="sv">
+ <h:panelGrid id="infoBlock2">
+ ...
+ </h:panelGrid>
+ ...
+</f:subview>
+...]]></programlisting>
+ <para>You can also use JSF EL expressions as the value of the <varname>reRender</varname> attribute. The EL for <varname>reRender</varname> is resolved immediately prior to the <emphasis>Render Response</emphasis> phase, so you can determine which elements should be rerendered based on any previous phase in the AJAX request process.</para>
+ <para>The most common problem when <varname>reRender</varname> is used is identifying a component with a <varname>rendered</varname> attribute. When the <varname>rendered</varname> condition returns <literal>false</literal>, JSF does not store the location of the component to be rerendered. Therefore, after a component is rendered during the AJAX request, RichFaces delivers the rendered code to the client but cannot update the page because the location for the update is unknown. To work around this, point to one of the parent components that has no <varname>rendered</varname> attribute. Alternatively, you can wrap the component to be updated with <code><a4j:outputPanel>layout="none"</code>.</para>
+ <para>Setting the <varname>ajaxRendered</varname> attribute of <literal><a4j:outputPanel></literal> to <literal>true</literal> lets you define a page area that will be rerendered even if it is not explicitly identified in the <varname>reRender</varname> attribute.</para>
+ <para>It can be useful to have an area on a page that is updated as a response on any AJAX request. For example, the following code outputs error messages regardless of which AJAX request causes the Validation phase to fail:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:outputPanel ajaxRendered="true">
+ <h:messages />
+</a4j:outputPanel>
+...]]></programlisting>
+ <para>The <varname>limitToList</varname> attribute lets you dismiss the behavior of the <literal><a4j:outputPanel></literal> element's <varname>ajaxRendered</varname> attribute. <!--#modify The following sentence seems wrong, but that's what the previous text suggested. Check, please!-->When <varname>limitToList</varname> is <literal>false</literal>, only the areas explicitly mentioned in the <varname>reRender</varname> attribute will be updated. All output panels that define <varname>ajaxRendered</varname> as <literal>true</literal> are ignored. For example:</para>
+ <programlisting role="XML"><![CDATA[...
+<h:form>
+ <h:inputText value="#{person.name}">
+ <a4j:support event="onkeyup" reRender="test" limitToList="true"/>
+ </h:inputText>
+ <h:outputText value="#{person.name}" id="test"/>
+</form>
+...]]></programlisting>
+ </section>
+ <section id="QueueandTrafficFloodProtection">
+ <title>Queue and Traffic Flood Protection</title>
+ <para><varname>eventsQueue</varname> defines the name of the queue that will order upcoming AJAX requests. RichFaces does not queue AJAX requests by default. If events are produced simultaneously, they will arrive simultaneously at the server. However, JSF implementations (particularly early versions) do not guarantee that the first request will be served or passed into the JSF lifecycle first. The order in which server-side data is modified during simultaneous requests can be unpredictable. The <varname>eventsQueue</varname> attribute helps you avoid potential problems in this situation. Define the name of the queue explicitly if you expect intensive AJAX traffic in your application.</para>
+ <para>If the <varname>eventsQueue</varname> attribute is defined, a request posted in the same queue as another request will wait for the first request's AJAX response to be returned. RichFaces can also remove <emphasis>similar</emphasis> requests (requests produced by the same event) from the queue. The following code ensures that only the most recent request is sent to the server (assuming that a change is made before the original AJAX Response is returned):</para>
+ <programlisting role="XML"><![CDATA[...
+<h:inputText value="#{userBean.name}">
+ <a4j:support event="onkeyup" eventsQueue="foo" reRender="bar" />
+</h:inputText>
+...]]></programlisting>
+ <para>The <varname>requestDelay</varname> attribute defines the time (in milliseconds) that the request will wait in the queue before it is ready to send. When the delay time has passed, the request will either be sent to the server or removed (if a more recent <emphasis>similar</emphasis> request has been queued already).</para>
+ <para>The <varname>ignoreDupResponses</varname> attribute ignores the AJAX Response produced by the request if the most recent <emphasis>similar</emphasis> request is already queued. Setting <varname>ignoreDupResponses</varname> to <literal>true</literal> does not cancel the request while it is being processed on the server, but does not update the client-side data if the response no longer belongs to the most current request.</para>
+ <para> Defining the <varname>eventsQueue</varname> and <varname>requestDelay</varname> protects you against unnecessary traffic flood and synchronizes the order of your AJAX requests. If your requests originate from several sources, you can define the same queue name for each source. This is useful if you have AJAX components that invoke requests asynchronously from user event requests, such as <literal><a4j:poll></literal> or <literal><a4j:push></literal>. Where these requests modify the same data, synchronizing the request order is important to data integrity.</para>
+ <para>You can find more information on the <ulink url="http://jboss.com/index.html?module=bb&op=viewtopic&t=105766">RichFaces Users Forum</ulink>.</para>
+ <para>The <varname>timeout</varname> attribute sets the period of time a particular request will wait for a response. If a response is not received within the timeout period, the request is aborted.</para>
+ </section>
+ <section id="QueuePrinciples">
+ <title>Queue Principles</title>
+ <para>RichFaces 3.3.0 and higher includes an improved queue. It eliminates the possibility of collisions of conflicting data and reduces traffic between the browser and the server by sending only the most recent AJAX request where <emphasis>similar</emphasis> requests are held simultaneously during the <emphasis>request delay period</emphasis>.</para>
+ <!--#modify It did not sound as if there were any changes between the previous queue and the 3.3.0 version, so I removed the redundant paragraph. If there were any changes, let me know. lbailey at redhat.com-->
+ <para>There are four types of queue:</para>
+ <itemizedlist>
+ <listitem><para>the <emphasis>Global Default Queue</emphasis>, defined in the <filename>web.xml</filename> file,
+ </para>
+ </listitem>
+ <listitem>
+ <para>the <emphasis>View-scoped Default Queue</emphasis>,</para>
+ </listitem>
+ <listitem>
+ <para>the <emphasis>View-scoped Named Queue</emphasis>, and</para>
+ </listitem>
+ <listitem>
+ <para>the <emphasis>Form-based Default Queue</emphasis>.</para>
+ </listitem>
+ </itemizedlist>
+ <para>This section covers the different queues in detail. <!--Usage details are covered in <xref linkend="a4j_queue" />.--></para>
+ <section>
+ <title>Global Default queue, defined in the <filename>web.xml</filename> file</title>
+
+ <para>There are two important points to remember about the Global Default Queue:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Only one global queue will ever exist on a particular view. If you define more than one queue with this name, a warning will present in the server console during rendering. Subsequent queues with the same name are ignored.</para>
+ </listitem>
+ <listitem>
+ <para>The queue class name is <literal>org.richfaces.queue.global</literal>.</para>
+ </listitem>
+ </itemizedlist>
+
+ <para>The Global Default Queue is application-scoped and is defined in the <filename>web.xml</filename> file as follows:</para>
+ <programlisting role="XML"><![CDATA[...
+<context-param>
+ <param-name>org.richfaces.queue.global.enabled</param-name>
+ <param-value>true</param-value>
+</context-param>
+...
+]]></programlisting>
+ <para>The Global Default Queue is disabled by default because artificially serializing all AJAX requests on a page can affect expected behavior significantly.</para>
+ </section>
+ <section>
+ <title>View-scoped Default Queue</title>
+ <para>There are several important points to remember about the View-scoped Default Queue:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Only one default queue is ever active at one time for a given view or form. If multiple defaults are detected, a warning will present in the server console during rendering. Subsequent queues with the same name are ignored.</para>
+ </listitem>
+ <listitem>
+ <para>the View-scoped Default Queue is also created for components with the following AJAX attributes (in this case the queue has a component scope):</para>
+ <itemizedlist>
+ <listitem>
+ <para><varname>requestDelay</varname></para>
+ </listitem>
+ <listitem>
+ <para><varname>ignoreDupResponse</varname></para>
+ </listitem>
+ </itemizedlist>
+ </listitem>
+ <listitem>
+ <para>the View-scoped Default Queue is created automatically if the <varname>eventsQueue</varname> attribute is defined in a component, but not found in the view. It is scoped to the context defined in the corresponding <emphasis>context parameter</emphasis>.</para>
+ </listitem>
+ </itemizedlist>
+ <para>The View-scoped Default, Named, and Form-based queue types all use the <literal><a4j:queue></literal> tag to override the settings defined by the Global Queue in <filename>web.xml</filename>.</para>
+ <para>You can also programmatically enable/disable the global queue for a particular view using the following:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:queue name="org.richfaces.global_queue" disabled="true"... />
+...]]></programlisting>
+ <para>To enable the queue for a single view page, you must set the <varname>disable</varname> attribute to <literal>false</literal>.</para>
+ <para>You can override the default settings by changing the attributes of the <literal><a4j:queue></literal> component. (The complete list of attributes can be found in the <!--#modify xref 6.20 plz--><literal><a4j:queue></literal> chapter.) For example:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:queue name="org.richfaces.global_queue" requestDelay="1000" />
+...]]></programlisting>
+ <para>You can add the view-scoped queue without explicitly defining a name. Place the appropriate tag anywhere outside the form so that it is not recognized as a form-based queue:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:queue ... />
+...]]></programlisting>
+ </section>
+
+ <section>
+ <title>View-scoped Named Queue</title>
+ <para>There are several important points to remember about the View-scoped Named Queue:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Your named queue must have a unique name. If multiple queues with the same name are identified, subsequent queues with the same name will be ignored.</para>
+ </listitem>
+ <listitem>
+ <para>Form elements are used as the naming container for the queue. This means that a custom queue defined within the form cannot be used by the components outside this discrete form.</para>
+ </listitem>
+ </itemizedlist>
+ <para>
+ You can reference a named queue from any Ajax4JSF or RichFaces component that supports the<varname>eventsQueue</varname> attribute. The following example shows how components can reference a named queue:
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:queue name="sampleQueue"/>
+<h:inputText value="#{bean.inputValue}" >
+ <a4j:support id="inputSupport" event="onkeyup" eventsQueue="sample"/>
+</h:inputText>
+<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" eventsQueue="sample" />
+...]]></programlisting>
+ <para>In this example, two components (<literal><a4j:queue></literal> and <literal><rich:comboBox></literal>) reference the named queue through the <varname>eventsQueue</varname> attribute. </para>
+ </section>
+ <section>
+ <title>Form-based Default Queue</title>
+ <para>Only one default queue can be enabled at one time. If multiple queues are enabled, a warning will present in the server console during rendering, and all subsequent instances of the queue will be ignored. (You can define more than one form queue, but only one should be enabled.)</para>
+
+ <para>To avoid the need to define the <varname>eventsQueue</varname> attribute for every component on a form, create a default queue for a form. This will override the Global Default Queue.</para>
+
+ <para>You can use either a JSF <literal><h:form></literal> or an Ajax4JSF <literal><a4j:form></literal>. </para>
+ <programlisting role="XML"><![CDATA[...
+<h:form ... >
+ <a4j:queue ... /><!-- note no name specified -->
+ ...
+</h:form>
+...]]></programlisting>
+
+ <para>You can also reference a named queue with the <varname>eventsQueue</varname> attribute if you are using an Ajax4JSF <literal><a4j:form></literal>:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:form eventsQueue="fooQueue" ...>
+ ...
+</a4j:form>
+...]]></programlisting>
+ <para>The queue itself also lets you reference a named queue from the form with a form-based queue:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:queue name="sampleQueue" ... /> <!-- named queue -->
+...
+<h:form ... >
+ <a4j:queue ... /><!-- form-based queue-->
+ <a4j:commandButton ... /> <!-- uses the form-based queue -->
+ <a4j:commandButton eventsQueue="sampleQueue" /> <!-- uses named queue -->
+</h:form>
+...]]></programlisting>
+ </section>
+
+<section>
+ <title>Queue functionality</title>
+ <para>This section covers some key queue functions.</para>
+ <section>
+ <title>Events Similarity</title>
+ <para>By default, all events raised by the same component are associated with the queue through the <emphasis>Client ID</emphasis> of the event source. This means that when new requests arrive, they are combined with previous requests from the same component. For example, if <literal><a4j:support></literal> is used on an input field and the user adds to the field frequently, all of the requests raised by the <emphasis>key up</emphasis> event during <literal>requestDelay</literal> will be combined into one request.</para>
+ <para>You can also manually specify multiple components which will produce similar requests. The <varname>similarityGroupingId</varname> attribute is included in all AJAX action components in version 3.3.0. This means that you can add two <literal><a4j:support></literal> components to the input (one for key up and the other for blur), and define that request events are similar by specifying the same <varname>similarityGroupingId</varname>.</para>
+ </section>
+ <section>
+ <title>Similar requests during request delay</title>
+ <para>As mentioned in the previous section, requests are collected in the queue during <literal>requestDelay</literal> and similar requests are combined. However, to avoid blocking the queue or changing the request order, similar requests can only be combined when they are raised sequentially.</para>
+ <para>
+ For example, say that a request with some delay, A<subscript>1</subscript>, arrives on the queue. Its delay counter is started. If a <emphasis>similar</emphasis> request (that is, from the same component), A<subscript>2</subscript> arrives on the queue, the two requests are combined (A<subscript>1</subscript> and A<subscript>2</subscript> combine into A<subscript>combined</subscript>) and the delay counter is reset.
+ </para>
+ <para>
+ If the non-similar request B<subscript>1</subscript> arrives on the queue, it is placed after the first request (A<subscript>combined</subscript>, B<subscript>1</subscript>). If another request from the A component (A<subscript>3</subscript>) then arrives on the queue before the counter runs out, this request is <emphasis>not</emphasis> combined with the initial A requests. The request is placed after B<subscript>1</subscript> on the queue: A<subscript>combined</subscript>, B<subscript>1</subscript>, A<subscript>3</subscript>.
+ </para>
+ <para>This behavior lets us:</para>
+ <itemizedlist>
+ <listitem><para>maximize similar request throughput,</para></listitem>
+ <listitem><para>send only the latest field's state for similar requests,</para></listitem>
+ <listitem><para>avoid blocking the queue when different request types arrive on the queue and should wait for one another.</para></listitem>
+ </itemizedlist>
+ <para>From version 3.3.0 onward, the <literal><a4j:poll></literal> component has a default delay time of <literal>0</literal>. By default, it does not use the queue delay — its own value for this parameter redefines the queue's parameter. This prevents it from blocking periodic updates on the queue. You can redefine this at the component level if required.</para>
+ </section>
+
+ <section>
+ <title>JavaScript API</title>
+ <table>
+ <title>JavaScript API</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Function</entry>
+ <entry>Description</entry>
+
+ </row>
+ </thead>
+ <tbody>
+ <!--Sorting API -->
+ <row>
+ <entry>getSize()</entry>
+ <entry>Returns the current size to the queue</entry>
+
+ </row>
+ <row>
+ <entry>getMaximumSize()</entry>
+ <entry>Returns the maximum size to the queue, specified in the "size" attribute</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </section>
+</section>
+
+</section>
+ <section id="DataProcessingOptions">
+ <title>Data Processing Options</title>
+ <para>RichFaces takes a form-based approach to sending AJAX requests. This means that each time you click on an AJAX button or the <literal><a4j:poll></literal> produces an asynchronous request, the data from the closest JSF form is submitted with the <literal>XMLHTTPRequest</literal> object. The form data contains the values from the form input element and auxiliary information such as state saving data.</para>
+ <para>When <varname>ajaxSingle</varname> is set to <literal>true</literal>, it includes the value of the current component (plus any <literal><f:param></literal> and <literal><a4j:actionparam></literal> values) in the request map. Any <literal><a4j:support></literal> is included as a value of the parent component, like so:</para>
+ <programlisting role="XML"><![CDATA[...
+<h:form>
+ <h:inputText value="#{person.name}">
+ <a4j:support event="onkeyup" reRender="test" ajaxSingle="true"/>
+ </h:inputText>
+ <h:inputText value="#{person.middleName}"/>
+</form>
+...]]></programlisting>
+ <para>This request contains only the input component that causes request generation, not all of the components on the form, because <code>ajaxSingle="true"</code> is used.</para>
+ <note>
+ <para>
+ <code>ajaxSingle="true"</code> reduces upcoming traffic, but does not prevent the decoding of other server-side input components. Some JSF components, such as <literal><h:selectOneMenu></literal> do recognize the missing data in the request map value as a <literal>null</literal> value, and attempt to pass the validation process with a failed result. Use <literal><a4j:region></literal> where required to limit server-side processing to a particular part of the component tree.
+ </para>
+ </note>
+ <para>
+ The <varname>immediate</varname> attribute indicates that the default <literal>ActionListener</literal> should be executed immediately (that is, during the <emphasis>Apply Request Values phase</emphasis> of the request processing lifecycle), rather than waiting until the <emphasis>Invoke Application</emphasis> phase. <code>immediate="true"</code> lets you update some data model values when problems with the Validation phase mean that other values cannot be updated successfully. This can be important in <literal><h:dataTable></literal>-like components, where using <literal><a4j:region></literal> is impossible due to the <literal><h:dataTable></literal> component architecture.
+ </para>
+ <para>
+ The <varname>bypassUpdates</varname> attribute lets you bypass the <emphasis>Update Model</emphasis> phase. It can be useful to check your input against the available validator without updating the model. Remember that an action will be invoked at the end of the Validation phase only if the Validation phase is passed successfully. In either case, the Application phase listeners will not be invoked.
+ </para>
+ </section>
+ <section id="ActionandNavigation">
+ <title>Action and Navigation</title>
+ <para>AJAX <emphasis>action</emphasis> components are similar to non-AJAX JSF components like <literal><h:commandButton></literal>. They let you submit the form. You can use <varname>action</varname> and <varname>actionListener</varname> attributes to invoke the action method and define the action event.</para>
+ <para>The <varname>action</varname> method must return <literal>null</literal> for your AJAX response to have a partial page update. (This is known as <emphasis>AJAX request generates Non-AJAX Response</emphasis> mode.) If the action does not return null, but the action outcome matches one of the navigation rules, RichFaces works in <!--#modify Check mode please; sounded as if a different mode was intended, here.--><emphasis>AJAX request generates Non-AJAX Response</emphasis> mode, which can be useful in two major cases:</para>
+ <itemizedlist>
+ <listitem>
+ <para>RichFaces lets you organize page flow within the <literal><a4j:include></literal> component. (This is typical of Wizard-like behavior.) New content is rendered inside the <literal><a4j:include></literal> area. Content is taken from the navigation rule of the Faces configuration file (usually <filename>faces-config.xml</filename>). Note that the content of the wizard is not isolated from the rest of the page. The included page should have its own <literal><f:view></literal> defined, regardless of whether facelets are used. You must include an AJAX component inside <literal><a4j:include></literal> to navigate between the wizard pages or a complete page update will be performed.</para>
+ </listitem>
+ <listitem>
+ <para>To involve the server-side validators and navigate to the next page only if the Validation phase is passed successfully, replace <literal><h:commandButton></literal> with <literal> <a4j:commandButton></literal> and point to the action method that navigates to the next page. If validation fails, the partial page update will occur and you will see an error message. Otherwise, the application proceeds to the next page. Be sure to define a <literal><redirect/></literal> option for the navigation rule to avoid memory leaks.</para>
+ </listitem>
+ </itemizedlist>
+ </section>
+ <section id="JavascriptInteractions">
+ <title>JavaScript Interactions</title>
+ <para>RichFaces lets you write AJAX-enabled JSF applications without writing any JavaScript code. However, you can still invoke JavaScript code if required with several helpful AJAX attributes:</para>
+ <para>The <varname>onsubmit</varname> attribute lets you invoke JavaScript code before an AJAX request is sent. If <varname>onsubmit</varname> returns <literal>false</literal>, the AJAX request is canceled. <varname>onsubmit</varname> code is inserted before the RichFaces AJAX call, so if you want the AJAX request to be sent, do not include a <literal>return</literal> statement in <varname>onsubmit</varname>. When invoking a JavaScript function that returns <literal>true</literal> or <literal>false</literal>, use the conditional statement to return something only when you need to cancel the request. For example:</para>
+ <programlisting role="XML"><![CDATA[...
+onsubmit="if (mynosendfunct()==false){return false}"
+...]]></programlisting>
+ <para><varname>onclick</varname> is similar to <varname>onsubmit</varname>, but is used for clickable components such as <literal><a4j:commandLink></literal> and <literal><a4j:commandButton></literal>. If <varname>onclick</varname> returns <literal>false</literal>, the AJAX request is canceled.</para>
+ <para><varname>oncomplete</varname> passes JavaScript that would be invoked immediately after the AJAX response returns and the DOM is updated. We do not recommend using the keyword <literal>this</literal> inside the EL expression, because it will not always point to the component where the AJAX request was initiated.</para>
+ <para>
+ <emphasis>
+ <property>"onbeforedomupdate"</property>
+ </emphasis> attribute defines JavaScript code for call after Ajax response receiving
+ and before updating DOM on a client side. </para>
+ <para>The <varname>data</varname> attribute retrieves additional data from the server during an AJAX call. You can use JSF EL to point to the managed bean's property and its value will be serialized in JSON format and made available on the client side. You can refer to this value with <varname>data</varname>, like so:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:commandButton value="Update" data="#{userBean.name}" oncomplete="showTheName(data.name)" />
+...]]></programlisting>
+ <para>RichFaces lets you serialize primitive and complex data types into JSON format, including arrays and collections. The beans must be serializable before you can refer to them with <varname>data</varname>.</para>
+ <para>There are several useful JavaScript functions available to this attribute:</para>
+ <variablelist>
+ <varlistentry><term><code>rich:clientId('id')</code></term>
+ <listitem>
+ <para>returns the client ID by short ID, or <literal>null</literal> if the component with the specified ID is not found.</para>
+ </listitem>
+ </varlistentry>
+ <varlistentry><term><code>rich:element('id')</code></term>
+ <listitem>
+ <para>a shortcut for <code>document.getElementById(#{rich:clientId('id')}) </code></para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>rich:component('id')</code></term>
+ <listitem>
+ <para>a shortcut for <code>#{rich:clientId('id')}.component</code></para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>rich:findComponent('id')</code></term>
+ <listitem>
+ <para>returns an instance of <literal>UIComponent</literal> that takes the short ID of the component as a parameter.</para>
+ <programlisting role="XML"><![CDATA[...
+<h:inputText id="myInput">
+ <a4j:support event="onkeyup" reRender="outtext"/>
+</h:inputText>
+<h:outputText id="outtext" value="#{rich:findComponent('myInput').value}" />
+...]]></programlisting>
+ </listitem>
+ </varlistentry>
+ </variablelist>
+ </section>
+ <section id="IterationcomponentsAjaxattributes">
+ <title>Iteration components Ajax attributes</title>
+ <para><varname>ajaxKeys</varname> defines strings that are updated after an AJAX request. This makes it possible to update several child components separately without updating the entire 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="Otherusefulattributes">
+ <title>Other useful attributes</title>
+ <para>The <varname>status</varname> attribute for AJAX components (<literal><a4j:commandButton></literal> , <literal><a4j:poll></literal> , etc.) points to an ID of the <literal><a4j:status></literal> component. Use this attribute to share the <literal><a4j:status></literal> component between different AJAX components from different regions. For example:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:region id="extr">
+ <h:form>
+ <h:outputText value="Status:" />
+ <a4j:status id="commonstatus" startText="In Progress...." stopText=""/>
+ <h:panelGrid columns="2">
+ <h:outputText value="Name"/>
+ <h:inputText id="name" value="#{userBean.name}">
+ <a4j:support event="onkeyup" reRender="out" />
+ </h:inputText>
+ <h:outputText value="Job"/>
+ <a4j:region id="intr">
+ <h:inputText id="job" value="#{userBean.job}">
+ <a4j:support event="onkeyup" reRender="out" status="commonstatus"/>
+ </h:inputText>
+ </a4j:region>
+ </h:panelGrid>
+ <a4j:region>
+ <h:outputText id="out" value="Name: #{userBean.name}, Job: #{userBean.job}" />
+ <br />
+ <a4j:commandButton ajaxSingle="true" value="Clean Up Form" reRender="name, job, out" status="commonstatus">
+ <a4j:actionparam name="n" value="" assignTo="#{userBean.name}" />
+ <a4j:actionparam name="j" value="" assignTo="#{userBean.job}" />
+ </a4j:commandButton>
+ </a4j:region>
+ </h:form>
+</a4j:region>
+...]]></programlisting>
+ <para>In the example, <literal><a4j:support></literal> and <literal><a4j:commandButton></literal> are defined in different regions. The value of the <varname>status</varname> attribute for these components points to an ID of <literal><a4j:support></literal>, so the <literal><a4j:support></literal> component is shared between two components from different regions.</para>
+ <para>You can find more information in the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?c=status"> RichFaces Live Demo</ulink>.</para>
+ <para>The <varname>focus</varname> attribute points to the ID of a component where the focus will be set following an AJAX request.</para>
+ </section>
+ </section>
+ <section id="HowTo...">
+ <title>How To...</title>
+ <section id="SendAnAJAXRequest">
+ <title>Send an AJAX request</title>
+ <para>There are several different ways to send an AJAX request from your JSF page. You can use <literal><a4j:commandButton></literal> , <literal><a4j:commandLink></literal>, <literal><a4j:poll></literal>, or <literal><a4j:support></literal> tags, among others.</para>
+ <para>Each of these tags hides the normal JavaScript activities required to build <literal>XMLHTTPRequest</literal> objects and send AJAX requests. They also let you decide which components of your JSF page will be rerendered as a result of the AJAX response. (You can list the IDs of these components in the <varname>reRender</varname> attribute.)</para>
+ <para><literal><a4j:commandButton></literal> and <literal><a4j:commandLink></literal> tags are used to send an AJAX request upon the <literal>onclick</literal> JavaScript event. </para>
+ <para>The <literal><a4j:poll></literal> tag is used to send an AJAX request periodically using a timer.</para>
+ <para>The <literal><a4j:support></literal> tag lets you add AJAX functions to standard JSF components and send an AJAX request upon a selected JavaScript event: <literal>onkeyup</literal>, <literal>onmouseover</literal>, etc.</para>
+ <!--para>Most important attributes of components that provide Ajax request calling features are:</para>
+ <itemizedlist>
+ <listitem>
+ <emphasis>
+ <property>"reRender"</property>
+ </emphasis>attribute as it was mentioned <link linkend="SendAnAJAXRequest">before</link>
+ specifies components to be reRendered after Ajax response. The attribute can be specified
+ using EL expression and formed dynamicaly on the server side (see <ulink
+ url="index.html#FAQ">FAQ chapter</ulink>). </listitem>
+ <listitem>
+ <emphasis>
+ <property>"RequestDelay"</property>
+ </emphasis> attribute is used for a requests frequency regulation. </listitem>
+ </itemizedlist>
+ <programlisting role="XML"><![CDATA[<h:inputText size="50" value="#{bean.text}">
+ <a4j:support event="onkeyup" RequestDelay="3"/>
+ </h:inputText>]]></programlisting>
+ <para>So every next request from the frequent keyboard events will be delayed on 3 ms to
+ reduce the number of requests. </para>
+ <itemizedlist>
+ <listitem>
+ <emphasis>
+ <property>"EventsQueue"</property>
+ </emphasis> is a queue that stores the next request. </listitem>
+ <listitem>
+ <emphasis>
+ <property>"LimitToList"</property>
+ </emphasis> attribute is used to regulate updatable regions. Setting it to true limits the
+ updatable areas only to ones specified in a reRender list, in other case all Output Panels
+ of the region are updated. </listitem>
+ <listitem>
+ <emphasis>
+ <property>"ajaxSingle"</property>
+ </emphasis> attributes specify regions to be sent with a request, if
+ "false" it is a full region, in other case it's is only a
+ control caused event. </listitem>
+
+ <listitem>
+ <emphasis>
+ <property>"timeout"</property>
+ </emphasis>attribute is used for response waiting time on a particular request. If a
+ response is not received during this time, the request is aborted. </listitem>
+
+ <listitem>
+ <emphasis>
+ <property>"ignoreDupResponses"</property>
+ </emphasis> is used to abort unfinished request on new event. </listitem>
+ </itemizedlist-->
+ </section>
+ <section id="DecideWhatToSend">
+ <title>Decide What to Send</title>
+ <para>You can describe a region on the page to send to the server. This gives you control over which part of the JSF view is decoded on the server side when you send an AJAX request.</para>
+ <para>The easiest way to describe an AJAX region on your JSF page is to do nothing, because the content between the <literal><f:view></literal> and <literal></f:view></literal> tags is considered the default AJAX region.</para>
+ <para>You can define multiple AJAX regions on the JSF page by using the <literal><a4j:region></literal> tag.</para>
+ <para>To render the content of an AJAX response outside the active region, set the value of the <varname>renderRegionOnly</varname> attribute to <literal>false</literal> (the default value). Otherwise, your AJAX updates are limited to the elements in the active region.</para>
+ </section>
+ <section id="DecideWhatToChange">
+ <title>Decide What to Change</title>
+ <para>You cannot use IDs in <varname>reRender</varname> to define <emphasis>AJAX zones</emphasis> if your page contains, for example, a <literal><f:verbatim></literal> tag and you want to update its contents upon an AJAX response.</para>
+ <para>This is related to the value of the <literal>transientFlag</literal> of JSF components. If <literal>transientFlag</literal> is <literal>true</literal>, the component must not participate in any state saving or restoring process.</para>
+ <para>To work around this problem, RichFaces uses an <emphasis>output panel</emphasis> defined by the <literal><a4j:outputPanel></literal> tag. If you put a <literal><f:verbatim></literal> tag in the output panel, the content of the <literal><f:verbatim></literal> tag and the other panel's child tags may be updated upon AJAX response. There are two ways to control this:</para>
+ <itemizedlist>
+ <listitem>
+ <para> By setting the <varname>ajaxRendered</varname> attribute value to <literal>true</literal>.</para>
+ </listitem>
+ <listitem>
+ <para>By setting an action component's <varname>reRender</varname> attribute value to the output panel ID.</para>
+ </listitem>
+ </itemizedlist>
+ </section>
+ <section id="process" role="updated">
+ <title>Decide what to process</title>
+ <para>The <varname>process</varname> attribute lets you define the IDs of components that will be processed with the component that is marked as <literal>ajaxSingle</literal> or wrapped to region.</para>
+ <para>You can use <varname>process</varname> when you want to process only two components in different view areas.</para>
+ <para>For example, imagine that you need to process two input fields, but not the whole view. If you wrap the first input field to a region, or make a <literal><a4j:support></literal> component with <code>ajaxSingle="true"</code> nested, the second input will not be processed. </para>
+ <para>A simple solution to this problem is:</para>
+ <programlisting role="XML"><![CDATA[...
+<h:inputText value="#{bean.name}" id="name">
+ <a4j:support ajaxSingle="true" process="email" event="onblur" reRender="someOut"/>
+</h:inputText>
+<h:inputTextarea value="#{bean.description}" id="desc" />
+<h:inputText value="#{bean.email}" id="email">
+ <a4j:support ajaxSingle="true" process="name" event="onblur" reRender="someOut"/>
+</h:inputText>
+...]]></programlisting>
+ <para>When the <code>id="name"</code> input field loses focus, an AJAX request is sent. Therefore, only two input fields (<code>id="name"</code> and <code>id="email"</code>) are processed. Decoding, conversion/validation, and value applying phases are all executed. The <code>id="email"</code> input field is handled the same way upon a blur event.</para>
+ <!--para>
+ The
+ <emphasis>
+ <property>"process"</property>
+ </emphasis>
+ attribute has two limitations:
+ </para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ it works only if
+ <emphasis>
+ <property>"ajaxSingle"</property>
+ </emphasis>
+ equals to "true" for given command component
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ you do not have to point this attribute to one
+ of the own parent components to avoid processing
+ of command component twice
+ </para>
+ </listitem>
+ </itemizedlist>
+ <para>
+ <emphasis>Example:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<h:form>
+ <h:inputText id="oneA" value="#{bean.width}"/>
+ <br/>
+ <h:inputText id="oneB" value="#{bean.text}"/>
+ <br/>
+ <a4j:commandButton value="Submit2" process="oneB" ajaxSingle="true" reRender=":three1, :three2"/>
+</h:form>
+<h:outputText id="three1" value="#{bean.width}"/>
+ <br/>
+<h:outputText id="three2" value="#{bean.text}"/>
+...]]></programlisting>
+ <para>
+ In the example above after you click on the
+ <emphasis>
+ <property><a4j:commandButton></property>
+ </emphasis>
+ <property>only</property>
+ <emphasis>
+ <property><h:inputText></property>
+ </emphasis>
+ with
+ <code>"oneB"</code>
+ id is processed and entered data appears into the
+ <emphasis>
+ <property><h:outputText></property>
+ </emphasis>
+ with
+ <code>"three2"</code>
+ id. If you doesn't use this attribute
+ <property>both</property>
+ <emphasis>
+ <property><h:inputText></property>
+ </emphasis>
+ is processed and entered data appears into the
+ <property>both</property>
+ <emphasis>
+ <property><h:outputText></property>
+ </emphasis>
+ .
+ </para-->
+ </section>
+ </section>
+ <section id="FilterConfiguration">
+ <title>Filter Configuration</title>
+ <para>RichFaces uses a filter to correct code received in an AJAX request. In a <emphasis>regular</emphasis> JSF request, a browser makes corrections independently. In an AJAX request, a filter is required to prevent layout destruction, because received code could differ from code that has been validated by a browser, and the browser makes no corrections.</para>
+ <para>You can set a filter in your application's <filename>web.xml</filename>:</para>
+ <programlisting role="XML"><![CDATA[...
+<filter>
+ <display-name>RichFaces Filter</display-name>
+ <filter-name>richfaces</filter-name>
+ <filter-class>org.ajax4jsf.Filter</filter-class>
+</filter>
+...]]></programlisting>
+ <note>
+ <para>Fast Filters are deprecated and available only for backward compatibility with previous versions of RichFaces. Fast Filter usage is not recommended. For a similar function, try the <xref linkend="Neko" />.</para>
+ </note>
+ <para>As of RichFaces 3.2, filter configuration is more flexible. It is possible to configure different filters for different sets of pages for the same application.</para>
+ <para>The available filter types are:</para>
+ <variablelist>
+ <varlistentry><term>TIDY</term>
+ <listitem>
+ <para>Based on the Tidy parser. We recommend this filter for applications with complicated or non-standard markup where all necessary code corrections are made by the filter when a response is returned from the server.</para>
+ </listitem>
+ </varlistentry>
+ <varlistentry id="Neko"><term>NEKO</term>
+ <listitem>
+ <para>Replaces the previously-used <emphasis>Fast Filter</emphasis>, and is based on the Neko parser. Use this filter only where your application's markup code is strictly verified. Code that is not strictly verified can cause a number of errors and corrupt layouts when used with the Neko filter. This filter accelerates all AJAX request processing considerably.</para>
+ </listitem>
+ </varlistentry>
+ <varlistentry><term>NONE</term>
+ <listitem>
+ <para>No correction.</para>
+ </listitem>
+ </varlistentry>
+ </variablelist>
+ <para>The following is an example configuration:</para>
+ <programlisting role="XML">
+<![CDATA[...
+<context-param>
+ <param-name>org.ajax4jsf.xmlparser.ORDER</param-name>
+ <param-value>NONE,NEKO,TIDY</param-value>
+</context-param>
+<context-param>
+ <param-name>org.ajax4jsf.xmlparser.NONE</param-name>
+ <param-value>/pages/performance\.xhtml,/pages/default.*\.xhtml</param-value>
+</context-param>
+<context-param>
+ <param-name>org.ajax4jsf.xmlparser.NEKO</param-name>
+ <param-value>/pages/repeat\.xhtml</param-value>
+</context-param>
+<filter>
+ <display-name>RichFaces Filter</display-name>
+ <filter-name>richfaces</filter-name>
+ <filter-class>org.ajax4jsf.Filter</filter-class>
+</filter>
+<filter-mapping>
+ <filter-name>richfaces</filter-name>
+ <servlet-name>Faces Servlet</servlet-name>
+ <dispatcher>FORWARD</dispatcher>
+ <dispatcher>REQUEST</dispatcher>
+ <dispatcher>INCLUDE</dispatcher>
+</filter-mapping>
+...]]>
+ </programlisting>
+ <para>This example shows that the <literal>ORDER</literal> parameter defines the order in which particular filter types are used for code correction.</para>
+ <para>First, the <literal>NONE</literal> type is specified for the filter. Then two different page sets are defined for two different, corresponding filter types (<literal>NONE</literal> and <literal>NEKO</literal>). The first set is defined like so:</para>
+<programlisting role="XML"><![CDATA[<param-value>/pages/performance\.xhtml,/pages/default.*\.xhtml</param-value>]]></programlisting>
+ <para>If a page relates to this definition, it is not corrected because the filter type for this page set is defined as <literal>NONE</literal>. If a page is not from the first set, then the <literal>NEKO</literal> filter type is used.</para>
+ <para>The second set is defined as follows:</para>
+<programlisting role="XML"><![CDATA[<param-value>/pages/repeat\.xhtml</param-value>]]></programlisting>
+ <para>If the page set relates to this definition, the <literal>NEKO</literal> filter type is used for correction. If the page is not related to this second set, the <literal>TIDY</literal> filter type is set for code correction.</para>
+ </section>
+ <section id="ScriptsandStylesLoadStrategy" role="updated">
+ <title>Scripts and Styles Load Strategy</title>
+ <para>Prior to RichFaches 3.1.3, styles and script were loaded on demand (that is, files were loaded only if they were required on a particular page). From version 3.1.3 onward, you can manage how the RichFaces script and styles are loaded to the application.</para>
+ <formalpara>
+ <title><literal>org.richfaces.LoadScriptStrategy</literal></title>
+ <para>Declare the following in your <filename>web.xml</filename> to enable loading integrated script files.</para>
+ </formalpara>
+<programlisting role="XML"><![CDATA[...
+<context-param>
+ <param-name>org.richfaces.LoadScriptStrategy</param-name>
+ <param-value>ALL</param-value>
+</context-param>
+...]]></programlisting>
+ <para>If you do not declare <literal>org.richfaces.LoadScriptStrategy</literal> in the <filename>web.xml</filename>, it will default to the following:</para>
+ <programlisting role="XML"><![CDATA[...
+<context-param>
+ <param-name>org.richfaces.LoadScriptStrategy</param-name>
+ <param-value>DEFAULT</param-value>
+</context-param>
+...]]></programlisting>
+ <para>The third possible value is <literal>NONE</literal>. There is no reason to use this unless you obtain a modified version of the script and want to include it manually in a page header.</para>
+ <warning>
+ <para>Using the <literal>ALL</literal> value of the <literal>LoadScriptStrategy</literal> disables JavaScript file compression.</para>
+ <!--programlisting role="XML"><![CDATA[...
+ <context-param>
+ <param-name>org.ajax4jsf.COMPRESS_SCRIPT</param-name>
+ <param-value>false</param-value>
+ </context-param>
+ ...
+ ]]></programlisting-->
+ </warning>
+ <formalpara>
+ <title><literal>org.richfaces.LoadStyleStrategy</literal></title>
+ <para>The following declaration allows only one integrated style sheet file to be loaded:</para></formalpara>
+ <programlisting role="XML"><![CDATA[...
+<context-param>
+ <param-name>org.richfaces.LoadStyleStrategy</param-name>
+ <param-value>ALL</param-value>
+</context-param>
+...]]></programlisting>
+ <para>The integrated style sheet contains style information for all shipped components. (Skins can still be used.)</para>
+ <para>The <literal>DEFAULT</literal> value is a classical on-demand variant.</para>
+ <para><literal>NONE</literal> prevents the styles from loading at all. The earlier introduced <emphasis>plain skin</emphasis> resets all color and font parameters to <literal>null</literal>. The <literal>NONE</literal> value for <literal>org.richfaces.LoadStyleStrategy</literal> means that predefined styles for RichFaces are not used. </para>
+ <para>For more information, see the <ulink url="http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4114033">RichFaces User Forum</ulink>.</para>
+ </section>
+ <section id="RequestErrorsAndSessionExpirationHandling">
+ <title>Request Errors and Session Expiration Handling</title>
+ <para>RichFaces lets you redefine the standard handlers responsible for processing exceptions. We recommend defining your own JavaScript, which will be executed when exceptional situations occur.</para>
+ <para>Add the following code to <filename>web.xml</filename>: </para>
+ <programlisting role="XML"><![CDATA[<context-param>
+ <param-name>org.ajax4jsf.handleViewExpiredOnClient</param-name>
+ <param-value>true</param-value>
+</context-param>]]>
+ </programlisting>
+ <section id="RequestErrorsHandling">
+ <title>Request Errors Handling</title>
+ <para>To execute your own code on the client in the event of an error during an AJAX request, you must redefine the standard <literal>A4J.AJAX.onError</literal> method like so:</para>
+ <programlisting role="JAVA"><![CDATA[ A4J.AJAX.onError = function(req, status, message){
+ window.alert("Custom onError handler "+message);
+}]]></programlisting>
+ <para>This function accepts the following as parameters:</para>
+ <variablelist>
+ <varlistentry><term><literal>req</literal></term>
+ <listitem>
+ <para>a parameter string of a request that calls an error</para>
+ </listitem>
+ </varlistentry>
+ <varlistentry><term><literal>status</literal></term>
+ <listitem>
+ <para>
+ the number of an error returned by the server</para>
+ </listitem>
+ </varlistentry>
+ <varlistentry><term><literal>message</literal></term>
+ <listitem>
+ <para>
+ a default message for the given error</para>
+ </listitem>
+ </varlistentry>
+ </variablelist>
+ <para>Therefore, you can create your own handler that is called when timeouts, internal server errors, etc. occur.</para>
+ </section>
+ <section id="SessionExpiredHandling">
+ <title>Session Expired Handling</title>
+ <para>You can also redefine the <literal>onExpired</literal> framework method that is called on the <literal>SessionExpiration</literal> event.</para>
+ <para>
+ <emphasis>Example:</emphasis>
+ </para>
+ <programlisting role="JAVA">
+<![CDATA[A4J.AJAX.onExpired = function(loc, expiredMsg){
+ if(window.confirm("Custom onExpired handler "+expiredMsg+" for a location: "+loc)){
+ return loc;
+ } else {
+ return false;
+ }
+}]]></programlisting>
+ <para>This function can take the following parameters:</para>
+ <variablelist>
+ <varlistentry><term><literal>loc</literal></term>
+ <listitem>
+ <para>the URL of the current page (can be updated on demand)</para>
+ </listitem>
+ </varlistentry>
+ <varlistentry><term><literal>expiredMsg</literal></term>
+ <listitem>
+ <para>a default message for display in the event of <literal>SessionExpiration</literal>. </para>
+ </listitem>
+ </varlistentry>
+ </variablelist>
+ <note>
+ <para>Customized <literal>onExpire</literal> handlers do not work under MyFaces. MyFaces handles exceptions by internally generating a debug page. To prevent this behavior, use the following:</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>
+ <!--note>
+ <title>Note:</title>
+ Until the version 1.0.5 the method can't be redefined on <emphasis >
+ <property>"Session Expiration"</property>,
+ </emphasis> a confirmation dialog with a request for view reloading was always called.
+ </note-->
+ </section>
+ </section>
+ <section id="Skinnability">
+ <title>Skinnability</title>
+ <section id="WhySkinnability">
+ <title>Why Skinnability</title>
+ <para>If you look at any CSS (Cascading Style Sheets) file in an enterprise application, you will notice how often the same color is noted. Standard CSS cannot define a particular colour abstractly as a panel header color, the background color of an active pop-up menu item, a separator color, etc. To define common interface styles, you must copy the same value multiple times, and the more interfaces you have, the more repetition is required.</para>
+ <para>Therefore, if you want to change the palette of an application, you must change all interrelating values, or your interface can appear clumsy. If a customer wants to be able to adjust their interface's look and feel in real time, you must be able to alter several CSS files, each of which will contain the same value multiple times.</para>
+ <para>You can solve these problems with the <emphasis>skins</emphasis> that are built into and rully implemented in RichFaces. Every named skin has <emphasis>skin parameters</emphasis> that define a palette and other attributes of the user interface. By changing a few skin parameters, you can alter the appearance of dozens of components simultaneously, without interfering with interface consistency.</para>
+ <para>The <literal>skinnability</literal> feature cannot completely replace standard CSS, and does not eliminate its usage. Instead, it is a high-level extension of standard CSS that can be used in combination with regular CSS declarations. You can also refer to skin parameters in CSS through the JSF Expression Language. This lets you completely synchronize the appearance of all elements in your pages.</para>
+ </section>
+ <section id="UsingSkinnability">
+ <title>Using Skinnability</title>
+ <para>RichFaces <emphasis>skinnability</emphasis> is designed for use alongside:</para>
+ <itemizedlist>
+ <listitem>
+ <para>skin parameters defined in the RichFaces framework,</para>
+ </listitem>
+ <listitem>
+ <para>predefined CSS classes for components, and</para>
+ </listitem>
+ <listitem>
+ <para>user style classes.</para>
+ </listitem>
+ </itemizedlist>
+ <para>A component's color scheme can be applied to its elements using any of three style classes:</para>
+ <itemizedlist>
+ <listitem>
+ <formalpara>
+ <title>A default style class inserted into the framework </title>
+ <para>This contains stle parameters that are linked to some constants from a skin. It is defined for every component and specifies a default level of representation. You can modify an application interface by changing the values of the skin parameters.</para>
+ </formalpara>
+ </listitem>
+ <listitem>
+ <formalpara>
+ <title>A style class of skin extension</title>
+ <para>This class name is defined for every component element, and inserted into the framework to let you define a class with the same name in your CSS files. This lets you easily extend the appearance of all components that use this class.</para>
+ </formalpara>
+ </listitem>
+ <listitem>
+ <formalpara>
+ <title>User style class</title>
+ <para>You can use one of the <literal>styleClass</literal> parameters to define your own class for component elements. As a result, the appearance of one particular component is changed according to a CSS style parameter specified in the class.</para>
+ </formalpara>
+ </listitem>
+ </itemizedlist>
+ </section>
+ <section id="Example">
+ <title>Example</title>
+ <para>The following is an example of a simple <emphasis>panel</emphasis> component:</para>
+ <programlisting role="XML"><![CDATA[<rich:panel> ... </rich:panel>]]>
+ </programlisting>
+ <para>This code generates a panel component on a page, which consists of two elements: a wrapper <literal><div></literal> element and a <literal><div></literal> element for the panel body with the specified style properties. The wrapper <literal><div></literal> element will look like this: </para>
+ <programlisting role="XML"><![CDATA[<div class="dr-pnl rich-panel">
+ ...
+</div>]]></programlisting>
+ <para><literal>dr-pnl</literal> is a CSS class that is specified in the framework via skin parameters:</para>
+ <itemizedlist>
+ <listitem>
+ <para><varname>background-color</varname> is defined with <literal>generalBackgroundColor</literal></para>
+ </listitem>
+ <listitem>
+ <para><varname>border-color</varname> is defined with <literal>panelBorderColor</literal></para>
+ </listitem>
+ </itemizedlist>
+ <para>You can change all colors for all panels on all pages by changing these skin parameter values. However, if you specify a <literal><rich:panel></literal> class on the page, its parameters are also acquired by all panels on this page.</para>
+ <para>Developers can also change the style properties for panel. For example:</para>
+ <programlisting role="XML"><![CDATA[<rich:panel styleClass="customClass" />]]></programlisting>
+ <para>The previous definition could add some style properties from <literal>customClass</literal> to one particular panel. As a result, we will get three styles:</para>
+ <programlisting role="XML">
+<![CDATA[<div class="dr_pnl rich-panel customClass">
+ ...
+</div>]]>
+ </programlisting>
+ </section>
+ <section id="SkinParametersTablesInRichFaces">
+ <title>Skin Parameters Tables in RichFaces</title>
+ <para>RichFaces provides eight predefined skin parameters (skins) at the simplest level of common customization: </para>
+ <itemizedlist>
+ <listitem>
+ <para>DEFAULT</para>
+ </listitem>
+ <listitem>
+ <para>plain</para>
+ </listitem>
+ <listitem>
+ <para>emeraldTown</para>
+ </listitem>
+ <listitem>
+ <para>blueSky</para>
+ </listitem>
+ <listitem>
+ <para>wine</para>
+ </listitem>
+ <listitem>
+ <para>japanCherry</para>
+ </listitem>
+ <listitem>
+ <para>ruby</para>
+ </listitem>
+ <listitem>
+ <para>classic</para>
+ </listitem>
+ <listitem>
+ <para>deepMarine</para>
+ </listitem>
+ </itemizedlist>
+ <para>To apply a skin, you must specify a skin name in the <varname>org.richfaces.SKIN</varname> context parameter.</para>
+ <para>The following table shows the values for each parameter in the <literal>blueSky</literal> skin:</para>
+ <table>
+ <title>Colors</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Parameter name</entry>
+ <entry>Default value</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>headerBackgroundColor</entry>
+ <entry>#BED6F8</entry>
+ </row>
+ <row>
+ <entry>headerGradientColor</entry>
+ <entry>#F2F7FF</entry>
+ </row>
+ <row>
+ <entry>headTextColor</entry>
+ <entry>#000000</entry>
+ </row>
+ <row>
+ <entry>headerWeightFont</entry>
+ <entry>bold</entry>
+ </row>
+ <row>
+ <entry>generalBackgroundColor</entry>
+ <entry>#FFFFFF</entry>
+ </row>
+ <row>
+ <entry>generalTextColor</entry>
+ <entry>#000000</entry>
+ </row>
+ <row>
+ <entry>generalSizeFont</entry>
+ <entry>11px</entry>
+ </row>
+ <row>
+ <entry>generalFamilyFont</entry>
+ <entry>Arial, Verdana, sans-serif</entry>
+ </row>
+ <row>
+ <entry>controlTextColor</entry>
+ <entry>#000000</entry>
+ </row>
+ <row>
+ <entry>controlBackgroundColor</entry>
+ <entry>#FFFFFF</entry>
+ </row>
+ <row>
+ <entry>additionalBackgroundColor</entry>
+ <entry>#ECF4FE</entry>
+ </row>
+ <row>
+ <entry>shadowBackgroundColor</entry>
+ <entry>#000000</entry>
+ </row>
+ <row>
+ <entry>shadowOpacity</entry>
+ <entry>1</entry>
+ </row>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>#BED6F8</entry>
+ </row>
+ <row>
+ <entry>subBorderColor</entry>
+ <entry>#FFFFFF</entry>
+ </row>
+ <row>
+ <entry>tabBackgroundColor</entry>
+ <entry>#C6DEFF</entry>
+ </row>
+ <row>
+ <entry>tabDisabledTextColor</entry>
+ <entry>#8DB7F3</entry>
+ </row>
+ <row>
+ <entry>trimColor</entry>
+ <entry>#D6E6FB</entry>
+ </row>
+ <row>
+ <entry>tipBackgroundColor</entry>
+ <entry>#FAE6B0</entry>
+ </row>
+ <row>
+ <entry>tipBorderColor</entry>
+ <entry>#E5973E</entry>
+ </row>
+ <row>
+ <entry>selectControlColor</entry>
+ <entry>#E79A00</entry>
+ </row>
+ <row>
+ <entry>generalLinkColor</entry>
+ <entry>#0078D0</entry>
+ </row>
+ <row>
+ <entry>hoverLinkColor</entry>
+ <entry>#0090FF</entry>
+ </row>
+ <row>
+ <entry>visitedLinkColor</entry>
+ <entry>#0090FF</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Fonts</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Parameter name</entry>
+ <entry>Default value</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>headerSizeFont</entry>
+ <entry>11px</entry>
+ </row>
+ <row>
+ <entry>headerFamilyFont</entry>
+ <entry>Arial, Verdana, sans-serif</entry>
+ </row>
+ <row>
+ <entry>tabSizeFont</entry>
+ <entry>11px</entry>
+ </row>
+ <row>
+ <entry>tabFamilyFont</entry>
+ <entry>Arial, Verdana, sans-serif</entry>
+ </row>
+ <row>
+ <entry>buttonSizeFont</entry>
+ <entry>11px</entry>
+ </row>
+ <row>
+ <entry>buttonFamilyFont</entry>
+ <entry>Arial, Verdana, sans-serif</entry>
+ </row>
+ <row>
+ <entry>tableBackgroundColor</entry>
+ <entry>#FFFFFF</entry>
+ </row>
+ <row>
+ <entry>tableFooterBackgroundColor</entry>
+ <entry>#cccccc</entry>
+ </row>
+ <row>
+ <entry>tableSubfooterBackgroundColor</entry>
+ <entry>#f1f1f1</entry>
+ </row>
+ <row>
+ <entry>tableBorderColor</entry>
+ <entry>#C0C0C0</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <para>The <literal>plain</literal> skin was added in version 3.0.2. It has no parameters, and is important when embedding RichFaces components into existing projects with their own styles.</para>
+ <!--<para>For detailed information about possible values for a particular parameter, see <xref linkend="RichFacesComponentLibrary" />, where each component's skin parameters are described according to their elements.</para>-->
+ </section>
+ <section id="CreatingAndUsingYourOwnSkinFile">
+ <title>Creating and Using Your Own Skin File</title>
+ <para>To create your own skin file:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Create a file. In it, define skin constants to be used by style classes (see <xref linkend="SkinParametersTablesInRichFaces" />). The name of the skin file should follow this format: <literal><name>.skin.properties</literal>. (For examples of this file, see the RichFaces predefined skin parameters: <literal>blueSky</literal>, <literal>classic</literal>, <literal>deepMarine</literal>, etc. These files are located in the <filename>richfaces-impl-xxxxx.jar</filename> archive in the <filename>/META-INF/skins</filename> folder.</para>
+ </listitem>
+ <listitem>
+ <para>Add the skin definition <literal><contex-param></literal> to the <filename>web.xml</filename> of your application, like so: </para>
+ <programlisting role="XML"><![CDATA[...
+<context-param>
+ <param-name>org.richfaces.SKIN</param-name>
+ <param-value>name</param-value>
+</context-param>
+...]]></programlisting>
+ </listitem>
+ <listitem>
+ <para>Place your <literal><name>.skin.properties</literal> file in either your <filename>/META-INF/skins</filename> or <filename>/WEB-INF/classes</filename> directory.</para>
+ </listitem>
+ </itemizedlist>
+
+ </section>
+ <section id="BuiltInSkinnability">
+ <title>Built-in Skinnability in RichFaces</title>
+ <para>RichFaces lets you incorporate skins into your user interface (UI) design. This framework lets you use named skin parameters in your properties files to control skin appearance consistently across a set of components. You can see examples of predefined skins at: <ulink url="http://livedemo.exadel.com/richfaces-demo/">http://livedemo.exadel.com/richfaces-demo/ </ulink></para>
+ <para>Skins let you define a style in which to render standard JSF components and custom JSF components built with RichFaces. You can experiment with skins by following these steps:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Create a custom render kit and register it in the <filename>faces-config.xml</filename> like so:</para>
+ <programlisting role="XML"><![CDATA[<render-kit>
+ <render-kit-id>NEW_SKIN</render-kit-id>
+ <render-kit-class>org.ajax4jsf.framework.renderer.ChameleonRenderKitImpl</render-kit-class>
+</render-kit>]]></programlisting>
+ </listitem>
+ <listitem>
+ <para>Next, create and register custom renderers for the component based on the look-and-feel predefined variables:</para>
+ <programlisting role="XML"><![CDATA[<renderer>
+ <component-family>javax.faces.Command</component-family>
+ <renderer-type>javax.faces.Link</renderer-type>
+ <renderer-class>newskin.HtmlCommandLinkRenderer</renderer-class>
+</renderer>]]></programlisting>
+ </listitem>
+ <listitem>
+ <para>Finally, place a properties file with skin parameters into the class path root. There are two requirements for the properties file:</para>
+ <itemizedlist>
+ <listitem>
+ <para>The file must be named <filename><replaceable>skinName</replaceable>.skin.properties</filename>. In this case, we would call it <literal>newskin.skin.properties</literal>.</para>
+ </listitem>
+ <listitem>
+ <para>The first line in this file should be <literal>render.kit=<replaceable>render-kit-id</replaceable></literal>. In this case, we would use <literal>render.kit=NEW_SKIN</literal>.</para>
+ </listitem>
+ </itemizedlist>
+ </listitem>
+ </itemizedlist>
+ <para>More information about creating custom renderers can be found at: <ulink url="http://java.sun.com/javaee/javaserverfaces/reference/docs/index.html">http://java.sun.com/javaee/javaserverfaces/reference/docs/index.html</ulink>.</para>
+ </section>
+ <section id="ChangeAndModifySkin">
+ <title>Changing skin in runtime</title>
+ <para>You can change skins during runtime by defining the following EL-expression in your <filename>web.xml</filename>.</para>
+ <programlisting role="XML"><![CDATA[<context-param>
+ <param-name>org.richfaces.SKIN</param-name>
+ <param-value>#{skinBean.skin}</param-value>
+</context-param>]]>
+ </programlisting>
+ <para>
+ The <literal>skinBean</literal> code looks like this:
+ </para>
+ <programlisting role="JAVA"><![CDATA[public class SkinBean {
+
+ private String skin;
+
+ public String getSkin() {
+ return skin;
+ }
+ public void setSkin(String skin) {
+ this.skin = skin;
+ }
+}]]></programlisting>
+ <para>You must also set the <varname>skin</varname> property's initial value in the configuration file. To set <literal>classic</literal>:</para>
+ <programlisting role="XML"><![CDATA[<managed-bean>
+ <managed-bean-name>skinBean</managed-bean-name>
+ <managed-bean-class>SkinBean</managed-bean-class>
+ <managed-bean-scope>session</managed-bean-scope>
+ <managed-property>
+ <property-name>skin</property-name>
+ <value>classic</value>
+ </managed-property>
+</managed-bean>]]>
+ </programlisting>
+ <para>You can also change the properties of the default skin. To do so, edit the properties of the default skin. The following shows you example page code:</para>
+ <programlisting role="XML"><![CDATA[<h:form>
+ <div style="display: block; float: left">
+ <h:selectOneRadio value="#{skinBean.skin}" border="0" layout="pageDirection" title="Changing skin" style="font-size: 8; font-family: comic" onchange="submit()">
+ <f:selectItem itemLabel="plain" itemValue="plain" />
+ <f:selectItem itemLabel="emeraldTown" itemValue="emeraldTown" />
+ <f:selectItem itemLabel="blueSky" itemValue="blueSky" />
+ <f:selectItem itemLabel="wine" itemValue="wine" />
+ <f:selectItem itemLabel="japanCherry" itemValue="japanCherry" />
+ <f:selectItem itemLabel="ruby" itemValue="ruby" />
+ <f:selectItem itemLabel="classic" itemValue="classic" />
+ <f:selectItem itemLabel="laguna" itemValue="laguna" />
+ <f:selectItem itemLabel="deepMarine" itemValue="deepMarine" />
+ <f:selectItem itemLabel="blueSky Modified" itemValue="blueSkyModify" />
+ </h:selectOneRadio>
+ </div>
+ <div style="display: block; float: left">
+ <rich:panelBar height="100" width="200">
+ <rich:panelBarItem label="Item 1" style="font-family: monospace; font-size: 12;">
+ Changing skin in runtime
+ </rich:panelBarItem>
+
+ <rich:panelBarItem label="Item 2" style="font-family: monospace; font-size: 12;">
+ This is a result of the modification "blueSky" skin
+ </rich:panelBarItem>
+ </rich:panelBar>
+ </div>
+</h:form>]]></programlisting>
+ <para>
+ The above code will generate the following list of options:
+ </para>
+ <figure>
+ <title>Changing skin in runtime</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/ChangeSkinInRuntime.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </section>
+ <section id="StControlsSkinning">
+ <title>Standard Controls Skinning</title>
+ <para>This feature is designed to unify the look and feel of standard HTML elements and RichFaces components. Skinning can be applied to all controls on a page based on element names and attribute types (where applicable). This feature also provides a set of CSS styles that let skins be applied by assigning <literal>rich-*</literal> classes to particular elements, or to a container of elements that nests controls.</para>
+ <para>Standard Controls Skinning provides two levels of skinning: <emphasis>Basic</emphasis> and <emphasis>Extended</emphasis>. The level used depends on the browser type detected. If the browser type cannot be detected, <literal>Extended</literal> is used. However, if you want to explicitly specify the level to be applied, add a <varname></varname> context parameter to your <filename>web.xml</filename> and set the value to either <literal>basic</literal> or <literal>extended</literal>.</para>
+ <itemizedlist>
+ <listitem>
+ <para>The <emphasis>Basic</emphasis> level provides customization for only basic style properties. Basic skinning is applied to the following browsers:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Internet Explorer 6</para>
+ </listitem>
+ <listitem>
+ <para> Internet Explorer 7 in BackCompat mode (see <ulink url="http://msdn2.microsoft.com/en-us/library/ms533687(VS.85).aspx">document.compatMode property in MSDN</ulink>)</para>
+ </listitem>
+ <listitem>
+ <para>Opera</para>
+ </listitem>
+ <listitem>
+ <para>Safari</para>
+ </listitem>
+ </itemizedlist>
+ </listitem>
+ <listitem>
+ <para>
+ The <emphasis>Extended</emphasis> level introduces a broader number of style properties on top of basic skinning, and is applied to browsers with rich visual styling control capabilities. The following browsers support Extended skinning:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Mozilla Firefox</para>
+ </listitem>
+ <listitem>
+ <para> Internet Explorer 7 in Standards-compliant mode (CSS1Compat mode)
+ </para>
+ </listitem>
+ </itemizedlist>
+ </listitem>
+ </itemizedlist>
+ <para>The following elements can be modified with skins:</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <literal>input</literal>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>select</literal>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>textarea</literal>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>keygen</literal>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>isindex</literal>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>legend</literal>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>fieldset</literal>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>hr</literal>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>a</literal> (together with the <literal>a:hover</literal>, <literal>a:visited</literal> pseudo-elements)
+ </para>
+ </listitem>
+ </itemizedlist>
+ <para>There are two ways to initialize skinning for standard HTML controls:</para>
+ <itemizedlist>
+ <listitem>
+ <para>add the <varname>org.richfaces.CONTROL_SKINNING</varname> parameter to <filename>web.xml</filename>. <varname>org.richfaces.CONTROL_SKINNING</varname> takes <literal>enable</literal> and <literal>disable</literal> as parameters. This method implies that skinning style properties are applied per-element and attribute type (where applicable). No additional steps are required. See the <xref linkend="BasicLevel" /> and <xref linkend="ExtendedLevel" /> tables for elements to which skinning can be applied.</para>
+ </listitem>
+ <listitem>
+ <para>add the <varname>org.richfaces.CONTROL_SKINNING_CLASSES</varname> parameter to <filename>web.xml</filename>. <varname>org.richfaces.CONTROL_SKINNING_CLASSES</varname> takes <literal>enable</literal> and <literal>disable</literal> as parameters. When enabled, you are provided with a set of predefined CSS classes to apply skins to your HTML components.</para>
+ </listitem>
+ </itemizedlist>
+ <para>Enabling <varname>org.richfaces.CONTROL_SKINNING_CLASSES</varname> provides you style classes that can be applied to:</para>
+ <itemizedlist>
+ <listitem>
+ <para>basic elements nested within elements with a <emphasis>rich-container</emphasis> class. For example:</para>
+ <programlisting role="CSS"><![CDATA[...
+.rich-container select {
+ //class content
+}
+...]]></programlisting>
+ </listitem>
+ <listitem>
+ <para>Elements with a class name that corresponds to one of the basic element names or types are mapped with the <literal>rich-<elementName>[-<elementType>]</literal> scheme, as in the following example:</para>
+ <programlisting role="CSS"><![CDATA[...
+.rich-select {
+ //class content
+}
+
+.rich-input-text {
+ //class content
+}
+
+...]]></programlisting>
+ <note>
+ <para>Elements are given classes depending upon their <literal>link</literal> type and pseudo-class name, for example, <literal>rich-link</literal>, <literal>rich-link-hover</literal>, <literal>rich-link-visited</literal></para>
+ </note>
+ </listitem>
+ </itemizedlist>
+ <para>The predefined rich CSS classes provided can be used as classes for both basic and complex HTML elements.</para>
+ <para>The following code snippet shows several elements as an example:</para>
+ <programlisting role="XML"><![CDATA[...
+<u:selector name=".rich-box-bgcolor-header">
+ <u:style name="background-color" skin="headerBackgroundColor" />
+</u:selector>
+<u:selector name=".rich-box-bgcolor-general">
+ <u:style name="background-color" skin="generalBackgroundColor" />
+</u:selector>
+...
+//gradient elements
+...
+<u:selector name=".rich-gradient-menu">
+ <u:style name="background-image">
+ <f:resource f:key="org.richfaces.renderkit.html.gradientimages.MenuGradientImage"/>
+ </u:style>
+ <u:style name="background-repeat" value="repeat-x" />
+</u:selector>
+<u:selector name=".rich-gradient-tab">
+ <u:style name="background-image">
+ <f:resource f:key="org.richfaces.renderkit.html.gradientimages.TabGradientImage"/>
+ </u:style>
+ <u:style name="background-repeat" value="repeat-x" />
+</u:selector>
+...]]></programlisting>
+ <para>For a more thorough look at standard component skinning, we recommend exploring the CSS files located in the <filename>ui/core/src/main/resources/org/richfaces/</filename> directory of the RichFaces SVN repository.</para>
+ <section id="BasicLevel" role="NotInToc">
+ <title>Standard Level</title>
+ <table>
+ <title>HTML Element Skin Bindings for input, select, textarea, button, keygen, isindex and legend</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>font-size</entry>
+ <entry>generalSizeFont</entry>
+ </row>
+ <row>
+ <entry>font-family</entry>
+ <entry>generalFamilyFont</entry>
+ </row>
+ <row>
+ <entry>color</entry>
+ <entry>controlTextColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>HTML Element Skin Bindings for fieldset</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>HTML Element Skin Bindings for hr</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>HTML Element Skin Bindings for a</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>generalLinkColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>HTML Element Skin Bindings for a:hover </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry> hoverLinkColorgeneralLinkColor </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>HTML Element Skin Bindings for a:visited </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>visitedLinkColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Elements Skin Bindings for .rich-input, .rich-select,
+ .rich-textarea, .rich-keygen, .rich-isindex, .rich-link </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>font-size</entry>
+ <entry>generalSizeFont</entry>
+ </row>
+ <row>
+ <entry>font-family</entry>
+ <entry>generalFamilyFont</entry>
+ </row>
+ <row>
+ <entry>color</entry>
+ <entry>controlTextColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-fieldset </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-hr </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>border-width</entry>
+ <entry>1px</entry>
+ </row>
+ <row>
+ <entry>border-style</entry>
+ <entry>solid</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-link </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>generalLinkColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-link:hover </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>hoverLinkColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-link:visited </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>visitedLinkColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-field </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin parameters/Value</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-width</entry>
+ <entry>1px</entry>
+ </row>
+ <row>
+ <entry>border-style</entry>
+ <entry>inset</entry>
+ </row>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry>controlBackgroundColor</entry>
+ </row>
+ <row>
+ <entry>background-repeat</entry>
+ <entry>no-repeat</entry>
+ </row>
+ <row>
+ <entry>background-position</entry>
+ <entry>1px 1px</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-field-edit </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-width</entry>
+ <entry>1px</entry>
+ </row>
+ <row>
+ <entry>border-style</entry>
+ <entry>inset</entry>
+ </row>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry>editBackgroundColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-field-error </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-width</entry>
+ <entry>1px</entry>
+ </row>
+ <row>
+ <entry>border-style</entry>
+ <entry>inset</entry>
+ </row>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry>warningBackgroundColor</entry>
+ </row>
+ <row>
+ <entry>background-repeat</entry>
+ <entry>no-repeat</entry>
+ </row>
+ <row>
+ <entry>background-position</entry>
+ <entry>center left</entry>
+ </row>
+ <row>
+ <entry>padding-left</entry>
+ <entry>7px</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-button, .rich-button-disabled,
+ .rich-button-over </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-width</entry>
+ <entry>1px</entry>
+ </row>
+ <row>
+ <entry>border-style</entry>
+ <entry>solid</entry>
+ </row>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry>trimColor</entry>
+ </row>
+ <row>
+ <entry>padding</entry>
+ <entry>2px 10px 2px 10px</entry>
+ </row>
+ <row>
+ <entry>text-align</entry>
+ <entry>center</entry>
+ </row>
+ <row>
+ <entry>cursor</entry>
+ <entry>pointer</entry>
+ </row>
+ <row>
+ <entry>background-repeat</entry>
+ <entry>repeat-x</entry>
+ </row>
+ <row>
+ <entry>background-position</entry>
+ <entry>top left</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-button-press </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>background-position</entry>
+ <entry>bottom left</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-container fieldset, .rich-fieldset </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>border-width</entry>
+ <entry>1px</entry>
+ </row>
+ <row>
+ <entry>border-style</entry>
+ <entry>solid</entry>
+ </row>
+ <row>
+ <entry>padding</entry>
+ <entry>10px</entry>
+ </row>
+ <row>
+ <entry>padding</entry>
+ <entry>10px</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-legend </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>font-size</entry>
+ <entry>generalSizeFont</entry>
+ </row>
+ <row>
+ <entry>font-family</entry>
+ <entry>generalFamilyFont</entry>
+ </row>
+ <row>
+ <entry>color</entry>
+ <entry>controlTextColor</entry>
+ </row>
+ <row>
+ <entry>font-weight</entry>
+ <entry>bold</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> Rich Element Skin Bindings for .rich-form </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>padding</entry>
+ <entry>0px</entry>
+ </row>
+ <row>
+ <entry>margin</entry>
+ <entry>0px</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </section>
+ <section id="ExtendedLevel" role="NotInToc">
+ <title>Extended level</title>
+ <table>
+ <title> HTML Element Skin Bindings for input, select, textarea, button, keygen, isindex </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-width</entry>
+ <entry>1px</entry>
+ </row>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>color</entry>
+ <entry>controlTextColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> HTML Element Skin Bindings for *|button </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>font-size</entry>
+ <entry>generalSizeFont</entry>
+ </row>
+ <row>
+ <entry>font-family</entry>
+ <entry>generalFamilyFont</entry>
+ </row>
+ <row>
+ <entry>color</entry>
+ <entry>headerTextColor</entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry>headerBackgroundColor</entry>
+ </row>
+ <row>
+ <entry>background-image</entry>
+ <entry> org.richfaces.renderkit.html.images.ButtonBackgroundImage
+ </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> HTML Element Skin Bindings for button[type=button], button[type=reset], button[type=submit], input[type=reset], input[type=submit], input[type=button] </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>font-size</entry>
+ <entry>generalSizeFont</entry>
+ </row>
+ <row>
+ <entry>font-family</entry>
+ <entry>generalFamilyFont</entry>
+ </row>
+ <row>
+ <entry>color</entry>
+ <entry>headerTextColor</entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry>headerBackgroundColor</entry>
+ </row>
+ <row>
+ <entry>background-image</entry>
+ <entry> org.richfaces.renderkit.html.images.ButtonBackgroundImage
+ </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> HTML Element Skin Bindings for *|button[disabled], .rich-container
+ *|button[disabled], .rich-button-disabled </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>tabDisabledTextColor</entry>
+ </row>
+ <row>
+ <entry>border-color</entry>
+ <entry> tableFooterBackgroundColor </entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry> tableFooterBackgroundColor </entry>
+ </row>
+ <row>
+ <entry>background-image</entry>
+ <entry>
+ org.richfaces.renderkit.html.images.ButtonDisabledBackgroundImage
+ </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> HTML Element Skin Bindings for .rich-button-disabled, .rich-container
+ button[type="button"][disabled], .rich-button-button-disabled,
+ .rich-container button[type="reset"][disabled],
+ .rich-button-reset-disabled, .rich-container
+ button[type="submit"][disabled], .rich-button-submit-disabled,
+ .rich-container input[type="reset"][disabled],
+ .rich-input-reset-disabled, .rich-container
+ input[type="submit"][disabled], .rich-input-submit-disabled,
+ .rich-container input[type="button"][disabled],
+ .rich-input-button-disabled </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>tabDisabledTextColor</entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry> tableFooterBackgroundColor </entry>
+ </row>
+ <row>
+ <entry>border-color</entry>
+ <entry> tableFooterBackgroundColor </entry>
+ </row>
+ <row>
+ <entry>background-image</entry>
+ <entry>
+ org.richfaces.renderkit.html.images.ButtonDisabledBackgroundImage
+ </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> HTML Element Skin Bindings for
+ *button[type="button"][disabled],
+ button[type="reset"][disabled],
+ button[type="submit"][disabled],
+ input[type="reset"][disabled],
+ input[type="submit"][disabled],
+ input[type="button"][disabled] </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>tabDisabledTextColor</entry>
+ </row>
+ <row>
+ <entry>border-color</entry>
+ <entry> tableFooterBackgroundColor </entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry> tableFooterBackgroundColor </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> HTML Element Skin Bindings for *|textarea </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>font-size</entry>
+ <entry>generalSizeFont</entry>
+ </row>
+ <row>
+ <entry>font-family</entry>
+ <entry>generalFamilyFont</entry>
+ </row>
+ <row>
+ <entry>color</entry>
+ <entry>controlTextColor</entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry>controlBackgroundColor</entry>
+ </row>
+ <row>
+ <entry>background-image</entry>
+ <entry> org.richfaces.renderkit.html.images.InputBackgroundImage
+ </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> HTML Element Skin Bindings for textarea[type=textarea],
+ input[type=text], input[type=password], select </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>border-color</entry>
+ <entry>panelBorderColor</entry>
+ </row>
+ <row>
+ <entry>font-size</entry>
+ <entry>generalSizeFont</entry>
+ </row>
+ <row>
+ <entry>font-family</entry>
+ <entry>generalFamilyFont</entry>
+ </row>
+ <row>
+ <entry>color</entry>
+ <entry>controlTextColor</entry>
+ </row>
+ <row>
+ <entry>background-color</entry>
+ <entry>controlBackgroundColor</entry>
+ </row>
+ <row>
+ <entry>background-image</entry>
+ <entry> org.richfaces.renderkit.html.images.InputBackgroundImage
+ </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> HTML Element Skin Bindings for *|textarea[disabled], .rich-container
+ *|textarea[disabled] </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>tableBorderColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> textarea[type="textarea"][disabled],
+ input[type="text"][disabled],
+ input[type="password"][disabled] </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>tableBorderColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title> textarea[type="textarea"][disabled],
+ input[type="text"][disabled],
+ input[type="password"][disabled] </title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>CSS Properties</entry>
+ <entry>Skin Parameters</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>color</entry>
+ <entry>tableBorderColor</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <note>
+ <para>The basic skinning level can fail if the <literal>ajaxPortlet</literal> is configured as follows:</para>
+ <programlisting role="XML"><![CDATA[...
+<portlet>
+ <portlet-name>ajaxPortlet</portlet-name>
+ <header-content>
+ <script src="/faces/rfRes/org/ajax4jsf/framework.pack.js" type="text/javascript" />
+ <script src="/faces/rfRes/org/richfaces/ui.pack.js" type="text/javascript" />
+ <link rel="stylesheet" type="text/css" href="/faces/rfRes/org/richfaces/skin.xcss" />
+ </header-content>
+</portlet>
+...]]></programlisting>
+ </note>
+ </section>
+ </section>
+ <section>
+ <title>Client-side Script for Extended Skinning Support</title>
+ <para>Extended skinning of standard HTML controls is applied automatically: the browser type is detected, and if a browser does not fully support extended skinning, only basic skinning is applied.</para>
+ <para>There are some problems with standard HTML controls in certain browsers (Opera and Safari) that may cause problems if you wish to skin your RichFaces components and standard HTML controls manually. You can find more information about disabling skinnability in <xref linkend="ScriptsandStylesLoadStrategy" />.</para>
+ <para>To disable skinnability, set the <varname>org.richfaces.LoadStyleStrategy</varname> parameter to <literal>NONE</literal> in your <filename>web.xml</filename> file, like so:</para>
+ <programlisting role="XML"><![CDATA[...
+<context-param>
+ <param-name>org.richfaces.LoadStyleStrategy</param-name>
+ <param-value>NONE</param-value>
+</context-param>
+...]]></programlisting>
+ <para>You should also include the style sheets that apply skins to RichFaces components and standard HTML controls.</para>
+ <para>To work around the problem of extended skinning in Opera and Safari, the <filename>skinning.js</filename> client script is added to the RichFaces library. This detects the browser type and enables extended skinning only for browsers that fully support it.</para>
+ <para>Activate the script by inserting the following JavaScript into your page:</para>
+ <programlisting role="XML"><![CDATA[<script type="text/javascript">
+ window.RICH_FACES_EXTENDED_SKINNING_ON = true;
+</script>]]></programlisting><!--tsuzukeru-->
+ <para>When no script-loading strategy is used and extended skinning is enabled, a warning message appears in the console.</para>
+ <para>You must also specify the <varname>media</varname> attribute in the <literal>link</literal> tag. This adds the <filename>extended_both.xcss</filename> style sheet to <literal>rich-extended-skinning</literal>.</para>
+ <para>To include your style sheets to the page when automatic skinnability is disabled, add the following:</para>
+ <programlisting role="XML"><![CDATA[<link href='/YOUR_PROJECT_NAME/a4j_3_2_2-SNAPSHOTorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' />
+<link media='rich-extended-skinning' href='/ YOUR_PROJECT_NAME /a4j_3_2_2-SNAPSHOTorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' />
+<link href='/ YOUR_PROJECT_NAME /a4j_3_2_2-SNAPSHOT/org/richfaces/skin.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf' type='text/css' rel='stylesheet' class='component' />]]></programlisting>
+ <note>
+ <para>The Base64 encoder now uses <literal>!</literal> instead of <literal>.</literal>, so remember to use the <literal>a4j/versionXXX</literal> resources prefix instead of <literal>a4j_versionXXX</literal>. </para>
+ </note>
+ </section>
+ <section id="XCSSfileformat">
+ <title>XCSS File Format</title>
+ <para>Cross-site Cascading Style Sheet (XCSS) files are the core of RichFaces component skinnability. XCSS is XML-formatted CSS that extends the skinning process. RichFaces parses the XCSS file containing all look and feel parameters of a particular component and compiles the information into a standard CSS file that can be recognized by a web browser.</para>
+ <para>The XCSS file contains CSS properties and skin parameter mappings. Mapping a CSS selector to a skin parameter can be done with <literal>< u:selector ></literal> and <literal>< u:style></literal> XML tags, which define the mapping structure, as in the following example:</para>
+ <programlisting role="XML"><![CDATA[...
+<u:selector name=".rich-component-name">
+ <u:style name="background-color" skin="additionalBackgroundColor" />
+ <u:style name="border-color" skin="tableBorderColor" />
+ <u:style name="border-width" skin="tableBorderWidth" />
+ <u:style name="border-style" value="solid" />
+</u:selector>
+...]]></programlisting>
+ <para>During processing, this code will be parsed and assembled into a standard CSS format, like so:</para>
+ <programlisting role="CSS"><![CDATA[...
+.rich-component-name {
+ background-color: additionalBackgroundColor; /*the value of the constant defined by your skin*/
+ border-color: tableBorderColor; /*the value of the constant defined by your skin*/
+ border-width: tableBorderWidth; /*the value of the constant defined by your skin*/
+ border-style: solid;
+}
+...]]></programlisting>
+ <para>The <varname>name</varname> attribute of <literal><u:selector></literal> defines the CSS selector, while the <varname>name</varname> attribute of the <literal><u:style></literal> tag defines the skin constant that is mapped to a CSS property. You can also use the <varname>value</varname> attribute of the <literal><u:style></literal> tag to assign a value to a CSS property.</para>
+ <para>CSS selectors with identical skin properties can be included in a comma-separated list:</para>
+ <programlisting role="XML"><![CDATA[...
+<u:selector name=".rich-ordering-control-disabled, .rich-ordering-control-top, .rich-ordering-control-bottom, .rich-ordering-control-up, .rich-ordering-control-down">
+ <u:style name="border-color" skin="tableBorderColor" />
+</u:selector>
+...]]></programlisting>
+ </section>
+ <section id="PlugnSkin" role="new">
+ <title>Plug-n-Skin</title>
+ <para><emphasis>Plug-n-Skin</emphasis> lets you easily create, customize, and plug in a custom skin to your project. You can create skins based on the parameters of predefined RichFaces skins. Plug-n-Skin also lets you unify the appearance of rich controls with standard HTML elements. This section contains step-by-step instructions for creating your own skin with Plug-n-Skin.</para>
+ <para>First, use Maven to create a template for your new skin. (You can find more information about configuring Maven for RichFaces in the <!--#modify add info?--><ulink url="http://wiki.jboss.org/wiki/HowToConfigureMavenForRichFaces">JBoss wiki article</ulink>. These Maven instructions can be copied and pasted into the command line interface to execute them.</para>
+ <programlisting role="XML"><![CDATA[...
+mvn archetype:create
+-DarchetypeGroupId=org.richfaces.cdk
+-DarchetypeArtifactId=maven-archetype-plug-n-skin
+-DarchetypeVersion=RF-VERSION
+-DartifactId=ARTIFACT-ID
+-DgroupId=GROUP-ID
+-Dversion=VERSION
+...]]></programlisting>
+ <para>Primary keys for the command:</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <varname>archetypeVersion</varname> — indicates the RichFaces version; for example, <literal>3.3.1.GA</literal>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <varname>artifactId</varname> — the artifact ID of the project </para>
+ </listitem>
+ <listitem>
+ <para>
+ <varname>groupId</varname> — the group ID of the project </para>
+ </listitem>
+ <listitem>
+ <para>
+ <varname>version</varname> — the version of the project you create. By default, this is set to <literal>1.0.-SNAPSHOT</literal>
+ </para>
+ </listitem>
+ </itemizedlist>
+ <para>This operation creates a directory named after your <literal>ARTIFACT-ID</literal>. The directory contains a template of the Maven project.</para>
+ <para>The following steps will guide you though creating of the skin itself. </para>
+ <para>Run the following command from the root directory of the Maven project. (This directory will contain your <filename>pom.xml</filename> file.)</para>
+ <programlisting role="XML"><![CDATA[...
+mvn cdk:add-skin -Dname=SKIN-NAME -Dpackage=SKIN-PACKAGE
+...
+]]></programlisting>
+ <para>Primary keys for the command:</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <varname>name</varname> — defines the name of the new skin </para>
+ </listitem>
+ <listitem>
+ <para>
+ <varname>package</varname> — the base package of the skin. By default, the project's <literal>groupId</literal> is used.</para>
+ </listitem>
+ </itemizedlist>
+ <para>Additional optional keys for the command:</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <varname>baseSkin</varname> — defines the name of the base skin. </para>
+ </listitem>
+ <listitem>
+ <para>
+ <varname>createExt</varname> — if set to <literal>true</literal>, extended CSS classes are added. For more information, please, see <xref linkend="StControlsSkinning" />.</para>
+ </listitem>
+ </itemizedlist>
+ <para>Once these operations are complete, the following files and folders should have been created:</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <filename>BaseImage.java</filename> — the base class used to store images. Location: <filename>\src\main\java\SKIN-PACKAGE\SKIN-NAME\images\</filename>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <filename>BaseImageTest.java</filename> — a test version of a class that stores images. Location: <filename>\src\test\java\SKIN-PACKAGE\SKIN-NAME\images\</filename>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <filename>XCSS files</filename> — XCSS files define the new look of RichFaces components affected by the new skin. Location:
+ "\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\"
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <filename>SKIN-NAME.properties</filename> — a file that contains the new skin's properties. Location: <filename>\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\</filename>
+ </para>
+ <para>The following properties are used to configure the <filename>SKIN-NAME.properties</filename> file: </para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <varname>baseSkin</varname> — the name of the skin to be used as a basis for your own skin. The look of the skin you define will be affected by the new style properties. </para>
+ </listitem>
+ <listitem>
+ <para>
+ <varname>generalStyleSheet</varname> — a path to the style sheet (<filename>SKIN-NAME.xcss</filename>) that imports your component's style sheets to be modified by the new skin.</para>
+ </listitem>
+ <listitem>
+ <para>
+ <varname>extendedStyleSheet</varname> — the path to a style sheet that is used to unify the appearance of RichFaces components and standard HTML controls. For additional information, read <xref linkend="StControlsSkinning" />.</para>
+ </listitem>
+ <listitem>
+ <para>
+ <varname>gradientType</varname> — a predefined property to set the type of gradient applied to the new skin. Possible values are <literal>glass</literal>, <literal>plastic</literal>, <literal>plain</literal>. More information on gradient implementation
+ you can find further in this chapter.</para>
+ </listitem>
+ </itemizedlist>
+ </listitem>
+ <listitem>
+ <para>
+ <filename>SKIN-NAME.xcss</filename> — an XCSS file that imports the component's XCSS files to be modified by the new skin. Location: <filename>src\main\resources\META-INF\skins</filename>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>XCSS files</literal> — creates the XCSS files that determine styles for standard controls (<filename>extended_classes.xcss</filename> and <filename>extended.xcss</filename>), if the <varname>createExt</varname> key is set to <literal>true</literal>. Location:
+ <filename>\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\</filename> </para>
+ </listitem>
+ <listitem>
+ <para>
+ <filename>SKIN-NAME-ext.xcss</filename> — creates the <filename>SKIN-NAME-ext.xcss</filename> file that imports defining styles for standard controls if <varname>createExt</varname> is set to <literal>true</literal>. Location: <filename>src\main\resources\META-INF\skins</filename>.</para>
+ </listitem>
+ <listitem>
+ <para>
+ <filename>SKIN-NAME-resources.xml</filename> — contains descriptions of all files listed previously. Location: <filename>src\main\config\resources</filename>.</para>
+ </listitem>
+ </itemizedlist>
+ <para>You can now start editing the XCSS files located in <filename>\src\main\resources\SKIN-PACKAGE\SKIN-NAME\css\</filename>. Assign new style properties to your selectors (listed in the XCSS files) in either of the following ways:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Standard CSS coding approach (that is, add CSS properties to the selectors). Remember that the selectors must be within <literal><f:verbatim> <![CDATA[ ...]]> </f:verbatim></literal> tags. For example:</para>
+ <programlisting role="XML"><![CDATA[...
+.rich-calendar-cell {
+ background: #537df8;
+}
+...]]></programlisting>
+ </listitem>
+ <listitem>
+ <para> XCSS coding approach (the usual method of creating XCSS files in RichFaces). XCSS tags must be placed <emphasis>outside</emphasis> <literal><f:verbatim> <![CDATA[ ...]]> </f:verbatim></literal> tags. </para>
+ <programlisting role="XML"><![CDATA[...
+<u:selector name=".rich-calendar-cell">
+ <u:style name="border-bottom-color" skin="panelBorderColor"/>
+ <u:style name="border-right-color" skin="panelBorderColor"/>
+ <u:style name="background-color" skin="tableBackgroundColor"/>
+ <u:style name="font-size" skin="generalSizeFont"/>
+ <u:style name="font-family" skin="generalFamilyFont"/>
+</u:selector>
+...]]></programlisting>
+ </listitem>
+ </itemizedlist>
+ <para>Once you have performed these steps and edited the XCSS files, build the new skin and plug it into the project. To build the skin, execute the following command from the root directory of your skin project (the directory that contains your <filename>pom.xml</filename> file):</para>
+ <!--#modify seems a weird way of listing a command, but okay, you are the boss-->
+ <programlisting role="XML"><![CDATA[...
+mvn clean install
+...]]></programlisting>
+ <para>The Plug-n-skin feature also has a number of predefined gradients. The following code can be used to apply a gradient:</para>
+ <programlisting role="XML"><![CDATA[...
+<u:selector name=".rich-combobox-item-selected">
+ <u:style name="border-width" value="1px" />
+ <u:style name="border-style" value="solid" />
+ <u:style name="border-color" skin="newBorder" />
+ <u:style name="background-position" value="0% 50%" />
+ <u:style name="background-image">
+ <f:resource f:key="org.richfaces.renderkit.html.CustomizeableGradient">
+ <f:attribute name="valign" value="middle" />
+ <f:attribute name="gradientHeight" value="17px" />
+ <f:attribute name="baseColor" skin="headerBackgroundColor" />
+ </f:resource>
+ </u:style>
+</u:selector>
+...]]></programlisting>
+ <para>The <varname>background-image</varname> CSS property is defined with <literal><f:resource f:key="org.richfaces.renderkit.html.CustomizeableGradient"></literal>, which sets the gradient. The gradient type can be specified in the <filename>SKIN-NAME.properties</filename> with the <varname>gradientType</varname> property, which can be set to <literal>glass</literal>, <literal>plastic</literal>, or <literal>plain</literal>. The gradient can then be adjusted with the <varname>baseColor</varname>, <varname>gradientColor</varname>, <varname>gradientHeight</varname>, <varname>valign</varname> attributes, as seen in the previous code snippet.</para>
+ <para>You can now use your newly-created skin in your project by adding your new skin parameters to the <filename>web.xml</filename> file, and placing the JAR file containing your skin (located in the <filename>target</filename> directory of your skin project) in the <filename>\WebContent\WEB-INF\lib\</filename>.</para>
+ <programlisting role="XML"><![CDATA[...
+<context-param>
+ <param-name>org.ajax4jsf.SKIN</param-name>
+ <param-value>SKIN-NAME</param-value>
+</context-param>
+...]]></programlisting>
+ <section>
+ <title>Details of Usage</title>
+ <para>This section covers some practical aspects of Plug-n-Skin implementation. We assume that you have read the section of the guide describing the Plug-n-Skin prototype creation process.</para>
+ <para>First, we must create a new skin (as described in the previous section). The following creates a template of the new skin project:</para>
+ <programlisting role="XML"><![CDATA[
+mvn archetype:create
+-DarchetypeGroupId=org.richfaces.cdk
+-DarchetypeArtifactId=maven-archetype-plug-n-skin
+-DarchetypeVersion=3.3.1.GA
+-DartifactId=P-n-S
+-DgroupId=GROUPID
+-Dversion=1.0.-SNAPSHOT
+]]></programlisting>
+ <para>You can now browse the <filename>P-n-S</filename> directory to view the files and folders created.</para>
+ <para>Next, use Maven to add all required files to the skin project, like so:</para>
+ <programlisting role="XML"><![CDATA[mvn cdk:add-skin -DbaseSkin=blueSky -DcreateExt=true -Dname=PlugnSkinDemo -Dpackage=SKINPACKAGE]]></programlisting>
+ <para>As mentioned in the previous section, <!--#modify '-D' typo?--><literal>-DbaseSkin</literal> defines the RichFaces built-in skin to use as a base, and <literal>-DcreateExt=true</literal>, which determines that the new skin will include XCSS files that unify the appearance of the rich components and the standard HTML controls.</para>
+ <para>Once your resources have been created, you can begin refining the newly-created skin. Begin by editing the rich components' XCSS files.</para>
+ <para>As an example of the Plug-n-Skin feature, we will edit some <literal><rich:calendar></literal> style attributes and some basic HTML controls. We will show you how to:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Recolor the background of the current day in the <literal><rich:calendar></literal>;</para>
+ </listitem>
+ <listitem>
+ <para>Recolor a standard HTML submit button;</para>
+ </listitem>
+ </itemizedlist>
+ <para>To edit <literal><rich:properties></literal>'s style properties, you must open the <filename>calendar.xcss</filename> file, located in <filename>P-n-S\src\main\resources\skinpackage\plugnskindemo\css\</filename>.</para>
+ <para>In the <filename>calendar.xcss</filename> file, find the <literal>.rich-calendar-today</literal> selector and amend it as follows:<literal>background-color: #075ad1;</literal>. This will change the background color of the current day.</para>
+ <para>Next we will change the font style of a standard HTML <emphasis>submit</emphasis> button. Open the <filename>extended.xcss</filename> file from the <filename>P-n-S\src\main\resources\skinpackage\plugnskindemo\css\</filename> directory and insert <literal>font-weight: bold;</literal> between the curly braces of these selectors, like so:</para>
+ <programlisting role="XML"><![CDATA[
+button[type="button"], button[type="reset"], button[type="submit"], input[type="reset"], input[type="submit"], input[type="button"] {
+ font-weight: bold;
+}]]></programlisting>
+ <para>The desired changes have now been made, and you can proceed to building the new <literal>PlugnSkinDemo</literal> skin and importing it into the project.</para>
+ <para>Build the skin by executing <command>mvn clean install</command> from the <filename>P-n-S</filename> directory. This creates a <filename>target</filename> directory containing a JAR file with a newly-compiled skin. In our case, the file is named <filename>P-n-S-1.0.-SNAPSHOT.jar</filename>.</para>
+ <para>Next, import the new <literal>PlugnSkinDemo</literal> skin into your project:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Copy the <filename>P-n-S-1.0.-SNAPSHOT.jar</filename> file to the <filename>\WebContent\WEB-INF\lib\</filename> directory.</para>
+ </listitem>
+ <listitem>
+ <para>Add the name of the new skin to the <filename>web.xml</filename> file, like so:</para>
+ <programlisting role="XML"><![CDATA[ <context-param>
+ <param-name>org.ajax4jsf.SKIN</param-name>
+ <param-value>PlugnSkinDemo</param-value>
+</context-param>]]></programlisting>
+ </listitem>
+ </itemizedlist>
+ <para>Remember, standard controls skinning must be enabled in <filename>web.xml</filename>. Add the following to enable standard controls skinning:</para>
+ <programlisting role="XML"><![CDATA[<context-param>
+ <param-name>org.richfaces.CONTROL_SKINNING</param-name>
+ <param-value>enable</param-value>
+</context-param>]]></programlisting>
+ <para>The results of each alteration to the skin are shown in the figures that follow:</para>
+ <figure>
+ <title>Plug-n-Skin feature in action. </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/PlugnSkinDemo.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </section>
+ </section>
+ </section>
+ <section id="statemanagerapi">
+ <title>State Manager API</title>
+ <para>JSF has an advanced navigation mechanism that lets you define <emphasis>navigation</emphasis> from view to view. In a web application, navigation occurs when a user changes from one page to another by clicking on a button, a hyperlink, or another command component. There is no switch mechanism between some logical states of the same view. For example, in <emphasis>Login/Register dialog</emphasis>, an existing user signs in with his user name and password, but if a new user attempts to register, an additional field (<literal>Confirm</literal>) is displayed, and button labels and methods are changed when the user clicks the <guilabel>To register</guilabel> link:</para>
+ <figure>
+ <title> Login Dialog </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/stateapi1.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <figure>
+ <title> Register Dialog </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/stateapi2.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para><emphasis>RichFaces State API</emphasis> lets you easily define a set of states for pages, and properties for these states.</para>
+ <para>The <varname>States</varname> class interfaces with a <property>map</property>, where the <methodname>keySet</methodname> defines the State name and the <methodname>entrySet</methodname> is a <varname>State</varname> <property>map</property>. The <varname>State</varname> <property>map</property> defines the properties, method bindings, or constant state variables of a key or object, where these values may change depending on the active State.</para>
+ <figure>
+ <title> RichFaces State API </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/stateapi3.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>One of the most convenient features of the RichFaces State API is the ability to navigate between <varname>State</varname>s. The API implements changes in <varname>State</varname> through standard JSF navigation. When the action component returns an outcome, the JSF navigation handler (extended through the RichFaces State API) checks whether the outcome is registered as a <emphasis><varname>State</varname> change outcome</emphasis>. If <literal>true</literal>, the sorresponding <varname>State</varname> is activated. If <literal>false</literal>, standard navigation handling is called.</para>
+ <para>Implement the RichFaces State API like so:</para>
+ <itemizedlist>
+ <listitem>
+ <para>Register the State Navigation Handler and the EL Resolver in your <filename>faces-config.xml</filename> file:</para>
+ <programlisting role="XML"><![CDATA[...
+<application>
+ <navigation-handler>org.richfaces.ui.application.StateNavigationHandler</navigation-handler>
+ <el-resolver>org.richfaces.el.StateELResolver</el-resolver>
+</application>
+...]]></programlisting>
+ </listitem>
+ <listitem>
+ <para>Register an additional application factory in the <filename>faces-config.xml</filename>:</para>
+ <programlisting role="XML"><![CDATA[...
+<factory>
+ <application-factory>org.richfaces.ui.application.StateApplicationFactory</application-factory>
+</factory>
+...]]></programlisting>
+ </listitem>
+ <listitem>
+ <para>Register two managed beans in the <filename>faces-config.xml</filename>:</para>
+ <programlisting role="XML"><![CDATA[...
+<managed-bean>
+ <managed-bean-name>state</managed-bean-name>
+ <managed-bean-class>org.richfaces.ui.model.States</managed-bean-class>
+ <managed-bean-scope>request</managed-bean-scope>
+ <managed-property>
+ <property-name>states</property-name>
+ <property-class>org.richfaces.ui.model.States</property-class>
+ <value>#{config.states}</value>
+ </managed-property>
+</managed-bean>
+<managed-bean>
+ <managed-bean-name>config</managed-bean-name>
+ <managed-bean-class>org.richfaces.demo.stateApi.Config</managed-bean-class>
+ <managed-bean-scope>none</managed-bean-scope>
+</managed-bean>
+...]]></programlisting>
+ <para>One bean (<literal>config</literal>) defines and stores <varname>State</varname> as seen in the following example:</para>
+ <programlisting role="JAVA"><![CDATA[...
+public class Config {
+
+ /**
+ * @return States
+ */
+ public States getStates() {
+ FacesContext facesContext = FacesContext.getCurrentInstance();
+ States states = new States();
+
+ // Registering new User State definition
+ states.setCurrentState("register"); // Name of the new state
+
+ // Text labels, properties and Labels for controls in "register" state
+ states.put("showConfirm", Boolean.TRUE); // confirm field rendering
+ states.put("link", "(To login)"); // Switch State link label
+ states.put("okBtn", "Register"); // Login/Register button label
+ states.put("stateTitle", "Register New User"); // Panel title
+
+ ExpressionFactory expressionFactory = facesContext.getApplication()
+ .getExpressionFactory();
+
+ // Define "registerbean" available under "bean" EL binding on the page
+ ValueExpression beanExpression = expressionFactory
+ .createValueExpression(facesContext.getELContext(),
+ "#{registerbean}", Bean.class);
+ states.put("bean", beanExpression);
+
+ // Define "registeraction" available under "action" EL binding on the
+ // page
+ beanExpression = expressionFactory.createValueExpression(facesContext
+ .getELContext(), "#{registeraction}", RegisterAction.class);
+ states.put("action", beanExpression);
+
+ // Define method expression inside registeraction binding for this state
+ MethodExpression methodExpression = expressionFactory.createMethodExpression(
+ facesContext.getELContext(), "#{registeraction.ok}",
+ String.class, new Class[] {});
+ states.put("ok", methodExpression);
+
+ // Outcome for switching to login state definition
+ states.setNavigation("switch", "login");
+
+ // Login Existent User State analogous definition
+ states.setCurrentState("login");
+ states.put("showConfirm", Boolean.FALSE);
+ states.put("link", "(To register)");
+ states.put("okBtn", "Login");
+ states.put("stateTitle", "Login Existing User");
+
+ beanExpression = expressionFactory.createValueExpression(facesContext
+ .getELContext(), "#{loginbean}", Bean.class);
+ states.put("bean", beanExpression);
+
+ beanExpression = expressionFactory.createValueExpression(facesContext
+ .getELContext(), "#{loginaction}", LoginAction.class);
+ states.put("action", beanExpression);
+
+ methodExpression = expressionFactory.createMethodExpression(
+ facesContext.getELContext(), "#{loginaction.ok}",
+ String.class, new Class[] {});
+ states.put("ok", methodExpression);
+
+ states.setNavigation("switch", "register");
+
+ return states;
+ }
+}
+...]]></programlisting>
+ <para>The second bean, with the <literal>org.richfaces.ui.model.States</literal> type (<literal>state</literal>), contains the managed property <property>states</property>, which is bound to the first <literal>config</literal> bean.</para>
+ </listitem>
+ <listitem>
+ <para>Next, use <property>state</property> bindings on the page, as in the following example:</para>
+ <programlisting role="XML"><![CDATA[...
+<h:panelGrid columns="3">
+ <h:outputText value="username" />
+ <h:inputText value="#{state.bean.name}" id="name" required="true" />
+ <h:outputText value="password" />
+ <h:inputSecret value="#{state.bean.password}" id="password" required="true" />
+ <h:outputText value="confirm" rendered="#{state.showConfirm}" />
+ <h:inputSecret value="#{state.bean.confirmPassword}" rendered="#{state.showConfirm}" id="confirm" required="true" />
+</h:panelGrid>
+<a4j:commandButton actionListener="#{state.action.listener}" action="#{state.ok}" value="#{state.okBtn}" id="action"/>
+...]]></programlisting>
+ </listitem>
+ </itemizedlist>
+ <para>To see complete example of the Login/Register dialog, see the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/stateAPI.jsf?c=stateAPI">RichFaces Live Demo</ulink>.</para>
+ </section>
+
+ <section>
+ <title>Identifying User Roles</title>
+
+ <para>RichFaces also lets you check whether the logged-in user belongs to a certain <property>user role</property> with the <literal>rich:isUserInRole(Object)</literal> function. This function takes a String or a comma-delineated list of Strings, a Collection, etc. as arguments and returns a Boolean value.</para>
+ <para>As an example, imagine that you need to render some controls only for administrators. To do so, create an administrator role (<literal>admin</literal>) in your <filename>web.xml</filename> file. Then implement authorization that assigns the <literal>admin</literal> role to the user that has logged in as an administrator. Once this has been done, you can use the <literal>rich:isUserInRole(Object)</literal> function with the <varname>rendered</varname> attribute of any component. For example:</para>
+ <programlisting role="XML"><![CDATA[...
+<rich:editor value="#{bean.text}" rendered="#{rich:isUserInRole('admin')}" />
+...]]></programlisting>
+
+ <para>Here, only a logged-in user with an <literal>admin</literal> role can see the text editor, which will not be rendered for users with other roles.</para>
+ </section>
+
+</chapter>
Added: projects/docs/enterprise/5.0/RichFaces/en-US/Author_Group.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/Author_Group.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/Author_Group.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,10 @@
+<?xml version='1.0'?>
+<!DOCTYPE authorgroup PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<authorgroup>
+<author>
+ <firstname>Red Hat Documentation Group</firstname>
+ <surname></surname>
+ </author>
+</authorgroup>
Added: projects/docs/enterprise/5.0/RichFaces/en-US/Book_Info.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/Book_Info.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/Book_Info.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,29 @@
+<?xml version='1.0'?>
+<!DOCTYPE bookinfo PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.3/docbookx.dtd" [
+]>
+
+<bookinfo id="RichFaces_Developer_Guide">
+ <title>RichFaces Developer Guide</title>
+ <productname>JBoss Enterprise Application Platform</productname>
+ <productnumber>5.0</productnumber>
+ <edition>0</edition>
+ <pubsnumber>0</pubsnumber>
+ <corpauthor>
+ <inlinemediaobject>
+ <imageobject>
+ <imagedata format='SVG' fileref="Common_Content/images/title_logo.svg" />
+ </imageobject>
+ <textobject><phrase>Logo</phrase></textobject>
+ </inlinemediaobject>
+ </corpauthor>
+ <copyright>
+ <year>&YEAR;</year>
+ <holder>&HOLDER;</holder>
+ </copyright>
+ <xi:include href="Common_Content/Legal_Notice.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <xi:include href="Author_Group.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+</bookinfo>
+
+
+
+
Added: projects/docs/enterprise/5.0/RichFaces/en-US/FAQ.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/FAQ.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/FAQ.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,2311 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<chapter id="FAQ">
+ <title>FAQ</title>
+ <section>
+ <title>Where can 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&op=viewtopic&t=104575"
+ >here</ulink>. </para>
+ </section>
+ <section>
+ <title>Where are the binary/source distributions 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 the binary/source distribution:
+ </para>
+ <itemizedlist>
+ <listitem>-->
+ <para>Distributions are available from the <ulink url="http://labs.jboss.com/jbossrichfaces/downloads/">JBoss RichFaces Download area</ulink>. The source distribution is found in the <filename>richfaces-ui-3.3.0-src.zip</filename> file. The binary distribution is in the <filename>richfaces-ui-3.3.0-bin.zip</filename>.
+ </para>
+ <!--</listitem>
+ <listitem>
+ <para>Maven automatically locates distributions. Links to the Maven repository can be found <ulink url="http://jboss.com/index.html?module=bb&op=viewtopic&t=104575">here</ulink>.
+ </para>
+ </listitem>
+ </itemizedlist>-->
+
+ </section>
+
+ <section>
+ <title>How can I manually build a RichFaces snapshot?</title>
+ <para>This <ulink
+ url="http://labs.jboss.com/wiki/HowToBuildRichFacesSnapshotManually"
+ > wiki article</ulink> takes you through the process.</para>
+ </section>
+
+ <section>
+ <title>How do I configure Maven for RichFaces?</title>
+ <itemizedlist>
+ <listitem>
+ <para>First, download and install Maven. (Follow the instructions at <ulink url="http://maven.apache.org/download.html">http://maven.apache.org/download.html</ulink>.)</para>
+ </listitem>
+
+ <listitem>
+ <para>Open the <filename><Maven-Root>/conf/settings.xml</filename> file and add the following to the <literal><profile></literal> 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 the following to the <literal><activeProfiles></literal> section:</para>
+ <programlisting role="XML"><![CDATA[<activeProfile>RichFaces</activeProfile>]]></programlisting>
+
+ </listitem>
+
+ </itemizedlist>
+ </section>
+
+ <section>
+ <title>What is the structure of RichFaces SVN repository?</title>
+ <para>You can see the structure in the RichFaces Repository Structure Overview in <ulink url="http://labs.jboss.com/wiki/RichFacesRepositoryStructureOverview">this Wiki article</ulink>.</para>
+ </section>
+
+ <section>
+ <title>How do I build <literal>richfaces-samples</literal> applications?</title>
+ <para>he <ulink url="http://labs.jboss.com/wiki/RichFacesRepositoryStructureOverview">RichFaces Repository Structure Overview</ulink> describes how to build <literal>richfaces-samples</literal> applications in Eclipse.</para>
+ </section>
+
+ <section>
+ <title>Where can I find a demo for RichFaces components?</title>
+ <para>Online demo applications that showcase RichFaces features are available on the <ulink url="http://livedemo.exadel.com/richfaces-demo/">RichFaces LiveDemo page</ulink>.</para>
+ <para>You can also find a nightly build (in the WAR format) <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/">in the JBoss RichFaces SVN repository</ulink>.</para>
+ <!--<para>See also <ulink url="http://www.jboss.com/index.html?module=bb&op=viewtopic&t=113454">how to prevent richfaces-demo deployment
+ failed</ulink>.</para>-->
+ </section>
+
+ <!--#modify Forum links do not work.-->
+ <!--<section>
+ <title>How to use Skinnability?</title>
+ <para><ulink url="http://www.jboss.com/index.html?module=bb&op=viewtopic&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&op=viewtopic&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/"
+ >on this LiveDemo page</ulink>.</para>
+ </section>-->
+
+ <section>
+ <title>What causes the "Prototype.Browser() function cannot be found" error in RichFaces 3.1.0, and how do I fix it?</title>
+ <para>
+ Your application probably uses an older version of Prototype from Tomahawk 1.1.6. RichFaces 3.1.0 uses the latest Prototype (1.5.1.1). Upgrade your version of Prototype to solve this problem.
+ </para>
+ <!--
+ <title>Why does a problem with prototypes in RichFaces 3.1.0 happen? The
+ Prototype.Browser() function can'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&op=viewtopic&t=118526&postdays=0&postorder=asc&start=0"
+ >here.</ulink></para>-->
+ </section>
+
+ <section>
+ <title>Why does the RichFaces library contain the <literal><rich:dataTable></literal> component as well as the <literal><h:dataTable></literal>?</title>
+ <para>The <literal><rich:dataTable></literal> component lets you use skins to change the look and feel of your data tables. You can see an example of the difference between these components at the <ulink url="http://livedemo.exadel.com/richfaces-art-datatable/">RichFaces dataTable LiveDemo page</ulink>, or see the source code in the <ulink url="http://anonsvn.jboss.org/repos/richfaces/trunk/samples/richfaces-art-datatable/">SVN repository</ulink>.</para>
+
+ <!--The article about <emphasis role="bold">
+ <property><rich:dataTable></property>
+ </emphasis> flexibility can be found <ulink
+ url="http://labs.jboss.com/wiki/RichFacesArticleDataTable"
+ >in this Wiki article</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/"
+ >on this page</ulink>.</para>-->
+ </section>
+
+
+
+ <section id="Organizewizards">
+ <title>How do I organize wizards with the <literal><rich:modalPanel></literal> component?</title>
+ <para>Place the <literal><a4j:include></literal> tag inside the <literal><rich:modalPanel></literal> and perform navigation inside it, as in the following example below:</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><a4j:include></property>
+ </emphasis> and navigation rules can be found on the <ulink
+ url="http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4062036#4062036"
+ >Ajax Users Forum</ulink>.</para>-->
+ </section>
+
+ <section>
+ <title>How do I stop <literal>modalPanel</literal> closing when validation fails?</title>
+ <!--<para>Examples of validation in <emphasis role="bold">
+ <property><rich:modalPanel></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&op=viewtopic&p=4061517"
+ >RichFaces Users Forum</ulink>. </para>-->
+ <para>There are two methods available to fix this problem. The first is simply to remove the <literal>windowclose()</literal> method from the <literal>modalPanel</literal>, like so:</para>
+<programlisting><ui:define name="body">
+ <f:verbatim>
+ <a href="javascript:Richfaces.showModalPanel('_panel',{left:'auto', top:'auto'})">
+ Show Modal Panel
+ </a>
+ </f:verbatim>
+ <rich:modalPanel id="_panel">
+ <f:facet name="header">
+ <h:outputText value="test"></h:outputText>
+ </f:facet>
+ <h:form id="mpform">
+ <a4j:outputPanel ajaxRendered="true">
+ <h:messages id="error"></h:messages>
+ </a4j:outputPanel>
+ <h:inputText value="#{bean.property}" required="true"></h:inputText>
+ <a4j:commandLink value="click" oncomplete="windowclose();"
+ reRender="test" ></a4j:commandLink>
+ </h:form>
+ </rich:modalPanel>
+ <script type="text/javascript">
+ //<![CDATA[
+ function windowclose(){
+ if (document.getElementById('mpform:error')==null){
+ Richfaces.hideModalPanel('_panel');
+ };
+ };
+//\]\]\>
+
+ </script>
+</ui:define>
+</programlisting>
+ <para>This means that when an error presents, the panel will simply do nothing rather than closing the window.</para>
+ <para>The second method assumes that you use Facelets. Add the following to your <filename>default.xhtml</filename> template:</para>
+<programlisting><a4j:outputPanel ajaxRendered="true">
+ <h:form style="display:none" prependId="false">
+ <h:inputHidden id="maximumSeverity" value="#{facesContext.maximumSeverity.ordinal}"/>
+ </h:form>
+ </a4j:outputPanel>
+</programlisting>
+ <para>This invisible form will be refreshed on every postback, and contains a hidden field that determines the maximum severity in the message queue. If you add the following function to your JavaScript:</para>
+<programlisting>function ajaxRequestContainsErrors() {
+ return document.getElementById("maximumSeverity").value == "2";
+}
+</programlisting>
+ <para>This method reads the value of the hidden field to determine whether the last postback to the server generated any errors. This means that the <literal><a4j:commandLink></literal> or <literal><a4j:commandButton></literal> that submits your form will look like this:</para>
+<programlisting><a4j:commandButton value="Save" action="#{myController.save}" oncomplete="if (!ajaxRequestContainsErrors()) Richfaces.hideModalPanel('myModalPanelId');"/></programlisting>
+ <para>This method lets you easily adjust the behaviour of any JavaScript code depending on whether an error is present. See the <ulink url="http://www.jboss.org/index.html?module=bb&op=viewtopic&p=4061517">JBoss RichFaces forum</ulink> post for more information and variations on this method.</para>
+ </section>
+
+ <section>
+ <title>When I use <literal>suggestionbox</literal> inside the <literal>modalPanel</literal>, the suggestion list sits behind the <literal>modalPanel</literal> and I cannot see it. What's wrong?</title>
+ <para>You are using an old version of RichFaces. Upgrade to the latest version to fix this problem.</para>
+ </section>
+
+ <section>
+ <title>Does RichFaces work with Facelets?</title>
+ <para>Yes. Full Facelets support is one of RichFaces' primary features. The main <ulink url="http://livedemo.exadel.com/richfaces-demo/"> demo</ulink> is a Facelets-based application.</para>
+ </section>
+
+ <section>
+ <title>Can I create a dynamic menu with the <literal><rich:dropDownMenu></literal> component?</title>
+ <para><literal><rich:dropDownMenu></literal> is a standard JSF component, so creating a menu dynamically from the JavaScript 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&op=viewtopic&t=110983">link</ulink>.</para>-->
+ </section>
+
+ <section>
+ <title>Can I customize the look of a <literal>datascroller</literal> (the forward/back buttons) and replace them with images?</title>
+ <para>You can. The <literal>datascroller</literal> component provides two controller groups for switching:</para>
+ <itemizedlist>
+ <listitem>
+ <para><emphasis>Page numbers</emphasis> so that you can switch to a particular page.</para>
+ </listitem>
+ <listitem>
+ <para><emphasis>Fast-switching</emphasis> controls: <literal>first</literal>, <literal>last</literal>, <literal>next</literal>, <literal>previous</literal>, <literal>fastforward</literal> and <literal>fastrewind</literal>.</para></listitem>
+ </itemizedlist>
+ <para>You can create fast-switching controls by adding a <literal>facet</literal> component with the corresponding name:</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>You can also create disabled states with facets
+ There are also facets used to create the disabled states: <literal>first_disabled</literal>, <literal>last_disabled</literal>, <literal>next_disabled</literal>, <literal>previous_disabled</literal>, <literal>fastforward_disabled</literal>, <literal>fastrewind_disabled</literal>. </para>
+ </section>
+
+ <section>
+ <title>How do I place simple links inside a menu?</title>
+ <para>To include a link to an external URL, use the following approach:</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>You can also see a demonstration of the <literal><rich:dropDownMenu></literal> component at the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMenu.jsf">RichFaces LiveDemo page</ulink>.</para>
+ </section>
+
+ <section>
+ <title>Can I use the <literal>dropDownMenu</literal> as a context menu?</title>
+ <para>The <literal><rich:dropDownMenu></literal> is not designed for use as a <literal>contextMenu</literal>. A <literal><rich:contextMenu></literal> component is planned for development, but is not scheduled for any currently planned version.</para>
+ </section>
+
+ <section>
+ <title>How do I pass my own parameters during a <literal>modalPanel</literal> opening or closing?</title>
+ <para>You can pass your parameters during modalPanel opening or closing like so:</para>
+ <programlisting role="JAVA"><![CDATA[Richfaces.showModalPanel('panelId', {left: auto}, {param1: value1});]]></programlisting>
+ <para>You can pass any of your own parameters, except for the standard <literal>modalPanel</literal> parameters.</para>
+ </section>
+
+ <section>
+ <title>How do I add a simple link to the tree node?</title>
+ <para>Use the following simple code:</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>
+ <title>Is it possible to place tabs upright in the <literal>tabPanel</literal>?</title>
+ <para>No, it is not. Try using the <literal>togglePanel</literal> instead; toggle controls can be placed anywhere in the layout.</para>
+ </section>
+
+ <section>
+ <title>How can I use a <literal>commandButton</literal> within the <literal>modalPanel</literal>?</title>
+ <para>Use the following simple code:</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>
+ <para>There are two important rules to follow when using <literal>modalPanel</literal>:</para>
+ <itemizedlist>
+ <listitem>
+ <para>if <literal>modalPanel</literal> has form elements (input or command elements), it must have its own form.</para>
+ </listitem>
+ <listitem>
+ <para>if the <literal>modalPanel</literal> contains a form, it must not be included in a higher-level form.</para>
+ </listitem>
+ </itemizedlist>
+ </note>
+ </para>
+ </section>
+
+ <section>
+ <title>How do I define the currently selected tab?</title>
+ <para>Use the following simple code:</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>
+
+<!--#modify outdated URLs-->
+ <!-- <section>
+ <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&op=viewtopic&t=111761"
+ >RichFaces Users Forum</ulink>.</para>
+ </section>-->
+
+<!--#modify outdated URLs-->
+ <!--<section>
+ <title>What methods (other than <literal>tabPanel</literal>) can I use to navigate from one tab to another using buttons?</title>
+ <para> For necessary information you can see <ulink
+ url="http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4085931#4085931"
+ >RichFaces Users Forum</ulink>.</para>
+ </section>-->
+
+ <section>
+ <title>How do I retrieve the current value from the <literal>inputNumberSlider</literal>?</title>
+ <para>You can retrieve the value with the following approach:</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>
+ <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&op=viewtopic&t=103494"
+ >here</ulink>.</para>
+ </section>
+
+<!--#modify outdated URL-->
+ <!--<section>
+ <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&op=viewtopic&t=111965"
+ >RichFaces Users Forum</ulink></para>
+ </section>-->
+
+ <section>
+ <title>Can I remove the table border and styles from the <literal>datascroller</literal> and show only links?</title>
+ <para>To do this, you must redefine your rich* classes, like so:</para>
+ <programlisting role="CSS"><![CDATA[.rich-datascr-button {
+border: 0px;
+}
+.rich-dtascroller-table {
+border: 0px;
+}
+.rich-datascr-button {
+background-color: transparent;
+}]]></programlisting>
+ </section>
+
+<!--#modify outdated URL-->
+ <!--<section>
+ <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&op=viewtopic&p=4059044#4059044"
+ >here</ulink>.</para>
+ </section>-->
+
+<!--#modify outdated URL-->
+ <!--<section id="Truepagination">
+ <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&op=viewtopic&p=4060199#4060199"
+ >RichFaces Users Forum</ulink>.</para>
+ <para>How to use <emphasis role="bold">
+ <property><rich:dataTable></property>
+ </emphasis> and <emphasis role="bold">
+ <property><rich:datascroller></property>
+ </emphasis> in a context of Extended Data Model see <ulink
+ url="http://www.jboss.com/index.html?module=bb&op=viewtopic&t=115636"
+ >here</ulink>.</para>
+ </section>-->
+
+<!--#modify outdated URL-->
+ <!--<section>
+ <title>How to make html scrollbars in modalPanel?</title>
+ <para>The answer could be found on the RichFaces Users Forum:</para>
+ <itemizedlist>
+ <listitem><para>
+ <ulink
+ url="http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4062877#4062877"
+ >http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4062877#4062877</ulink>
+ </para> </listitem>
+ <listitem>
+ <para>
+ <ulink
+ url="http://www.jboss.com/index.html?module=bb&op=viewtopic&t=105412"
+ >http://www.jboss.com/index.html?module=bb&op=viewtopic&t=105412</ulink>
+ </para> </listitem>
+ </itemizedlist>
+
+ </section>-->
+
+ <section>
+ <title>How do I expand/collapse tree nodes from code?</title>
+ <para><ulink url="http://www.jboss.org/community/wiki/ExpandCollapseTreeNodes">This Wiki article</ulink> has some useful information about expanding and collapsing tree nodes.</para>
+ </section>
+
+ <section>
+ <title>How do I use the JavaScript API?</title>
+ <para>Use the following simple code:</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>
+ <title>How do I load the Scriptaculous library?</title>
+ <para>To load the whole Scriptaculous library shipped with RichFaces, use the <literal><a4j:loadScript></literal> tag:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:loadScript src="resource://scriptaculous.js" />
+...
+]]></programlisting>
+ <para>This command lets you load an integrated version of the library that includes all existing Scriptaculous files, <emphasis>except</emphasis> <filename>unittest.js</filename>. If you do not want to load the whole library, but wish to load a specific file (for example, <filename>effect.js</filename>), use the following:</para>
+ <programlisting role="XML"><![CDATA[...
+<a4j:loadScript src="resource://scriptaculous/effect.js" />
+...
+]]></programlisting>
+ <para>If you load the whole library, you do not need to load a particular file.</para>
+<!-- <para>For more information see <ulink
+ url="http://www.jboss.com/index.html?module=bb&op=viewtopic&t=119044"
+ >RichFaces Users Forum</ulink>.</para>-->
+ </section>
+
+ <section>
+ <title>How do I avoid the problem with text wrapping in <literal><rich:tab></literal> in Internet Explorer 7?</title>
+ <para>The problem lies with a tab height bug in IE7. (Tab height is correct in Firefox and in IE6.) To work around the bug, you can change the 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>You can also see the <ulink url="http://jira.jboss.com/jira/browse/RF-1011">JIRA Issue</ulink> for further information.</para>
+ </section>
+
+ <section>
+ <title>How can I save the status of the <literal><rich:effect></literal> component?</title>
+ <para><literal><rich:effect></literal> has several callback methods such as <literal>beforeStart</literal> and <literal>afterFinish</literal>, which can be used to save the status. You can also see the <ulink url="http://wiki.github.com/madrobby/scriptaculous/core-effects">Scriptaculous Core Effects</ulink> page for further information.</para>
+ </section>
+
+ <section>
+ <title>How do I send an additional parameter to the server with <literal><rich:suggestionbox></literal>?</title>
+ <para>This example code gives you one method:</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">
+ <a4j:actionparam value="#{cap.label}" actionListener="#{bean.action}" />
+ </a4j:support>
+ </rich:suggestionbox>
+...
+]]></programlisting>
+ <para>In the example, the <literal>onselect</literal> event sends the selected value to the server. You can pass additional fields of the selected object (which do not belong to the <literal>fetchvalue</literal> attribute) in the same way.</para>
+ </section>
+
+ <section>
+ <title>How do I set the border of <literal><rich:dataTable></literal> 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>
+ <title>How do I dynamically create a <literal><rich:suggestionbox></literal>?</title>
+ <para>The following code 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&op=viewtopic&p=4099047#4099047"
+ >RichFaces User Forum</ulink>.</para>-->
+ </section>
+
+ <!--<section id="Howtoapplybuttonlable">
+ <title>How to apply button label for <rich: calendar>?</title>
+ <para> Necessary information could be found on the <ulink
+ url="http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4120993#4120993"
+ >RichFaces User Forum</ulink>.</para>
+ </section>-->
+
+
+
+ <section id="DecidingWhatToChangeOnTheServerSide">
+ <title>What should I change on the server side?</title>
+ <para>The list of zones to be rerendered can be specified as an EL expression. The list of IDs is formed during the <literal>RENDER_RESPONSE</literal> <emphasis>beforePhase</emphasis>, so you can point the <literal>reRender</literal> to the <classname>Set</classname>, and fill it during a tracking request to form a list of areas which can be dynamically updated.</para>
+ </section>
+
+ <section id="CheckSendingRequestConditions.CustomJavaScriptBeforeRequest.OnSubmitAttribute">
+ <title>How can I check request conditions before sending a request?</title>
+ <para>To check the terms of sending a request on a client, add the <literal>onSubmit</literal> attribute to all components, like so:</para>
+ <programlisting role="XML"><![CDATA[<h:inputText id="i" value="#{beanText.kennung}">
+ <a4j:support event="onfocus" onsubmit="doSomething();" reRender="panelToReRender"/>
+</h:inputText>]]></programlisting>
+ <para>In this example, the <literal>doSomething()</literal> function is executed before the AJAX request, and if the function returns <literal>false</literal>, the request is not fired.</para>
+ <note>
+ <para>
+ The behavior of our <literal>onsubmit</literal> attribute differs slightly from the standard <literal>onsubmit</literal>. Do not return <literal>true</literal> if you want to fire the request: <code><xxx><a4j:support event="onclick" onsubmit="return true;"></code> becomes <code><xxx onclick="return true;A4J.Submit(.... );" ></code> and standard event processing is fired instead of the request. Only return <literal>false</literal> if your conditions were not completed, or set actions to be performed without any returned response if you do need to fire the request.
+ </para>
+ </note>
+ </section>
+
+
+
+ <section id="onCompleteAttribute.DifferencesAfterRelease1.0">
+ <title>What were the changes to the <varname>onComplete</varname> attribute after version 1.0?</title>
+ <para>
+ To avoid conflict with other JavaScript attributes, we have changed the placement of a function during a Javascript call. Rather than inserting attribute contents (<code>oncomplete:anotherFunction(this)</code>), we make the function anonymous (<code>oncomplete:function(){anotherFunction(this);}</code>) so that you can insert a <emphasis>chain</emphasis> of statements into an attribute.
+ </para>
+ <para>
+ The change also means that the <literal>this</literal> keyword will point to a parameter map instead of a control element. You can use <code>document.findElementById()</code> to retrieve references to this parameter map after a request is processed. Pages updated with AJAX will then reference a control removed from a DOM tree.
+ </para>
+ <para>
+ If you are certain that your element will not be updated, you can add <literal>onsubmit</literal> to your <literal><a4j:support></literal> tag (or <literal>onclick</literal> to your <literal><a4j:commandLink/Button></literal> tag) to place a reference to a known variable, like so: <code><a4j:commandLink onclick="var myControl=this;" oncomplete="anotherFunction(myControl)"/></code>).</para>
+ <note>
+ <para>The onComplete syntax now follows this form:</para>
+ <programlisting role="XML">
+ <![CDATA[<someAjaxActionComponent ...oncomplete="myFunc(req,event,data)".../>]]>
+ </programlisting>
+ <para>The <literal>event</literal> is a variable defining the location in which the JavaScript event that fires the request will be placed. <literal>data</literal> is a variable containing the deserialized value of the <varname>data</varname> attribute.</para>
+ </note>
+ </section>
+
+
+
+
+ <section id="InvokeOnComponentUsingWithJSF1.2">
+ <title>Can I use InvokeOnComponent with JSF 1.2?</title>
+ <para>RichFaces does not use <literal>invokeOnComponent</literal> for two reasons:</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ To retain compatibility with JSF 1.1 and MyFaces applications, since these are often used in corporate applications.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>invokeOnComponent</literal> works well when used to communicate between a Widget and a backed component, or to update the content of a rendered component. However, there are some limitations for more complicated use-cases implemented in RichFaces, such as making update decisions with application logic.
+ </para>
+ </listitem>
+ </itemizedlist>
+ <para>This means that you must update whole components (for example, an entire <literal>dataTable</literal>), but all AJAX core action components in that component will work correctly.</para>
+ </section>
+
+
+ <!--<section id="RegionsInDataTables">
+ <?dbhtml filename="RegionsInDataTables.html"?>
+ <title>Regions in Data Tables</title>
+ <para>The regions in Data Tables aren't supported now, but the feature will be implemented in a new Ajax4jsf version for JSF 1.2.</para>
+ </section>-->
+
+
+ <section id="keepAliveComponentGeneratesException">
+ <title>How do I avoid generating exceptions for the <literal><a4j:keepAlive></literal> component?</title>
+ <para>Remember: the component stores beans in a serialized view. Your bean should implement <literal>java.io.Serializable</literal>.</para>
+ </section>
+
+ <section id="AFormIsNotSubmittedOrASetterIsNotCalledAfterAJAXrequest">
+ <title>My form will not submit, or, my setter is not called after an AJAX request. What's wrong?</title>
+ <para>This can occur because of conversion or validation errors at submission time. To verify this, place the following update message inside a form:
+ </para>
+ <programlisting role="XML"><![CDATA[<a4j:outputPanel ajaxRendered="true">
+ <h:messages/>
+</a4j:outputPanel>]]></programlisting>
+ <para>The <literal><rich:message></literal> component has built-in AJAX support, and can be combined with the <ulink url="http://www.jsfone.com/blog/max_katz/2008/07/creating_jsf_phase_listener.html">JSF Phase Tracker</ulink> to fix this issue, in some instances.</para>
+ </section>
+
+ <section id="DelayedRenderZone">
+ <title>How do I create an <literal>a4j</literal> delayed render zone?</title>
+ <para>The <literal><a4j:support></literal> component has a <varname>requestDelay</varname> attribute, where you can define the delay period.</para>
+ <!--<para>More information about this problem could be found on the <ulink
+ url="http://jboss.com/index.html?module=bb&op=viewtopic&t=104969"
+ >Ajax4Jsf Users Forum.</ulink>
+ </para>-->
+ </section>
+
+<!--#modify links outdated-->
+ <!--<section id="HowToStopPoll">
+ <title>How to stop <a4j:poll>?</title>
+ <para>More information about this problem could be found on the <ulink
+ url="http://jboss.com/index.html?module=bb&op=viewtopic&t=104951"
+ >Ajax4Jsf Users Forum. </ulink>
+ </para>
+ </section>-->
+
+ <section id="IgnoreDupResponsesAndRequestDelay">
+
+ <title>How do I use IgnoreDupResponses and requestDelay?</title>
+ <para><varname>ignoreDupResponses</varname> ignores an AJAX request if a newer request exists. <varname>requestDelay</varname> defines the time delay on the client between compiling a request response and sending that response. You can find more information in <xref linkend="QueueandTrafficFloodProtection" />.
+ </para>
+ </section>
+
+
+<!--#modify links outdated-->
+ <!--<section id="RefreshImage">
+ <title>How can I refresh an image with the <literal><a4j:support></literal> component?</title>
+ <para>More information about this problem could be found on the <ulink
+ url="http://jboss.com/index.html?module=bb&op=viewtopic&t=105995"
+ >Ajax4Jsf Users Forum. </ulink>
+ </para>
+ </section>-->
+
+
+ <section id="EventsQueueUsage">
+ <title>How do I use eventsQueue attribute?</title>
+ <para>The <literal>eventsQueue</literal> defines the name of the queue that will order upcoming AJAX requests. The queue makes certain that redundant requests are not sent. It is created and named by default. You can find more information in the section on <xref linkend="QueueandTrafficFloodProtection" />.</para>
+ </section>
+
+<!--#mpdify link outdated; faq not useful without link-->
+ <!--<section id="PageRequiredOrNot">
+ <title>Is the <literal><a4j:page></literal> component a requirementt?</title>
+ <para>
+ The <literal><4j:page></literal> component is used to solve incompatibility issues that arose in early versions of AJAX4JSF and MyFaces.</para>
+ <para>More information about this problem could be found on the <ulink
+ url="http://jboss.com/index.html?module=bb&op=viewtopic&t=106849&postdays=0&postorder=asc&start=0"
+ >Ajax4Jsf Users Forum. </ulink>
+ </para>
+ </section>-->
+
+ <section id="SeveralStatusOnPage">
+ <title>Can I use multiple <literal><a4j:status></literal> components on one page?</title>
+ <para>Yes, you can. You can find out more from the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?c=status">JBoss RichFaces Online Demos</ulink>.</para>
+ </section>
+
+ <section id="SomeProblemsWithRendering">
+ <title>Can I use the <literal><a4j:region></literal> component inside the <literal><a4j:repeat></literal> component?</title>
+ <para>
+ No, you cannot. The <literal><a4j:region></literal> component cannot work inside iteration components such as <literal><h:dataTable></literal> and <literal><a4j:repeat></literal>.</para>
+ <!--<para>The details could be found <ulink
+ url="http://jboss.com/index.html?module=bb&op=viewtopic&t=109080"
+ >here. </ulink>
+ </para>-->
+ </section>
+
+<!--#modify link outdated-->
+ <!--<section id="CustomAjaxRequest">
+ <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&op=viewtopic&t=114025"
+ >Ajax4Jsf Users Forum.</ulink>
+ </para>
+ </section>-->
+
+
+<!-- <section id="RerederingSingleDataTableColumn">
+ <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&op=viewtopic&t=105725"
+ >Ajax4Jsf Users Forum. </ulink>
+ </para>
+ </section>-->
+
+ <section id="DisableSkins">
+ <title>How can I disable skinnability?</title>
+ <para>You cannot disable skinnability, but you can use a special skin: <literal>plain</literal>. This skin has no parameters, and was created to enable you to embed RichFaces components into existing projects with their own predefined styles.</para>
+ <!--<para>For information you can see discussion about this problem on the <ulink
+ url="http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4066340#4066340"
+ >Ajax4Jsf Users Forum. </ulink>
+ </para>-->
+ </section>
+
+ <section id="reRenderingfailed">
+ <title>Why does my reRender fail when using hide/show components?</title>
+ <para>Rerendering fails when RichFaces tries to update a component that is defined as hidden or rendered. When <literal>rendered="false"</literal>, the component is not added to the DOM tree, so it cannot be updated (as per the limitations described in the AJAX Processing chapter).</para>
+ <para>The correct way to rerender a hidden or rendered component is to:</para>
+ <orderedlist>
+ <listitem>
+ <para>
+ Wrap the component that is to be hidden or rendered on AJAX in a wrapper component such as <literal><a4j:outputPanel></literal>.</para>
+ </listitem>
+ <listitem>
+ <para>Set the <varname>reRender</varname> attribute on the wrapper component instead of on the component itself.</para>
+ </listitem>
+ </orderedlist>
+ <para>Fpr example:</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>This ensures that the wrapper component presents in the DOM tree, which means that its contents can be updated dynamically.</para>
+ </section>
+
+<!--#modify outdated links-->
+<!--<section id="PreventDupRerenderingPoll">
+ <title>How to prevent duplicate reRendering when using <a4j:poll>?</title>
+ <para>For information you can see discussion about this problem on the <ulink
+ url="http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4059731#4059731"
+ >Ajax4Jsf Users Forum. </ulink>
+ </para>
+ </section>
+
+ <section id="JSCallPropblemsInInclude">
+ <title>Why does JavaScript call don't work in
+ <a4j:include>?</title>
+ <para>More information about this problem could be found on the <ulink
+ url="http://jboss.com/index.html?module=bb&op=viewtopic&t=104317"
+ >Ajax4Jsf Users Forum. </ulink>
+ </para>
+ </section>
+
+ <section id="IncludeAndNavRules">
+ <title>How to use <a4j:include> 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&op=viewtopic&p=4062036#4062036"
+ >Ajax4Jsf Users Forum. </ulink>
+ </para>
+ </section>-->
+
+ <section id="ResourceNotRegisteredException">
+ <title>Why am I seeing a <exceptionname>ResourceNotRegistered</exceptionname> Exception?</title>
+ <para>
+ RichFaces registers its resources (for example, scripts and images) after an application is accessed, and then accesses these via a generated URL. During application development, when an application is constantly updated on the server, RichFaces may re-register its resources after every server restart, while the browser may attempt to access resources via a cached URL.
+ </para>
+ <para>You can solve this problem by updating the browser cache: press <keycap>CTRL</keycap>+<keycap>F5</keycap>.</para>
+ </section>
+
+ <section id="RerenderingPartPage">
+ <title>How do I reRender only a particular row(s) of a table?</title>
+ <!--para> If you use dataTable then you may use <emphasis>
+ <property>"ajaxKeys"</property>
+ </emphasis> attribute to bind the rowKeys to be reRendered there. After you
+ need to point reRender on the specific rows. </para-->
+ <para>The <literal>ajaxKeys</literal> attribute defines Strings that are updated after an AJAX request, and lets you update several child components separately without updating the whole page.</para>
+
+ <programlisting role="XML"><![CDATA[...
+ <a4j:poll interval="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">
+ <title>How can I enable row selection in a scrollableDataTable using <literal>one and multi-selection rows mode</literal>?</title>
+ <para>To enable row selection in <literal>one and multi-selection rows mode</literal>, you must use the <varname>selection</varname> attribute. In the example code that follows, when a user submits the form, the current collection of objects selected by the user is placed in the object's property. Upon completion, the <literal><rich:modalPanel></literal> will be rendered with the selected data.</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>
+ To build this application, you can create a managed bean like the one below. The <literal>takeSelection()</literal> method fills the <literal>selectedCars</literal> Array with data retrieved from the <varname>selection</varname>. The <literal>getSelectedCars()</literal> method returns <literal>selectedCars</literal> Array, which is then used to populate select rows of the <literal><rich:dataTable></literal>.</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&op=viewtopic&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>"selection"</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><rich:modalPanel></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><rich:dataTable></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&op=viewtopic&t=122543"
+ >here</ulink>.</para>-->
+ </section>
+
+ <section id="ScrollableDataTableDragAndDrop">
+ <title>How do I select several rows in a <literal>scrollableDataTable</literal> and drag-and-drop them into a <literal>dataTable</literal>?</title>
+ <para>First, to enable row selection, see the previous section on <xref linkend="RowSelectionInScrollableDataTable" />.</para>
+ <para>
+ To enable the drag-and-drop function on a <literal>dataTable</literal>, use the <literal><rich:dragSupport></literal> and <literal><rich:dropSupport></literal> components, like so:</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>
+ The previous example is also available on the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf">RichFaces LiveDemo</ulink> site. Only one method is added where the dropped collection 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">
+ <title>How can I save the state of the <rich:simpleTogglePanel>?</title>
+ <para>You can use the <varname>opened</varname> attribute responsible for storing panel state, and an <literal><a4j:support></literal> tag bound to <varname>onexpand</varname> and <varname>oncollapse</varname> events.</para>
+ <para>In the following example, when you click on the toggle icon, the <literal><rich:simpleTogglePanel></literal> icon appears and the current state is displayed in the <literal><rich:modalPanel></literal>. This state is remembered between page views. </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>To build this application, create a managed bean like so:</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">
+ <title>How can I save the state of <rich:panelMenuGroup>?</title>
+ <para>You can use the <varname>expanded</varname> attribute and an <literal><a4j:support></literal> tag bound to <varname>onexpand</varname> and <varname>oncollapse</varname> events.</para>
+ <para>In the following example, when you click on the toggle icon, the <literal><rich:panelMenuGroup></literal> expands and the current state is displayed in the <literal><rich:modalPanel></literal>. This state is remembered across page views. </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>To build this application, create a managed bean like so:</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="RowSelectionInDataTable">
+ <title>How do I highlight the rows of a dataTable on the mouseover event?</title>
+ <para>Use the <literal>onRowMouseOver</literal> and <literal>onRowMouseOut</literal> attributes, like so:</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">
+ <title>How can I enable selecting the row of a <literal><rich:dataTable></literal> when I click on it, even if I click within the bounds of an <literal><h:inputText></literal>?</title>
+ <para>
+ Use the following JavaScript function to enable row selection when you click on the row:</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>You can then use <literal><a4j:support></literal> with <varname>event</varname> and <varname>onsubmit</varname> attributes, like so:</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">
+ <title>How do I rerender table cells with <a4j:support>?</title>
+ <para>To rerender table cells with <literal><a4j:support></literal>, set exact ID values for each component to be updated, and point this <varname>id</varname> to the <varname>reRender</varname> attribute.</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>
+ <note>
+ <para>The value of the <varname>reRender</varname> attribute belonging to the <literal> <a4j:support></literal> tag defines the sections of the page that will be updated. In the previous example code, the only update made is to the <literal><h:outputText></literal> component in the footer, because its <literal>id</literal> value matches the value of the <varname>reRender</varname> attribute. You can update multiple elements on a page by listing their IDs as the value of the <varname>reRender</varname> attribute.</para>
+ </note>
+ </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;
+
+ at Name("jsonTest")
+ at 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="DynamicColumns">
+ <title>How can I create dynamic columns?</title>
+ <para>You can create dynamic columns by using the <literal><rich:column></literal> with the <varname>rendered</varname> attribute. Set the value of the <varname>rendered</varname> attribute to match the ID of the dynamic cell, as in the following example code:</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>Alternatively, you could create a managed bean, like so:</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">
+ <title>How can I use RichFaces with Trinidad?</title>
+ <para>The following code is an example of a basic <filename>web.xml</filename> file that integrates RichFaces with Trinidad.</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>
+ <title>Why do I see a JavaScript conflict?</title>
+ <para>Richfaces 3.1.3 uses version 1.6.0 of the <filename> prototype.js</filename> instead of version 1.5.1, which has been used in earlier versions. The source of the conflict is that two versions of the prototype script are included. The first is included as a dependency of the toggle panel components, and the second is included explicitly as a link.</para>
+ <para>RichFaces 3.1.3 is bundled with the same scripts included in Prototype 1.6.0 and Scriptaculous 1.8.0:</para>
+ <programlisting role="XML"><![CDATA[...
+<context-param>
+ <param-name>org.richfaces.ExcludeScripts</param-name>
+ <param-value>Prototype,Scriptaculous</param-value>
+</context-param>
+...]]></programlisting>
+ <para>Using Prototype with RichFaces components can be problematic because issues that were fixed in version 1.6.0 were not always patched in version 1.5.1. When version 1.5.1 is used, some RichFaces components will not work as expected.</para>
+ </section>
+
+ <section id="fileUploadConf">
+ <title>How do I use the <rich:fileUpload> component with the Seam Framework?</title>
+ <para>To use the <literal><rich:fileUpload></literal> component with the Seam Framework, define initialization parameters for the Seam Filter in your <filename>web.xml</filename> file. The Seam Framework will then automatically set the component up for the AJAX4JSF filter at start-up time.</para>
+ <para>The following code is an example of defining initialization parameters:</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">
+ <title>How do I use the <rich:fileUpload> component with MyFaces?</title>
+ <para>The order in which filters are defined and mapped in <filename>web.xml</filename> is important to integrating the <literal><rich:fileUpload></literal> component with MyFaces. The code sample that follows shows the correct order in which to define your filters.</para>
+ <note>
+ <para>To ensure that this sequence wors correctly, map the extension filter on your Faces Servlet, not to <filename>*.jsf</filename>.</para>
+ </note>
+ <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">
+ <title>How do I enable optional object selection in <rich:suggestionbox>?</title>
+ <para>The <literal><rich:suggestionBox></literal> component provides features such as object selection. To store the selected items as objects to be accessed, follow these steps:</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ Add the <varname>usingSuggestObjects</varname> attribute to the <literal><rich:suggestionBox></literal> component, and define it as <literal>true</literal>.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ Use the <varname>onobjectchange</varname> event attribute to store the currently-selected objects.</para>
+ </listitem>
+ <listitem>
+ <para>
+ All of the selected objects are stored in the <literal>suggestion.SelectedItems</literal> Array. Each Array element contains <literal>text</literal> and <literal>object</literal> properties, so you can iterate this Array, retrieve objects that are not <literal>null</literal>, and retrieve the required property.</para>
+ </listitem>
+ </itemizedlist>
+ </section>
+
+
+
+ <section id="viewExpiredException">
+ <title>How do I enable handling for ViewExpiredException?</title>
+ <para>This exception appears after your session has timed out. Because RichFaces 3.1 is intended for use with JavaServer Faces 1.1, <exceptionname>ViewExpiredException</exceptionname>s will not generate automatically when RichFaces is used with JavaServer Faces 1.2. To work around this limitation, add the following to your <filename>web.xml</filename> file:</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">
+ <title>How do I enable handling for Request Errors and Session Expiration?</title>
+ <para>
+ To redefine the standard handlers that are responsible for processing different exceptional situations, follow these steps:
+ </para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ Add the following code to your <filename>web.xml</filename>:
+ </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 <literal>onError</literal> and <literal>onExpire</literal> handlers, like so:</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 a more detailed description of this process, see <xref linkend="RequestErrorsAndSessionExpirationHandling" /> in the Developer Guide.
+ </para>
+ </listitem>
+ </itemizedlist>
+ <note>
+ <para>
+ Custom <literal>onError</literal> and <literal>onExpire</literal> handlers will not work under MyFaces, because MyFaces handles exceptions with an internally-generated debug page. To prevent this behavior, use the following code:
+ </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">
+ <title>How can I add a cookie in an AJAX response?</title>
+ <para>
+ The bean described below adds a cookie to an AJAX response:</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>
+ Alternatively, you can define the cookie to be included as shown in the following example. After the <literal>test</literal> cookie is set, the value of that cookie will appear on a page.
+ </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 is new in AJAX4JSF 3.2.x?</title>
+ <para>The RichFaces 3.2.x releases have some new features:</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ the <literal><a4j:portlet</literal> component has been <emphasis>deprecated</emphasis>, since JSR-301 defines a similar function for <literal>UIViewRoot</literal> components;
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ the <literal><rich:ajaxValidator></literal>, <literal><rich:beanValidator></literal> and <literal><rich:graphValidator></literal> validators have been added to provide different validation types.
+ </para>
+ </listitem>
+ </itemizedlist>
+ </section>
+
+
+ <section id="OnJBossServer">
+ <title>How do I launch the RichFaces sample on the JBoss server?</title>
+ <para>
+ To launch the RichFaces sample application on the JBoss server, add the following code to your <filename>web.xml</filename>:
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<context-param>
+ <param-name>org.jboss.jbossfaces.WAR_BUNDLES_JSF_IMPL</param-name>
+ <param-value>true</param-value>
+</context-param>
+...]]></programlisting>
+ </section>
+
+ <section id="passBoolValueInComponentControl">
+ <title>How do I pass a Boolean value in the <rich:componentControl> component?</title>
+ <para>
+ The following code shows you how to avoid requiring a Boolean value:
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<rich:componentControl event="oncontextmenu" attachTiming="onload" for="em" operation="show">
+ <f:param value="#{node.description}" name="nm"/>
+ <f:param value="#{node.id}" name="id"/>
+ <f:param value="#{node.craftUrl}" name="crft"/>
+ <f:param value="#{node.craftUrl == null ? 'block' : 'none' }" name="cd"/>
+ <f:param value="#{node.craftUrl == null ? 'none' : 'block' }" name="ce"/>
+</rich:componentControl>
+...
+<rich:menuItem style="display: {cd};" value="Launch Craft" disabled="true" submitMode="none"/>
+<rich:menuItem style="display: {ce};" value="Launch Craft" disabled="false" onclick="launchcrft('{crft}');"/>
+...]]></programlisting>
+ <para>Use <code>'block'</code> instead of <code>' '</code> to avoid <literal>invalid style</literal> CSS errors.</para>
+ </section>
+</chapter>
Added: projects/docs/enterprise/5.0/RichFaces/en-US/Getting_Started.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/Getting_Started.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/Getting_Started.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,488 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<chapter id="GettingStarted">
+ <title>Getting Started with RichFaces</title>
+ <para>This chapter tells you how to plug RichFaces components into a JSF application. The instructions are based on a simple <emphasis>JSF with RichFaces</emphasis> creation process, from downloading the required libraries to running the application in a browser. These instructions do not depend on the integrated development environment that is in use.</para>
+
+
+ <section id="DownloadingRichFaces">
+ <title>Downloading the RichFaces Framework</title>
+ <para>You can download the latest release of RichFaces from the <ulink url="http://labs.jboss.com/jbossrichfaces/downloads">JBoss RichFaces Downloads area</ulink> at the JBoss community web site. The binary files (<filename>*.bin.zip</filename> or <filename>*.bin.tar.gz</filename> archives) contain a compiled, ready-to-use version of RichFaces with a set of basic skins.</para>
+ <para>Create a new directory named <literal>RichFaces</literal>. Download unzip the archive to this directory.</para>
+ <para>If you want to download and compile RichFaces yourself, you can read an article about the RichFaces Repository Structure and some aspects of working with it here: <ulink url="http://www.jboss.org/community/docs/DOC-11864">http://www.jboss.org/community/docs/DOC-11864</ulink>.</para>
+ </section>
+
+ <section id="SimpleJSFapplicationwithRichFaces">
+ <title>Simple JSF application with RichFaces</title>
+ <para><application>RichFaces Greeter</application> — the simple application — is similar to a typical <emphasis>hello world</emphasis> application, with one exception: the world of RichFaces will say "Hello!" to the user first.</para>
+ <para>Create a standard JSF 1.2 project named <literal>Greeter</literal>. Include all required libraries, and continue with the instructions that follow.</para>
+
+ <section id="AddingRichFaceslibrariesintotheproject">
+ <title>Adding RichFaces libraries into the project</title>
+ <para>From the <filename>RichFaces</filename> folder where you unzipped the RichFaces binary files, open the <filename>lib</filename>. This folder contains three <filename>*.jar</filename> files with API, UI, and implementation libraries. Copy these JARs from <filename>lib</filename> to the <filename>WEB-INF/lib</filename> directory of your <application>Greeter</application> JSF application.</para>
+ <important>
+ <para>
+ A JSF application with RichFaces assumes that the following JARs are available in the project:
+ </para>
+ <itemizedlist>
+ <listitem><para><filename>commons-beanutils-1.7.0.jar</filename></para></listitem>
+ <listitem><para><filename>commons-collections-3.2.jar</filename></para></listitem>
+ <listitem><para><filename>commons-digester-1.8.jar</filename></para></listitem>
+ <listitem><para><filename>commons-logging-1.0.4.jar</filename></para></listitem>
+ <listitem><para><filename>jhighlight-1.0.jar</filename></para></listitem>
+ </itemizedlist>
+ </important>
+ </section>
+
+ <section id="RegisteringRichFacesinwebxml">
+ <title>Registering RichFaces in <filename>web.xml</filename></title>
+ <para>After you add the RichFaces libraries to the project, you must register them in the project <filename>web.xml</filename> file. Add the following to <filename>web.xml</filename>:</para>
+ <programlisting role="XML">
+<![CDATA[...
+<!-- Plugging the "Blue Sky" skin into the project -->
+<context-param>
+ <param-name>org.richfaces.SKIN</param-name>
+ <param-value>blueSky</param-value>
+</context-param>
+
+<!-- Making the RichFaces skin spread to standard HTML controls -->
+<context-param>
+ <param-name>org.richfaces.CONTROL_SKINNING</param-name>
+ <param-value>enable</param-value>
+</context-param>
+
+<!-- Defining and mapping the RichFaces filter -->
+<filter>
+ <display-name>RichFaces Filter</display-name>
+ <filter-name>richfaces</filter-name>
+ <filter-class>org.ajax4jsf.Filter</filter-class>
+</filter>
+
+<filter-mapping>
+ <filter-name>richfaces</filter-name>
+ <servlet-name>Faces Servlet</servlet-name>
+ <dispatcher>REQUEST</dispatcher>
+ <dispatcher>FORWARD</dispatcher>
+ <dispatcher>INCLUDE</dispatcher>
+</filter-mapping>
+...]]>
+ </programlisting>
+ <para>For more information about RichFaces skins, read <xref linkend="Skinnability" />.</para>
+ <para>Finally, your <filename>web.xml</filename> should look like this: </para>
+ <programlisting role="XML">
+<![CDATA[<?xml version="1.0"?>
+<web-app version="2.5"
+ xmlns="http://java.sun.com/xml/ns/javaee"
+ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
+<display-name>Greeter</display-name>
+
+<context-param>
+ <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
+ <param-value>server</param-value>
+</context-param>
+
+<context-param>
+ <param-name>org.richfaces.SKIN</param-name>
+ <param-value>blueSky</param-value>
+</context-param>
+
+<context-param>
+ <param-name>org.richfaces.CONTROL_SKINNING</param-name>
+ <param-value>enable</param-value>
+</context-param>
+
+<filter>
+ <display-name>RichFaces Filter</display-name>
+ <filter-name>richfaces</filter-name>
+ <filter-class>org.ajax4jsf.Filter</filter-class>
+</filter>
+
+<filter-mapping>
+ <filter-name>richfaces</filter-name>
+ <servlet-name>Faces Servlet</servlet-name>
+ <dispatcher>REQUEST</dispatcher>
+ <dispatcher>FORWARD</dispatcher>
+ <dispatcher>INCLUDE</dispatcher>
+</filter-mapping>
+
+<listener>
+ <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
+</listener>
+
+<!-- Faces Servlet -->
+<servlet>
+ <servlet-name>Faces Servlet</servlet-name>
+ <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
+ <load-on-startup>1</load-on-startup>
+</servlet>
+
+<!-- Faces Servlet Mapping -->
+<servlet-mapping>
+ <servlet-name>Faces Servlet</servlet-name>
+ <url-pattern>*.jsf</url-pattern>
+</servlet-mapping>
+
+<login-config>
+ <auth-method>BASIC</auth-method>
+ </login-config>
+</web-app>]]>
+ </programlisting>
+ </section>
+
+ <section id="Managedbean">
+ <title>Managed bean</title>
+ <para>The <application>RichFaces Greeter</application> application needs a managed bean. In the project's <filename>JavaSource</filename> directory, create a new managed bean named <literal>user</literal> in the <literal>demo</literal> package. Place the following code in <filename>user</filename>:
+ </para>
+ <programlisting role="JAVA">package demo;
+
+public class user {
+ private String name="";
+ public String getName() {
+ return name;
+ }
+ public void setName(String name) {
+ this.name = name;
+ }
+}</programlisting>
+ </section>
+
+ <section id="Registeringbeaninfacescofig">
+ <title>Registering the bean in <filename>faces-cofig.xml</filename></title>
+ <para>To register the <literal>user</literal> bean, add the following to the <filename>faces-config.xml</filename> file: </para>
+ <programlisting role="XML">
+<![CDATA[<?xml version="1.0" encoding="UTF-8"?>
+<faces-config version="1.2"
+ xmlns="http://java.sun.com/xml/ns/javaee"
+ xmlns:xi="http://www.w3.org/2001/XInclude"
+ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
+ <managed-bean>
+ <description>UsernName Bean</description>
+ <managed-bean-name>user</managed-bean-name>
+ <managed-bean-class>demo.user</managed-bean-class>
+ <managed-bean-scope>request</managed-bean-scope>
+ <managed-property>
+ <property-name>name</property-name>
+ <property-class>java.lang.String</property-class>
+ <value/>
+ </managed-property>
+ </managed-bean>
+</faces-config>
+]]>
+ </programlisting>
+ </section>
+
+ <section id="RichFacesGreeterindex">
+ <title>RichFaces Greeter index.jsp</title>
+ <para><application>RichFaces Greeter</application> has only one JSP page. Create <filename>index.jsp</filename> in the root of <literal>WEB CONTENT</literal> folder and add the following to the JSP file:</para>
+ <programlisting role="XML">
+<![CDATA[<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
+<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
+<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
+<!-- RichFaces tag library declaration -->
+<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
+<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
+
+<html>
+ <head>
+ <title>RichFaces Greeter</title>
+ </head>
+ <body>
+ <f:view>
+ <a4j:form>
+ <rich:panel header="RichFaces Greeter" style="width: 315px">
+ <h:outputText value="Your name: " />
+ <h:inputText value="#{user.name}" >
+ <f:validateLength minimum="1" maximum="30" />
+ </h:inputText>
+
+ <a4j:commandButton value="Get greeting" reRender="greeting" />
+
+ <h:panelGroup id="greeting" >
+ <h:outputText value="Hello, " rendered="#{not empty user.name}" />
+ <h:outputText value="#{user.name}" />
+ <h:outputText value="!" rendered="#{not empty user.name}" />
+ </h:panelGroup>
+ </rich:panel>
+ </a4j:form>
+ </f:view>
+ </body>
+</html>]]>
+ </programlisting>
+ <para>The application uses three RichFaces components: <emphasis role="bold"><property><rich:panel></property></emphasis> is used as visual container for information; <emphasis role="bold"><property><a4j:commandButton></property></emphasis> with built-in AJAX support lets a greeting be rendered dynamically after a response returns; and <emphasis role="bold"><property><a4j:form></property></emphasis> helps the button to perform the action.</para>
+ <note>
+ <para>The RichFaces tag library should be declared on each JSP page. For XHTML pages, add the following lines to declare your tag libraries:</para>
+ <programlisting role="XML"><![CDATA[<xmlns:a4j="http://richfaces.org/a4j">
+<xmlns:rich="http://richfaces.org/rich">]]></programlisting>
+ <para>Now, run the application on the server by pointing your browser to the <filename>index.jsp</filename> page: <literal>http://localhost:8080/Greeter/index.jsf</literal>
+ </para>
+ <figure>
+ <title>"RichFaces Greeter" application</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/GettingStarted_RFGreeterApp.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </note>
+ </section>
+ </section>
+
+ <section>
+ <title>Integration of RichFaces into Maven Project</title>
+ <para>This section tells you how to create a simple JSF with RichFaces application using Maven.</para>
+ <para>First, ensure that Maven is installed on your local machine. This JSF application will run on the Apache Tomcat 6.0 server — download and install this if you have not done so already.</para>
+ <para>To create the project structure and populate it with basic content, we use the <literal>maven-archetype-jsfwebapp</literal> Maven archetype, which is a part of the RichFaces CDK.</para>
+ <para>The <literal>maven-archetype-jsfwebapp</literal> archetype and the project itself require extra repositories: <literal>http://snapshots.jboss.org/maven2/</literal> and <literal>http://repository.jboss.com/maven2/</literal>. The easist way to make these repositories visible to Maven is to create a profile in <filename>maven_installation_folder/conf/settings.xml</filename>. Add the following beneath the <literal><profiles></literal> element:</para>
+
+ <programlisting role="XML"><![CDATA[
+<profile>
+ <id>jsf-app-profile</id>
+ <repositories>
+ <repository>
+ <releases>
+ <enabled>true</enabled>
+ </releases>
+ <snapshots>
+ <enabled>true</enabled>
+ <updatePolicy>always</updatePolicy>
+ </snapshots>
+ <id>snapshots.jboss.org</id>
+ <name>Snapshot Jboss Repository for Maven</name>
+ <url>http://snapshots.jboss.org/maven2/</url>
+ <layout>default</layout>
+ </repository>
+ <repository>
+ <releases>
+ <enabled>true</enabled>
+ </releases>
+ <snapshots>
+ <enabled>true</enabled>
+ <updatePolicy>always</updatePolicy>
+ </snapshots>
+ <id>repository.jboss.com</id>
+ <name>Jboss Repository for Maven</name>
+ <url>http://repository.jboss.com/maven2/</url>
+ <layout>default</layout>
+ </repository>
+ </repositories>
+</profile>
+ ]]></programlisting>
+ <para>Once you have added the profile, you must also activate it. Add the following beneath the <literal><activeProfiles></literal> element.</para>
+
+ <programlisting role="XML"><![CDATA[...
+<activeProfiles>
+ <activeProfile>jsf-app-profile</activeProfile>
+</activeProfiles>
+...]]></programlisting>
+
+
+ <para>This fulfills the requirements for creating a project using the <literal>maven-archetype-jsfwebapp</literal> archetype. Create a directory for your project and run the following command from within the directory:</para>
+ <programlisting role="XML" ><![CDATA[...
+mvn archetype:generate -DarchetypeGroupId=org.richfaces.cdk -DarchetypeArtifactId=maven-archetype-jsfwebapp -DarchetypeVersion=3.3.1.GA -DgroupId=org.docs.richfaces -DartifactId=jsf-app
+...]]></programlisting>
+
+
+ <para>You can adjust some parameters of the command.</para>
+ <table>
+ <title>Title of the table</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Parameter</entry>
+
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>-DgroupId</entry>
+ <entry>Defines the package for the Managed beans</entry>
+ </row>
+ <row>
+ <entry>-DartifactId</entry>
+ <entry>Defines the name of the project</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+
+
+ <para>This command generates a JSF project that has the following structure:</para>
+
+ <programlisting role="XML"><![CDATA[
+jsf-app
+|-- pom.xml
+`-- src
+ |-- main
+ | |-- java
+ | | `-- org
+ | | `-- docs
+ | | `-- richfaces
+ | | `-- Bean.java
+ | |-- resources
+ | `-- webapp
+ | |-- WEB-INF
+ | | |-- faces-config.xml
+ | | `-- web.xml
+ | |-- index.jsp
+ | `-- pages
+ | |-- index.jsp
+ | `-- index.xhtml
+ `-- test
+ `-- java
+ `-- org
+ `-- docs
+ `-- richfaces
+ `-- BeanTest.java
+ ]]></programlisting>
+ <para>
+ Go to the <literal>jsf-app</literal> folder and open the project descriptor, <filename>pom.xml</filename> to edit and add dependencies. The <literal><dependencies></literal> element should contain at least the following:
+ </para>
+
+
+
+ <programlisting role="XML"><![CDATA[...
+<dependencies>
+ <dependency>
+ <groupId>junit</groupId>
+ <artifactId>junit</artifactId>
+ <version>3.8.1</version>
+ <scope>test</scope>
+ </dependency>
+ <dependency>
+ <groupId>javax.servlet</groupId>
+ <artifactId>servlet-api</artifactId>
+ <version>2.4</version>
+ <scope>provided</scope>
+ </dependency>
+ <dependency>
+ <groupId>javax.servlet</groupId>
+ <artifactId>jsp-api</artifactId>
+ <version>2.0</version>
+ <scope>provided</scope>
+ </dependency>
+ <dependency>
+ <groupId>jstl</groupId>
+ <artifactId>jstl</artifactId>
+ <version>1.1.2</version>
+ </dependency>
+ <dependency>
+ <groupId>javax.servlet.jsp</groupId>
+ <artifactId>jsp-api</artifactId>
+ <version>2.1</version>
+ <scope>provided</scope>
+ </dependency>
+ <dependency>
+ <groupId>javax.faces</groupId>
+ <artifactId>jsf-api</artifactId>
+ <version>1.2_12</version>
+ </dependency>
+ <dependency>
+ <groupId>javax.faces</groupId>
+ <artifactId>jsf-impl</artifactId>
+ <version>1.2_12</version>
+ </dependency>
+ <dependency>
+ <groupId>javax.el</groupId>
+ <artifactId>el-api</artifactId>
+ <version>1.0</version>
+ <scope>provided</scope>
+ </dependency>
+ <dependency>
+ <groupId>el-impl</groupId>
+ <artifactId>el-impl</artifactId>
+ <version>1.0</version>
+ <scope>provided</scope>
+ </dependency>
+ <dependency>
+ <groupId>javax.annotation</groupId>
+ <artifactId>jsr250-api</artifactId>
+ <version>1.0</version>
+ </dependency>
+ <!-- RichFaces libraries -->
+ <dependency>
+ <groupId>org.richfaces.framework</groupId>
+ <artifactId>richfaces-api</artifactId>
+ <version>3.3.1.GA</version>
+ </dependency>
+ <dependency>
+ <groupId>org.richfaces.framework</groupId>
+ <artifactId>richfaces-impl</artifactId>
+ <version>3.3.1.GA</version>
+ </dependency>
+ <dependency>
+ <groupId>org.richfaces.ui</groupId>
+ <artifactId>richfaces-ui</artifactId>
+ <version>3.3.1.GA</version>
+ </dependency>
+</dependencies>
+...]]></programlisting>
+ <para>The final three dependencies add RichFaces libraries to the project. You can now build the project by running the <code>mvn install</code> command.</para>
+ <para>When you see <literal>BUILD SUCCESSFUL</literal>, the project is assembled. It can now be imported to an IDE and run on the server.</para>
+
+ <para>You can build this project for the Eclipse IDE with the following command: <code>mvn eclipse:eclipse -Dwtpversion=2.0</code></para>
+
+ <para>Once the project is built, you can import it into Eclipse. Then, open <filename>jsf-app/src/main/webapp/WEB-INF/web.xml</filename> to configure it according to the listing under <!--#retag--><xref linkend="RegisteringRichFacesinwebxml" />.</para>
+ <para>The project is now configured and now you can start using RichFaces. Open <filename>jsf-app/src/main/webapp/pages/index.jsp</filename> and add the following tag library declaration.</para>
+ <programlisting role="XML"><![CDATA[...
+<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
+...]]></programlisting>
+
+ <para>If you add some RichFaces component to the <filename>index.jsp</filename> page (<literal><rich:calendar></literal>, for instance), your <filename>index.jsp</filename> page will look like this:</para>
+
+ <programlisting role="XML"><![CDATA[...
+<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
+<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
+<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
+<html>
+ <head>
+ <title>JSF Application with RichFaces built by Maven</title>
+ </head>
+ <body>
+ <f:view>
+ <rich:calendar />
+ </f:view>
+ </body>
+</html>
+...]]></programlisting>
+
+ <para>You can now run the application on the Tomcat server and open it in your preferred browser by pointing the browser to <literal>http://localhost:8080/jsf-app/</literal>.</para>
+ </section>
+
+
+<!-- RELEVANT RESOURCES LINKS -->
+
+ <section id="RelevantResourcesLinks">
+ <title>Relevant Resources Links</title>
+ <para><ulink url="https://www.redhat.com/apps/store/developers/jboss_developer_studio.html">JBoss Developer Studio</ulink> includes tight integration with the RichFaces component framework. The following links might be useful for those who already use this IDE and RichFaces to develop applications, and for those who wish to improve their development process.</para>
+ <itemizedlist>
+ <listitem>
+
+ <para>The <ulink url="http://download.jboss.org/jbosstools/nightly-docs/en/GettingStartedGuide/html/first_seam.html#rich_components">Rich Components</ulink> chapter in the <citetitle>Getting Started with JBoss Developer Studio Guide</citetitle> describes how to add RichFaces components to a CRUD application.
+ </para>
+ </listitem>
+ <listitem>
+ <para>The <ulink url="http://download.jboss.org/jbosstools/nightly-docs/en/jsf/html/palette.html">JBoss Tools Palette</ulink> chapter in <citetitle>Visual Web Tools Reference Guide</citetitle> describes the advantages of using Tools Palette (with JBDS) to create pages that include RichFaces applications.
+ </para>
+ </listitem>
+ <listitem>
+ <para>The <ulink url="http://docs.jboss.org/tools/movies/demos/rich_faces_demo/rich_faces_demo.htm">RichFaces Toolkit for Developing Web Applications</ulink> video tutorial demonstrates some aspects of interaction with JBoss Developer Studio while working with RichFaces.
+ </para>
+ </listitem>
+ <listitem>
+ <para><ulink url="http://docs.jboss.org/tools/movies/demos/rich_faces_demo/rich_faces_demo.htm">How to Configure Maven for RichFaces</ulink> discusses Maven configuration for RichFaces in brief.
+ </para>
+ </listitem>
+ <listitem>
+ <para><ulink url="http://www.jboss.org/community/docs/DOC-13446">RichFaces Release Procedure</ulink> describes how RichFaces release builds are made.
+ </para>
+ </listitem>
+ </itemizedlist>
+ <para>We also recommend reading the <ulink url="http://mkblog.exadel.com/?p=110">quick overview</ulink> of <citetitle>Practical RichFaces</citetitle> by Max Katz at his blog.</para>
+ </section>
+</chapter>
Added: projects/docs/enterprise/5.0/RichFaces/en-US/IDE_Support.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/IDE_Support.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/IDE_Support.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,10 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<chapter id="IDESupport">
+ <title>Integrated Development Environment Support</title>
+ <para> RichFaces is supported by both <ulink url="http://www.redhat.com/developers/rhds/index.html">JBoss Developer Studio 1.0.0 GA</ulink> and <ulink url="http://www.jboss.org/tools/index.html">Jboss Tools</ulink>. JBoss Developer Studio is a fully packaged Integrated Development Environment (IDE) that provides full support for Java Server Faces, RichFaces, Facelets, Struts and other Web technologies. It seamlessly combines visual and source-oriented development approaches. You can add JBoss Developer Studio capabilities to any JSF project by adding the appropriate libraries and modifying configuration files as required.
+ </para>
+</chapter>
+
Added: projects/docs/enterprise/5.0/RichFaces/en-US/Introduction.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/Introduction.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/Introduction.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<chapter id="Introduction">
+
+<title>Introduction</title>
+
+<para>RichFaces is an open source framework that adds AJAX capability into existing JSF applications without resorting to JavaScript. </para>
+
+<para>RichFaces leverages aspects of the JavaServer Faces (JSF) framework, including lifecycle, validation, conversion facilities, and management of static and dynamic resources. RichFaces components with built-in AJAX support and a highly customizable look-and-feel can be easily incorporated into JSF applications. </para>
+
+<para>RichFaces allows you to:</para>
+
+ <itemizedlist>
+<listitem><para>Experience the benefits of JSF while working with AJAX. RichFaces is fully integrated into the JSF lifecycle. Where other frameworks only allow access to the managed bean facility, RichFaces lets you access the action and value change listeners, and invokes server-side validators and converters during the AJAX request-response cycle. </para></listitem>
+
+<listitem><para>Add AJAX capabilities to existing JSF applications. The RichFaces framework provides two component libraries (Core AJAX and UI). The Core library adds AJAX functionality to existing pages, so you need not write any JavaScript or replace existing components with new AJAX components manually. RichFaces enables page-wide rather than component-wide AJAX support, giving you the opportunity to define events on the page. <!--An event invokes an AJAX request and areas of the page which become synchronized with the JSF Component Tree after changing the data on the server by AJAX request in accordance with events fired on the client.--> </para></listitem>
+
+<listitem><para>Quickly and easily create different views with a variety of components, available out-of-the-box. The RichFaces UI library contains components for adding rich user interface (UI) features to JSF applications, providing you with a broad variety of AJAX-enabled components with extensive skins support. RichFaces components are designed to integrate seamlessly with other third-party component libraries, so you have more options when you develop applications.</para></listitem>
+
+<listitem><para>Write your own rich components with built-in AJAX support. The Component Development Kit (CDK) is constantly being expanded. It includes both code generation and templating facilities and a simple JSP-like (JavaServer Pages) syntax, letting you create first-class rich components with built-in AJAX functionality.</para></listitem>
+
+<listitem><para>Package resources with application Java classes. RichFaces provides advanced support for managing different resource types, including images, JavaScript code, and CSS stylesheets. The resource framework makes it easier to include these resources in JAR files with your custom component code.</para></listitem>
+
+<listitem><para>Quickly and easily generate binary resources. The resource framework can generate images, sounds, Excel spreadsheets, etc. in real time, so you can, for example, create images with the Java Graphics 2D library and other similar resources.</para></listitem>
+
+<listitem><para>Customize the look and feel of your user interface with skins-based technology. RichFaces lets you easily define and manage different color schemes and other user interface parameters by using named <emphasis>skin parameters</emphasis>. This means you can access UI parameters from JSP and Java code to adjust your UI in real time. RichFaces includes a number of predefined skins to kick-start your application's development, but it is easy to create your own custom skins.</para></listitem>
+
+<listitem><para>Simultaneously create and test your components, actions, listeners, and pages. RichFaces will soon include an automated testing facility to generate test cases for your component as you develop it. The testing framework tests not only the components, but also any other server-side or client-side functionality, including JavaScript code — and it will do so <emphasis>without</emphasis> deploying the test application into the Servlet container. </para></listitem>
+</itemizedlist>
+
+<para>RichFaces UI components can be implemented immediately, right out of the box. This saves development time and gives you immediate access to RichFaces web application development features, so experience with RichFaces is fast and easy to obtain.</para>
+</chapter>
Added: projects/docs/enterprise/5.0/RichFaces/en-US/Links_to_Resources.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/Links_to_Resources.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/Links_to_Resources.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,46 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<chapter id="Links">
+ <title>Links to information resources</title>
+ <table>
+ <title>Web Resources</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Resources</entry>
+ <entry>Links</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>JBoss RichFaces</entry>
+ <entry>
+ <para><ulink url="http://labs.jboss.com/portal/jbossrichfaces/">JBoss RichFaces</ulink></para>
+ </entry>
+ </row>
+ <row>
+ <entry>JBoss Forum</entry>
+ <entry>
+ <para><ulink url="http://jboss.com/index.html?module=bb&op=main&c=27">JBoss Forums</ulink></para>
+ </entry>
+ </row>
+ <row>
+ <entry>RichFaces Wiki</entry>
+ <entry>
+ <para><ulink url="http://labs.jboss.com/wiki/RichFaces">RichFaces Wiki</ulink></para>
+ </entry>
+ </row>
+
+
+ <row>
+ <entry>RichFaces Blog</entry>
+ <entry>
+ <ulink url="http://jroller.com/page/a4j">RichFaces Blog</ulink>
+ </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+</chapter>
Added: projects/docs/enterprise/5.0/RichFaces/en-US/Revision_History.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/Revision_History.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/Revision_History.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,28 @@
+<?xml version='1.0'?>
+
+<!DOCTYPE appendix PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<appendix id="appe-Publican-Revision_History">
+ <title>Revision History</title>
+ <simpara>
+ <revhistory>
+ <revision>
+ <revnumber>1.0</revnumber>
+ <date></date>
+ <author>
+ <firstname></firstname>
+ <surname></surname>
+ <email></email>
+ </author>
+ <revdescription>
+ <simplelist>
+ <member></member>
+ </simplelist>
+ </revdescription>
+ </revision>
+ </revhistory>
+ </simpara>
+</appendix>
+
+
Added: projects/docs/enterprise/5.0/RichFaces/en-US/RichFaces_Developer_Guide.ent
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/RichFaces_Developer_Guide.ent (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/RichFaces_Developer_Guide.ent 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,5 @@
+<!ENTITY PRODUCT "Documentation">
+<!ENTITY BOOKID "RichFaces_Developer_Guide">
+<!ENTITY HOLDER "Red Hat, Inc">
+<!ENTITY YEAR "2009">
+<!ENTITY VERSION "5.0.0">
Added: projects/docs/enterprise/5.0/RichFaces/en-US/RichFaces_Developer_Guide.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/RichFaces_Developer_Guide.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/RichFaces_Developer_Guide.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<book>
+ <xi:include href="Book_Info.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <xi:include href="Introduction.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <xi:include href="Technical_Requirements.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <xi:include href="Getting_Started.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <xi:include href="Settings.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <xi:include href="Architecture_Overview.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <xi:include href="IDE_Support.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <xi:include href="Links_to_Resources.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <xi:include href="Revision_History.xml" xmlns:xi="http://www.w3.org/2001/XInclude" />
+ <index />
+</book>
Added: projects/docs/enterprise/5.0/RichFaces/en-US/Settings.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/Settings.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/Settings.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,403 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<chapter id="SettingsForDifferentEnvironments">
+ <title>Settings for different environments</title>
+ <para>RichFaces includes support for all tags (components) included in the JavaServer Faces (JSF) specification. To add RichFaces capabilities to an existing JSF project, place the RichFaces libraries into the <filename>lib</filename> directory of the project, and add filter mapping. The behaviour of the existing project does not change when ou add RichFaces.
+ </para>
+
+ <section id="WebApplicationDescriptorParameters" role="updated">
+
+ <title>Web Application Descriptor Parameters</title>
+
+ <para>RichFaces does not require that any parameters be defined in your <filename>web.xml</filename>, but the RichFaces parameters listed below will help you during the development process and increase the flexibility of your RichFaces applications.</para>
+
+ <para>
+ <table>
+ <title>Initialization Parameters</title>
+ <tgroup cols="3">
+ <thead>
+ <row>
+ <entry>Name</entry>
+
+ <entry>Default</entry>
+
+ <entry>Description</entry>
+ </row>
+ </thead>
+
+ <tbody>
+
+ <row>
+ <entry>org.richfaces.SKIN</entry>
+
+ <entry>DEFAULT</entry>
+
+ <entry>The name of a skin that is used in an application. Can be a literal string with a skin name or the EL expression (<literal>#{...}</literal>) associated with a String property (skin name) of a property of a <literal>org.richfaces.framework.skin</literal> type. In the latter case, that instance is used as the current skin.</entry>
+ </row>
+
+ <row>
+ <entry>org.richfaces.LoadScriptStrategy</entry>
+
+ <entry>DEFAULT</entry>
+
+ <entry>Defines how the RichFaces script files are loaded to the application. Possible values are <literal>ALL</literal>, <literal>DEFAULT</literal> and <literal>NONE</literal>. For more information, see <xref linkend="ScriptsandStylesLoadStrategy" />.</entry>
+ </row>
+
+ <row>
+ <entry>org.richfaces.LoadStyleStrategy</entry>
+
+ <entry>DEFAULT</entry>
+
+ <entry>Defines how the RichFaces style files are loaded into the application. Possible values are: <literal>ALL</literal>, <literal>DEFAULT</literal>, or <literal>NONE</literal>. For more information, see <xref linkend="ScriptsandStylesLoadStrategy" />.</entry>
+ </row>
+
+ <row>
+ <entry>org.ajax4jsf.LOGFILE</entry>
+
+ <entry>none</entry>
+
+ <entry>The URL of an application or a container log file (if applicable). If this parameter is set, content from the given URL is shown on a Debug page in the <literal>iframe</literal> window.</entry>
+ </row>
+
+ <row>
+ <entry>org.ajax4jsf.VIEW_HANDLERS</entry>
+
+ <entry>none</entry>
+
+ <entry>A comma-separated list of <literal>ViewHandler</literal> instances for inserting in a view handler chain. These handlers are inserted before the RichFaces viewhandlers, in the order they are listed. In a Facelets application, you would declare <literal>com.sun.facelets.FaceletViewHandler</literal> here instead of in the <filename>faces-config.xml</filename> file.</entry>
+ </row>
+
+ <row>
+ <entry>org.ajax4jsf.CONTROL_COMPONENTS</entry>
+
+ <entry>none</entry>
+
+ <entry>A comma-separated list of special <emphasis>control case</emphasis> components, such as the messages bundle loader or an alias bean component. These handlers are provided via a reflection from the static field <literal>COMPONENT_TYPE</literal>. Encoding methods for these components are always called while rendering AJAX responses, even if a component has not been updated.</entry>
+ </row>
+
+ <row>
+ <entry>org.ajax4jsf.ENCRYPT_RESOURCE_DATA</entry>
+
+ <entry>false</entry>
+
+ <entry>For generated resources (such as encrypt generation data), this is encoded in the resource URL. For example, the URL of an image generated by the <classname>mediaOutput</classname> component contains the name of a generation method. Since malicious code can exploit this to create a request for any JSF bean or attribute, this parameter should be set to <literal>true</literal> in critical applications. (This fix works with Java Runtime Environment 1.4.)</entry>
+ </row>
+
+ <row>
+ <entry>org.ajax4jsf.ENCRYPT_PASSWORD</entry>
+
+ <entry>random</entry>
+
+ <entry>A password used to encrypt resource data. If this is not set, a random password is used.</entry>
+ </row>
+
+ <row>
+ <entry>org.ajax4jsf.COMPRESS_SCRIPT</entry>
+ <entry>true</entry>
+ <entry>When defined, does not allow the frameword to reformat JavaScript files. This means that the debug feature cannot be used.</entry>
+ </row>
+ <row>
+ <entry>org.ajax4jsf.RESOURCE_URI_PREFIX</entry>
+ <entry>a4j</entry>
+ <entry>Defines the prefix to be added to the URLs of all generated resources. This is designed to handle RichFaces generated resource requests.</entry>
+ </row>
+ <row>
+ <entry>org.ajax4jsf.GLOBAL_RESOURCE_URI_PREFIX</entry>
+ <entry>a4j/g</entry>
+ <entry>Defines the prefix to be added to the URI of all global resources. This prefix is designed to handle RichFaces generated resource requests.</entry>
+ </row>
+ <row>
+ <entry>org.ajax4jsf.SESSION_RESOURCE_URI_PREFIX</entry>
+ <entry>a4j/s</entry>
+ <entry>Defines the prefix to be used to track the sessions of generated resources. This prefix is designed to handle RichFaces generated resource requests.</entry>
+ </row>
+ <row>
+ <entry>org.ajax4jsf.DEFAULT_EXPIRE</entry>
+ <entry>86400</entry>
+ <entry> Defines the period (in seconds) for which resources are cached when they are streamed back to the browser.
+ </entry>
+ </row>
+
+ <row>
+ <entry>org.ajax4jsf.SERIALIZE_SERVER_STATE</entry>
+ <entry>false</entry>
+ <entry>If set to <literal>true</literal>, the component state (not the tree) will be serialized before it is stored in the session. This can be useful in applications with view state that is sensitive to model changes. Alternatively, use <literal>com.sun.faces.serializeServerState</literal> and <literal>
+ org.apache.myfaces.SERIALIZE_STATE_IN_SESSION</literal> parameters in their respective environments.</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+ </para>
+
+ <note>
+ <para><literal>org.richfaces.SKIN</literal> is used in the same way as <literal>org.ajax4jsf.SKIN</literal>.</para>
+ </note>
+
+ <para>
+ <table>
+ <title>org.ajax4jsf.Filter Initialization Parameters</title>
+
+ <tgroup cols="3">
+ <thead>
+ <row>
+ <entry>Name</entry>
+
+ <entry>Default</entry>
+
+ <entry>Description</entry>
+ </row>
+ </thead>
+
+ <tbody>
+ <row>
+ <entry>log4j-init-file</entry>
+
+ <entry>-</entry>
+
+ <entry>A path (relative to the web application's context) to the <filename>log4j.xml</filename> configuration file. This can be used to set up per-application custom logging.</entry>
+ </row>
+
+ <row>
+ <entry>enable-cache</entry>
+
+ <entry>true</entry>
+
+ <entry>Enables caching of framework-generated resources (JavaScript, CSS, images, etc.). However, your cached resources will not be used when attempting to debug custom JavaScript or Styles.</entry>
+ </row>
+
+ <row>
+ <entry>forcenotrf</entry>
+
+ <entry>true</entry>
+
+ <entry>Forces all JSF pages to be parsed by a HTML syntax check filter. If set to <literal>false</literal>, only AJAX responses will be parsed and converted to well-formed XML. Setting this to <literal>false</literal> can improve performance, but may also cause unexpected information to be rendered during AJAX updates.</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </para>
+ </section>
+
+
+ <section id="SunJSFRI">
+ <title>Sun JSF RI</title>
+ <para>RichFaces works with implementations of JSF (JSF 1.2_12) and most JSF component libraries without needing to modify additional settings. For further information, see: <ulink url="http://java.sun.com/javaee/javaserverfaces/">java.sun.com</ulink>.
+ </para>
+
+ <para>You can find more information about <exceptionname>ViewExpiredException</exceptionname>s when you use RichFaces with JSF 1.2_12 in the <ulink url="http://wiki.jboss.org/auth/wiki//RichFacesCookbook/ViewExpiredException">RichFaces Cookbook</ulink> article.</para>
+ </section>
+ <section id="ApacheMyFaces">
+ <title>Apache MyFaces</title>
+ <para>RichFaces works with <application>Apache MyFaces</application> 1.2.5 through specific libraries like TOMAHAWK Sandbox and Trinidad. However, there are several issues to consider when you configure applications to work with MyFaces and RichFaces.</para>
+ <note>
+ <para>
+ Sometimes, filters defined in <filename>web.xml</filename> clash, which can be problematic. To avoid this, the RichFaces filter must be the first filter listed in the <filename>web.xml</filename> configuration file.
+ </para>
+ </note>
+ <note>
+ <para>There is one other issue with using MyFaces and <application>Seam</application>. <literal><f:view></literal> does not resolve correctly in MyFaces, so if you use this combination, you should wrap the contents of your <literal><f:view></literal> tags with <literal><a4j:page></literal>. We are working on a solution to this problem.</para>
+ </note>
+ <para>For more information, see: <ulink url="http://myfaces.apache.org"> http://myfaces.apache.org</ulink></para>
+
+ </section>
+ <section id="FaceletsSupport">
+ <title>Facelets Support</title>
+ <para>RichFaces has high-level support for Facelets, regardless of the version used. However, some JSF frameworks (including Faces) require that their own <literal>ViewHandler</literal> be listed first in the <literal>ViewHandler</literal> chain. RichFaces also requires that its <literal>AjaxViewHandler</literal> be listed first, but because it is installed first, no settings will need to be altered. Where multiple frameworks are used without RichFaces, you can use the <literal>VIEW_HANDLERS</literal> parameter to define the order in which the <literal>ViewHandler</literal>s are used. For example:</para>
+
+ <programlisting role="XML">
+<![CDATA[...
+<context-param>
+ <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
+ <param-value>com.sun.facelets.FaceletViewHandler</param-value>
+</context-param>
+...]]>
+ </programlisting>
+ <para>This declares that while <literal>Facelets</literal> will officially be first, <literal>AjaxViewHandler</literal> will briefly be ahead of it to perform some small, important task.</para>
+ <note>
+ <para>In this case, you need not define <literal>FaceletViewHandler</literal> in <filename>WEB-INF/faces-config.xml</filename>.</para>
+ </note>
+ </section>
+ <section id="JBossSeamSupport">
+ <title>JBoss Seam Support</title>
+ <para>RichFaces is compatible with <application>JBoss Seam</application> and Facelets when run within JBoss Application Server (JBoss AS) 4.0.4 and higher. No additional JARs are required. All you need to do is package the RichFaces library with your application.</para>
+
+ <para>For <application>Seam 1.2</application>, your <filename>web.xml</filename> must be as follows:</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_4.xsd"
+ version="2.4">
+
+ <!-- richfaces -->
+
+ <filter>
+ <display-name>RichFaces Filter</display-name>
+ <filter-name>richfaces</filter-name>
+ <filter-class>org.ajax4jsf.Filter</filter-class>
+ </filter>
+
+ <filter-mapping>
+ <filter-name>richfaces</filter-name>
+ <url-pattern>*.seam</url-pattern>
+ </filter-mapping>
+
+ <!-- Seam -->
+
+ <listener>
+ <listener-class>org.jboss.seam.servlet.SeamListener</listener-class>
+ </listener>
+
+ <servlet>
+ <servlet-name>Seam Resource Servlet</servlet-name>
+ <servlet-class>org.jboss.seam.servlet.ResourceServlet</servlet-class>
+ </servlet>
+
+ <servlet-mapping>
+ <servlet-name>Seam Resource Servlet</servlet-name>
+ <url-pattern>/seam/resource/*</url-pattern>
+ </servlet-mapping>
+
+ <filter>
+ <filter-name>Seam Filter</filter-name>
+ <filter-class>org.jboss.seam.web.SeamFilter</filter-class>
+ </filter>
+
+ <filter-mapping>
+ <filter-name>Seam Filter</filter-name>
+ <url-pattern>/*</url-pattern>
+ </filter-mapping>
+
+ <!-- MyFaces -->
+
+ <listener>
+ <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
+ </listener>
+
+ <!-- JSF -->
+
+ <context-param>
+ <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
+ <param-value>client</param-value>
+ </context-param>
+
+ <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>*.seam</url-pattern>
+ </servlet-mapping>
+</web-app>]]>
+ </programlisting>
+ <para><application>Seam 2.x</application> supports RichFaces Filter, so your <filename>web.xml</filename> must look like this:</para>
+
+ <programlisting role="XML">
+<![CDATA[<?xml version="1.0" encoding="UTF-8"?>
+<web-app version="2.5"
+ xmlns="http://java.sun.com/xml/ns/javaee"
+ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
+
+ <context-param>
+ <param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
+ <param-value>com.sun.facelets.FaceletViewHandler</param-value>
+ </context-param>
+
+ <!-- Seam -->
+
+ <listener>
+ <listener-class>org.jboss.seam.servlet.SeamListener</listener-class>
+ </listener>
+
+ <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>
+
+ <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>
+
+ <!-- JSF -->
+
+ <context-param>
+ <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
+ <param-value>.xhtml</param-value>
+ </context-param>
+
+ <context-param>
+ <param-name>facelets.DEVELOPMENT</param-name>
+ <param-value>true</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>*.seam</url-pattern>
+ </servlet-mapping>
+</web-app>]]>
+ </programlisting>
+
+ <para>There is one limitation to using Seam with MyFaces. See <xref linkend="ApacheMyFaces" /> for details.</para>
+ <para>You can find detailed information about integrating RichFaces and Trinidad and hiding the <literal>.seam</literal> suffix in URLs in the <ulink url="http://wiki.jboss.org/auth/wiki/RichFacesWithTrinidad">RichFaces Cookbook article</ulink>.</para>
+ </section>
+ <section id="PortletSupport">
+ <title>Portlet Support</title>
+ <para>
+ <application>JBoss Portlets</application> has been supported since <application>Ajax4jsf 1.1.1</application>, and its support has been improved in RichFaces 3.2.1. If you experience any difficulty, send us your feedback.</para>
+ </section>
+ <section id="SybaseEAServer">
+ <title>Sybase EAServer</title>
+ <para>There is one change required to use EAServer. EAServer calls Servlet <literal>init()</literal> before <literal>ServletContextInitializer</literal>. (This is part of the Servlet 2.3 specification, not an EAServer bug.) You must change the value of <literal>load-on-startup</literal> for the Faces Servlet to <literal>0</literal> in <filename>web.xml</filename>: </para>
+
+ <programlisting role="XML">
+<![CDATA[...
+<servlet>
+ <servlet-name>Faces Servlet</servlet-name>
+ <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
+ <load-on-startup>0</load-on-startup>
+</servlet>
+...]]>
+ </programlisting>
+ </section>
+ <section id="OracleAS_OC4J">
+ <title>Oracle AS/OC4J</title>
+ <para>To deploy your project with RichFaces components to an Oracle Application Server, you must prevent the application's class loader from importing the Oracle XML parser. Use the following notation in <filename>orion-application.xml</filename>:</para>
+
+ <programlisting role="XML"><![CDATA[...
+<imported-shared-libraries>
+ <remove-inherited name="oracle.xml"/>
+ <remove-inherited name="oracle.xml.security"/>
+</imported-shared-libraries>
+...]]></programlisting>
+
+ </section>
+</chapter>
Added: projects/docs/enterprise/5.0/RichFaces/en-US/Technical_Requirements.xml
===================================================================
--- projects/docs/enterprise/5.0/RichFaces/en-US/Technical_Requirements.xml (rev 0)
+++ projects/docs/enterprise/5.0/RichFaces/en-US/Technical_Requirements.xml 2009-08-03 06:50:35 UTC (rev 91917)
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
+]>
+
+<chapter id="TechnicalRequirements">
+
+
+ <title>Technical Requirements</title>
+
+ <para><application>RichFaces</application> was developed with an open architecture to ensure that it was compatible with the widest possible variety of environments.</para>
+
+ <para>This is what you need to start working with <application>RichFaces 3.3.1</application>:</para>
+
+ <itemizedlist>
+ <listitem><para>Java</para></listitem>
+
+ <listitem><para>JavaServer Faces</para></listitem>
+
+ <listitem><para>Java Application Server <emphasis>or</emphasis> Servlet Container</para></listitem>
+
+ <listitem><para>Browser (on client side)</para></listitem>
+
+ <listitem><para>RichFaces Framework</para></listitem>
+ </itemizedlist>
+
+ <section id="SupportedJavaVersions">
+
+ <title>Supported Java Versions</title>
+
+ <itemizedlist>
+ <listitem><para>JDK 1.5 and higher</para></listitem>
+ </itemizedlist>
+ </section>
+
+ <section id="SupportedJavaServerFacesImplementations">
+
+ <title>Supported JavaServer Faces Implementations and Frameworks</title>
+
+ <itemizedlist>
+ <listitem><para>Sun JSF-RI - 1.2_12</para></listitem>
+
+ <listitem><para>MyFaces 1.2.5</para></listitem>
+
+ <listitem><para>Facelets 1.1.1 - 1.2</para></listitem>
+
+ <listitem><para>Seam 1.2. - 2.1.0</para></listitem>
+ </itemizedlist>
+ </section>
+
+ <section id="SupportedServers">
+
+ <title>Supported Servers</title>
+
+ <itemizedlist>
+ <listitem><para>Apache Tomcat 5.5 - 6.0</para></listitem>
+
+ <listitem><para>BEA WebLogic 9.1 - 10.0</para></listitem>
+
+ <listitem><para>Resin 3.1</para></listitem>
+
+ <listitem><para>Jetty 6.1.x</para></listitem>
+
+ <listitem><para>Sun Application Server 9 (J2EE 1.5)</para></listitem>
+
+ <listitem><para>GlassFish (J2EE 5)</para></listitem>
+
+ <listitem><para>JBoss 4.2.x - 5</para></listitem>
+
+ <listitem><para> Websphere 7.0. and higher </para> </listitem>
+
+ <listitem><para>Geronimo 2.0 and higher </para> </listitem>
+
+
+ </itemizedlist>
+ </section>
+
+ <section id="SupportedBrowsers">
+
+ <title>Supported Browsers</title>
+
+ <itemizedlist>
+ <listitem><para>Internet Explorer 6.0 - 8.0</para></listitem>
+
+ <listitem><para>Firefox 2.0 - 3.0</para></listitem>
+
+ <listitem><para>Opera 8.5 - 9.5</para></listitem>
+
+ <listitem><para>Safari 3.0</para></listitem>
+
+ <listitem><para>Google Chrome</para></listitem>
+
+
+ </itemizedlist>
+
+ <para>
+ This list is composed from user reports of compatibility. We assume that this list is incomplete, so the absence of your environment from the list does not necessarily mean that it is incompatible with RichFaces.</para>
+ <para>We appreciate your feedback about compatible platforms and browsers that are not listed here. This helps us keep the list up-to-date.</para>
+ </section>
+</chapter>
More information about the jboss-cvs-commits
mailing list