Author: msorokin
Date: 2008-12-02 14:29:06 -0500 (Tue, 02 Dec 2008)
New Revision: 11500
Added:
trunk/docs/userguide/en/src/main/docbook/included/editor.desc.xml
trunk/docs/userguide/en/src/main/docbook/included/editor.xml
Log:
chapter about rich:editor
https://jira.jboss.org/jira/browse/RF-5042
Added: trunk/docs/userguide/en/src/main/docbook/included/editor.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/editor.desc.xml
(rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/editor.desc.xml 2008-12-02 19:29:06
UTC (rev 11500)
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<section role="updated">
+ <sectioninfo>
+ <keywordset>
+ <keyword>editor</keyword>
+ <keyword>rich:editor</keyword>
+ </keywordset>
+ </sectioninfo>
+ <section>
+ <title>Description</title>
+ <para>The <emphasis role="bold">
+ <property><rich:editor></property>
+ </emphasis> component is used for creating a WYSIWYG editor on a page.
+ </para>
+ <figure>
+ <title><emphasis role="bold">
+ <property><rich:editor></property>
+ </emphasis> component</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/editor1.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ </section>
+<section>
+ <title>Key Features</title>
+
+ <itemizedlist>
+
+ <listitem><para>Seam text support</para></listitem>
+ <listitem><para>Properties customization via configuration
files</para></listitem>
+ <listitem><para>Possibility to use custom
plug-ins</para></listitem>
+
+
+
+ </itemizedlist>
+
+</section>
+</section>
+
\ No newline at end of file
Added: trunk/docs/userguide/en/src/main/docbook/included/editor.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/editor.xml
(rev 0)
+++ trunk/docs/userguide/en/src/main/docbook/included/editor.xml 2008-12-02 19:29:06 UTC
(rev 11500)
@@ -0,0 +1,831 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<section>
+ <sectioninfo>
+ <keywordset>
+ <keyword>rich:editor</keyword>
+ <keyword>editor</keyword>
+ </keywordset>
+ </sectioninfo>
+ <table>
+ <title>Component identification parameters</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Name</entry>
+ <entry>Value</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>component-type</entry>
+
<entry>org.richfaces.component.editor</entry>
+ </row>
+ <row>
+
<entry>component-class</entry>
+
<entry>org.richfaces.component.html.Htmleditor</entry>
+ </row>
+ <row>
+
<entry>component-family</entry>
+
<entry>org.richfaces.component.editor</entry>
+ </row>
+ <row>
+
<entry>renderer-type</entry>
+
<entry>org.richfaces.renderkit.html.editorRenderer</entry>
+ </row>
+ <row>
+ <entry>tag-class</entry>
+
<entry>org.richfaces.taglib.editorTag</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <section>
+ <title>Creating the Component with a Page Tag</title>
+ <para>To create the simplest variant on a page use the
following syntax:</para>
+
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[...
+<rich:editor />
+...]]></programlisting>
+ </section>
+ <section>
+ <title>Creating the Component Dynamically Using
Java</title>
+
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="JAVA"><![CDATA[import
org.richfaces.component.html.Htmleditor;
+...
+Htmleditor myeditor = new Htmleditor();
+...]]></programlisting>
+ </section>
+ <section>
+ <title>Details of Usage</title>
+
+<para>The <emphasis role="bold">
<property><rich:editor></property></emphasis> is fully
+ based on TinyMCE web based Javascript HTML WYSIWYG editor control and supports
all of the features has.
+The rich:editor adjusts TinyMCE editor of JSF environment adding some functional
capabilities.
+</para>
+
+
+ <para>The easiest way to place the <emphasis role="bold">
<property><rich:editor></property></emphasis>on a page is
as follows:</para>
+
+
+ <programlisting role="XML"><![CDATA[
+ <rich:editor value="#{bean.editorValue}" />
+]]></programlisting>
+
+
+ <para>Implementation of <emphasis role="bold">
<property><rich:editor></property></emphasis> provides
three ways to define the properties of the component:
+ </para>
+
+ <orderedlist>
+
+ <listitem><para>Using attributes;</para></listitem>
+ <listitem><para>Using using <f:param> JSF
tag;</para></listitem>
+ <listitem><para>Using configuration
files.</para></listitem>
+
+ </orderedlist>
+
+ <para>The most important properties are implemented as
attributes and you can define them as any other attribute.
+ The attributes of the <emphasis
role="bold">
<property><rich:editor></property></emphasis> component
+ match the corresponding properties of TinyMCE
editor.</para>
+
+ <para>For example, a theme for the editor an be defined using
the <property>"theme"</property> attribute like this:
</para>
+
+ <programlisting role="XML"><![CDATA[
+<rich:editor value="#{bean.editorValue}" theme="advanced"/>
+]]></programlisting>
+
+ <para>
+ Apart from the attributes that define the editor's
properties there are a some attributes that help handle events(custom event handlers).
+ </para>
+ <para>
+ All custom event handlers can be found in the table of
attributes and you can use them the same way as standard HTML event handlers. For example,
like this:
+ </para>
+
+
+ <para>Most configuration options that TinyMCE provides can be
applied using <f:param> JSF tag.
+ The syntax is quite simple: the
<property>"name"</property> attribute should contain the
option,
+ the
<property>"value"</property> attribute assigns some value to
the option.</para>
+
+<para>For example, this code adds some buttons to the editor and positions the
toolbar. </para>
+
+<programlisting role="XML"><![CDATA[...
+<rich:editor value="#{bean.editorValue}" theme="advanced"
plugins="save,paste" >
+ <f:param name="theme_advanced_buttons1"
value="bold,italic,underline, cut,copy,paste,pasteword"/>
+ <f:param name="theme_advanced_toolbar_location"
value="top"/>
+ <f:param name="theme_advanced_toolbar_align"
value="left"/>
+</rich:editor>
+...]]></programlisting>
+
+ <para>This is what you get as a result:</para>
+
+
+
+ <figure>
+ <title> Setting configuration options with
<f:param>
+
+ </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/editor2.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+
+ <para>The last way to configure the <emphasis
role="bold">
<property><rich:editor></property></emphasis> is
+ to use configuration file (.properties)</para>
+
+ <para> This method is can easy your life if you need to
configure multiple instances
+ of the <emphasis role="bold">
<property><rich:editor></property></emphasis>.
</para>
+ <para>To implement this type of configuration you need to take
a few steps:</para>
+
+ <itemizedlist>
+ <listitem><para>Create a configuration file
(.properties) in the classpath folder and add some properties to it. Use standard syntax
for the .properties files: <code>parameter=value</code>. Here is an example
of configuration file:</para>
+ <programlisting
role="XML"><![CDATA[
+theme="advanced"
+plugins="save,paste"
+theme_advanced_buttons1="bold,italic,underline, cut,copy,paste,pasteword"
+theme_advanced_toolbar_location="top"
+theme_advanced_toolbar_align="left"
+]]></programlisting>
+
+ </listitem>
+ <listitem><para>The properties stored in
configuration file are passed to the
+ <emphasis role="bold">
<property><rich:editor></property></emphasis> via
+
<property>"configuration"</property>attribute which takes
the name of the configuration file as a value (with out .properties extension).
</para></listitem>
+ <para>For example, you named the configuration file
"editorconfig", you would address it as follows:
+ </para>
+
+ <programlisting role="XML"><![CDATA[...
+<rich:editor value="#{bean.editorValue}"
configuration="editorconfig"/>
+...]]></programlisting>
+
+
+ <listitem><para>
+ Alternately, you can use a EL-binding to define a
configuration file. This way you can dynamically change the sets of configuration
properties. </para>
+
+ <para> For example, you have two configuration files
"configurationAdvanced" and "configurationSimple" and
you want them to be
+ applied under some condition. </para>
+
+ <para>To do this you need to bind
<property>"configuration"</property>attribute to the
appropriate bean property like this . </para>
+
+<programlisting role="XML"><![CDATA[...
+<rich:editor value="#{bean.editorValue}"
configuration="#{editor.property}" />
+...]]></programlisting>
+ <para>Your Java file should look like
this.</para>
+
+ <programlisting
role="JAVA"><![CDATA[...
+ String configuration;
+ if(some condition){//define some condition
+ configuration = "configurationAdvanced"; //the
name on the file with advanced properties
+ }
+ else{
+ configuration= "configurationSimple"; //the name on the file with
simplified properties
+
+ }
+...]]></programlisting>
+
+
+ </listitem>
+
+ </itemizedlist>
+
+
+ <para></para>
+
+ </section>
+
+
+
+
+ <!-- JavaScript API-->
+ <section>
+ <title>JavaScript API</title>
+
+
+
+ </section>
+ <!-- End of JavaScript API-->
+ <section>
+ <title>JavaScript API</title>
+ <table>
+ <title>JavaScript API</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Function</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>enable()</entry>
+ <entry>Enables the
component</entry>
+ </row>
+ <row>
+ <entry>disable()</entry>
+ <entry>Disables the
component</entry>
+ </row>
+ <row>
+ <entry>stop()</entry>
+ <entry>Stops the uploading
+ process</entry>
+ </row>
+ <row>
+ <entry>clear()</entry>
+ <entry>Removes all files from the
list.
+ The function can also get the
+
$('id').component.entries[i]
+ as a parameter to remove a
+ particular file. </entry>
+ </row>
+ <row>
+ <entry> submitForm()
</entry>
+ <entry> Submits form to server.
All
+ added files will be put to
+ model and event. </entry>
+ </row>
+ <row>
+ <entry> beforeSubmit()
</entry>
+ <entry> Sets up necessary
request
+ parameters for file uploading
+ and submits form to server by
+ command button. This method
+ should be used together with
+ commands </entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+
+
+
+
+
+
+
+
+
+ </section>
+ <!-- End of JavaScript API-->
+ <section>
+ <title>Look-and-Feel Customization</title>
+ <para>For skinnability implementation, the components use a
<emphasis>
+ <property>style class redefinition
method.</property>
+ </emphasis> Default style classes are mapped on
<emphasis>
+ <property>skin
parameters.</property>
+ </emphasis></para>
+ <para>There are two ways to redefine the appearance of all
<emphasis role="bold">
+
<property><rich:fileUpload></property>
+ </emphasis> components at once: <itemizedlist>
+ <listitem>
+ <para>Redefine the corresponding
skin
+ parameters</para>
+ </listitem>
+ <listitem>
+ <para> Add to your style sheets
style classes used
+ by a <emphasis
role="bold">
+
<property><rich:fileUpload></property>
+ </emphasis>
component</para>
+ </listitem>
+ </itemizedlist>
+ </para>
+ </section>
+
+ <section>
+ <title>Skin Parameters Redefinition</title>
+
+ <table>
+ <title>Skin parameters redefinition for a
component</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>tableBackgroundColor</entry>
+
<entry>background-color</entry>
+ </row>
+ <row>
+
<entry>tableBorderColor</entry>
+
<entry>border-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Skin parameters redefinition for a
font</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>generalFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ <row>
+
<entry>generalSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Skin parameters redefinition for a
toolbar</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>additionalBackgroundColor</entry>
+
<entry>background-color</entry>
+ </row>
+ <row>
+
<entry>tableBorderColor</entry>
+
<entry>border-bottom-color</entry>
+ </row>
+ <row>
+
<entry>tableBackgroundColor</entry>
+
<entry>border-top-color</entry>
+ </row>
+ <row>
+
<entry>tableBackgroundColor</entry>
+
<entry>border-left-color</entry>
+ </row>
+
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Skin parameters redefinition for items in the
list</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>tableBorderColor</entry>
+
<entry>border-bottom-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Skin parameters redefinition for a
"Cancel",
+ "Clear" links</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>generalLinkColor</entry>
+ <entry>color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Skin parameters redefinition for a
button</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>trimColor</entry>
+
<entry>background-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Skin parameters redefinition for a button
border</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>tableBorderColor</entry>
+
<entry>border-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Skin parameters redefinition for a highlighted
button</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>trimColor</entry>
+
<entry>background-color</entry>
+ </row>
+ <row>
+
<entry>selectControlColor</entry>
+
<entry>border-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Skin parameters redefinition for a pressed
button</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>selectControlColor</entry>
+
<entry>border-color</entry>
+ </row>
+ <row>
+
<entry>additionalBackgroundColor</entry>
+
<entry>background-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Skin parameters redefinition for
"Upload",
+ "Clean" buttons</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>generalTextColor</entry>
+ <entry>color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Skin parameters redefinition for a disabled
+ "Start" button
icon</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>tableBorderColor</entry>
+ <entry>color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Skin parameters redefinition for a disabled
+ "Clear" button
icon</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>tableBorderColor</entry>
+ <entry>color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </section>
+
+ <section>
+ <title>Definition of Custom Style Classes</title>
+
+ <para>The following picture illustrates how CSS classes define
styles for
+ component elements.</para>
+ <figure>
+ <title>Classes names</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/fileUpload_cn.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <figure>
+ <title>Classes names</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/fileUpload_cn2.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+
+
+ <table>
+ <title>Classes names that define buttons
representation</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>rich-fileupload-button</entry>
+ <entry>Defines styles for a
+ buttons</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-button-border</entry>
+ <entry>Defines styles for a
border of
+ buttons</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-button-light</entry>
+ <entry>Defines styles for a
highlight of
+ button</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-button-press</entry>
+ <entry>Defines styles for a
pressed
+ button</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-button-dis</entry>
+ <entry>Defines styles for a
disabled
+ button</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-button-selection</entry>
+ <entry>Defines styles for
+ "Upload",
+ "Clean"
+ buttons</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Classes names that define the representation
of the buttons'
+ icons</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>rich-fileupload-ico</entry>
+ <entry>Defines styles for an
+ icon</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-ico-add</entry>
+ <entry>Defines styles for a
+ "Add" button
+ icon</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-ico-start</entry>
+ <entry>Defines styles for a
+ "Upload"
+ button icon</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-ico-stop</entry>
+ <entry>Defines styles for a
+ "Stop"
+ button icon</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-ico-clear</entry>
+ <entry>Defines styles for a
+ "Clear"
+ button icon</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-ico-add-dis</entry>
+ <entry>Defines styles for a
disabled
+ "Add" button
+ icon</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-ico-start-dis</entry>
+ <entry>Defines styles for a
disabled
+ "Upload"
+ button icon</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-ico-clear-dis</entry>
+ <entry>Defines styles for a
disabled
+ "Clear"
+ button icon</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Classes names that define list items
representation</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>rich-fileupload-table-td</entry>
+ <entry>Defines styles for a
wrapper
+ <td> element of
+ a list items</entry>
+ </row>
+ <row>
+
<entry>rich-fileupload-anc</entry>
+ <entry>Defines styles for
+ "Cancel",
+ "Stop",
+ "Clear"
+ links</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+
+ <para>In order to redefine styles for all <emphasis
role="bold">
+
<property><rich:fileUpload></property>
+ </emphasis> components on a page using CSS,
it's enough to
+ create classes with the same names (possible classes could
be found in
+ the tables <link linkend="fileUploadCN">
above</link>) and define
+ necessary properties in them. </para>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![CDATA[...
+.rich-fileupload-anc{
+ font-weight:bold;
+ text-decoration:none;
+}
+...]]></programlisting>
+
+ <para>This is the result:</para>
+
+ <figure>
+ <title>Redefinition styles with predefined
classes</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/fileUpload_pc.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>In the example above the font weight and text decoration
for
+ "Cancel" and "Clear"
links are
+ changed.</para>
+
+ <para> Also it's possible to change styles of
particular <emphasis
+ role="bold">
+
<property><rich:fileUpload></property>
+ </emphasis> component. In this case you should create
own style
+ classes and use them in the corresponding <emphasis
role="bold">
+
<property><rich:fileUpload></property>
+ </emphasis>
+ <emphasis>
+ <property>styleClass</property>
+ </emphasis> attributes. An example is placed below:
</para>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![CDATA[...
+.myClass{
+ font-weight:bold;
+}
+...]]></programlisting>
+ <para> The <emphasis>
+
<property>"addButtonClass"</property>
+ </emphasis> attribute for <emphasis
role="bold">
+
<property><rich:fileUpload></property>
+ </emphasis> is defined as it's shown in the
example below: </para>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting
role="XML"><![CDATA[<rich:fileUpload ...
addButtonClass="myClass"/>
+]]></programlisting>
+
+ <para>This is the result:</para>
+ <figure>
+ <title>Redefinition styles with own classes and
<emphasis>
+
<property>styleClass</property>
+ </emphasis> attributes</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/fileUpload_oc.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>As it could be seen on the picture above, the font style
for
+ "Add" button is changed.</para>
+
+ </section>
+
+ <section>
+ <title>Relevant Resources Links</title>
+ <para><ulink
+
url="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload....
+ >Here</ulink> you can see an example of
<emphasis
+ role="bold">
+
<property><rich:fileUpload></property>
+ </emphasis> usage and sources for the given example.
</para>
+ </section>
+
+</section>
+<!--para>In order to encode form around <emphasis role="bold">
+ <property><rich:fileUpload></property>
+ </emphasis> component you could confine this area by <emphasis
role="bold">
+ <property><h:form></property>
+ </emphasis>/<emphasis role="bold">
+ <property></h:form></property></emphasis> tags.
+ </para>
+ <para>
+ <emphasis role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[...
+ <h:form>
+ <rich:fileUpload uploadData="#{bean.data}"
addControlLabel="myLabel" autoclear="true"
maxFilesQuantity="2" fileUploadListener="#{bean.listener}"
+ acceptedTypes="html" immediateUpload="true"/>
+ <a4j:commandLink style="font-weight: bold; width: 200px;"
value="Show files uploaded:" reRender="files_list">
+ <h:dataTable value="#{bean.fileList}" var="file"
id="files_list" style="width: 500px">
+ <h:column>
+ <h:outputText value="#{file.fileName}"></h:outputText>
+ </h:column>
+ </h:dataTable>
+ </h:form>
+ ...]]></programlisting>
+ <para>This is a result:</para>
+ <figure>
+ <title><emphasis role="bold">
+ <property><rich:fileUpload></property>
+ </emphasis>at server-side</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/fileUpload11.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure-->