From richfaces-svn-commits at lists.jboss.org Wed Aug 13 07:38:48 2008 Content-Type: multipart/mixed; boundary="===============6288110713903800293==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r10061 - trunk/docs/userguide/en/src/main/docbook/included. Date: Wed, 13 Aug 2008 07:38:47 -0400 Message-ID: --===============6288110713903800293== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: atsebro Date: 2008-08-13 07:38:47 -0400 (Wed, 13 Aug 2008) New Revision: 10061 Modified: trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml Log: RF-4080: Developer guide does not contain details for web.xml configuration= to successfully integrate fileUpload component with myfaces framework Modified: trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml 2008-0= 8-13 10:12:25 UTC (rev 10060) +++ trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml 2008-0= 8-13 11:38:47 UTC (rev 10061) @@ -1,281 +1,347 @@
- - - rich:fileUpload - fileUpload - - - - Component identification parameters - - - - Name - Value - - - - - component-type - org.richfaces.component.FileUpload - - - component-class - org.richfaces.component.html.HtmlFileUpload - - - component-family - org.richfaces.component.FileUpload - - - renderer-type - org.richfaces.renderkit.html.FileUploadRenderer= - - - tag-class - org.richfaces.taglib.FileUploadTag - - - -
-
- Creating the Component with a Page Tag - To create the simplest variant on a page use the following s= yntax: + + + rich:fileUpload + fileUpload + + + + Component identification parameters + + + + Name + Value + + + + + component-type + org.richfaces.com= ponent.FileUpload + + + component-class + org.richfaces.com= ponent.html.HtmlFileUpload + + + component-family<= /entry> + org.richfaces.com= ponent.FileUpload + + + renderer-type + org.richfaces.ren= derkit.html.FileUploadRenderer + + + tag-class + org.richfaces.tag= lib.FileUploadTag + + + +
+
+ Creating the Component with a Page Tag + To create the simplest variant on a page use the= following syntax: = - - Example: - - + Example: + + = ...]]> -
-
- Creating the Component Dynamically Using Java +
+
+ Creating the Component Dynamically Using Java</= title> = - <para> - <emphasis role=3D"bold">Example:</emphasis> - </para> - <programlisting role=3D"JAVA"><![CDATA[import org.richfaces.compon= ent.html.HtmlFileUpload; + <para> + <emphasis role=3D"bold">Example:</emphasis> + </para> + <programlisting role=3D"JAVA"><![CDATA[import org.rich= faces.component.html.HtmlFileUpload; ... = HtmlFileUpload myFileUpload =3D new HtmlFileUpload(); ...]]></programlisting> - </section> - <section> - <title>Details of Usage - The <rich:fileUpload>= ; component consists of two parts: - - - List of files which contains the = list of currently chosen files to upload with possibility to manage every f= ile - - - - - Component controls - the bar with= controls for managing the whole component +
+
+ Details of Usage + The + <rich:fileUpload><= /property> + component consists of two parts:= + + + List of files<= /property> which + contains the list of cur= rently chosen + files to upload with pos= sibility to + manage every file + + + + Component cont= rols + - the bar with controls = for managing the + whole component + + - - - = = - - There are two places where uploaded files are stored: - - - - - In the temporary folder (depends on OS) if the val= ue of the createTempFile parameter in Ajax4jsf Filte= r section - is "true" (by Default) - - There are two places where uploaded files are s= tored: + + + In the temporary folder (de= pends on OS) if the value + of the createTempF= ile parameter in + Ajax4jsf Filte= r + section is "true&qu= ot; (by Default) + createTempFiles true -...]]> = - - +...]]> + + + In the RAM if the value of = the + createTempFile parameter in + Ajax4jsf Filte= r + section is "false&q= uot;. This is a + better way for storing s= mall-sized files. + + + + The + "uploadData" + attribute defines the collection= of files uploaded. See + the example below. - In the RAM if the value of the createTempFil= e parameter in Ajax4jsf Filter section - is "false". This is a better way for sto= ring small-sized files. + Example: - - - - - The "uploadData" attribute = - defines the collection of files uploaded. See the example below= . = - - - Example: - - ...]]> = - The "fileUploadedListener" is = - called at server side after every file uploaded and used for t= he saving files from temporary folder or RAM. - - - Example: - - The + "fileUploadedListen= er" + is called at server side after e= very file uploaded and + used for the saving files from temporary fol= der or RAM. + + Example: + + ...]]> = = - - Automatically files uploading could be performed by means of t= he "immediateUpload" a= ttribute. - If the value of this attribute is "true" files are u= ploaded automatically once they have been added into the list. = - All next files in the list are uploaded automatically one by o= ne. - If you cancel uploading process next files aren't started= to upload till you press the "Upload" button or clear the list. - - - Example: - - Automatically files uploading could be performe= d by means of the + "immediateUpload&q= uot; + attribute. If the value of this = attribute is + "true" files are uploaded automati= cally once they + have been added into the list. All next file= s in the list are uploaded + automatically one by one. If you cancel uplo= ading process next files + aren't started to upload till you press= the + "Upload" button or clear the list.= + + Example: + + ...]]> = - - The "autoclear" attribute is used to remove automatically files from the list after = upload completed. - See the simple example below. - - - Example: - - The + "autoclear" + attribute is used to remove auto= matically files from the + list after upload completed. See the simple = example below. + + Example: + + ...]]> = = - - = - - The <rich:fileUpload> component provides following restrictions: - - - - - On file types, use "acceptedTypes" attribute = - to define file types accepted by component. - In the example below only files with "html" and = "jpg" extensions are accepted to upload. - - - Example: - - + + The + <rich:fileUpload><= /property> + component provides following res= trictions: + + + On file types, use + + "acceptedTypes"= ; + attribute to= define file types + accepted by component. I= n the example below only + files with "html&qu= ot; and + "jpg" extensio= ns are accepted to + upload. + + = Example: + + ...]]> - - - - On file size, use the maxReques= tSize parameter(value in bytes) inside Ajax4jsf Filter section = - in web.xml: - - + + On file size, use the + maxRequestSize + parameter(value in bytes= ) inside + Ajax4jsf Filte= r + section in web= .xml: + maxRequestSize 1000000 ...]]> - - - - On max files quantity, use the "maxFilesQuantity" attribute = - to define max number of files allowed to be uploaded. Afte= r a number of files in the list equals to the value of this attribute "= ;Add" button is disabled and nothing could be uploaded even if you cle= ar the whole list. - In order to upload files again you should rerender the com= ponent. - As it could be seen in the example below, only 2 files are= accepted for uploading. - - = - - Example: - - + + On max files quan= tity, use the + + "maxFilesQuantity&q= uot; + attribute to= define max number of + files allowed to be uplo= aded. After a number of + files in the list equals= to the value of this + attribute "Add"= ; button is + disabled and nothing cou= ld be uploaded even if you + clear the whole list. In= order to upload files + again you should rerende= r the component. As it + could be seen in the exa= mple below, only 2 files + are accepted for uploadi= ng. + + + = Example: + + ...]]> - - This is the result: - -
- <emphasis role=3D"bold"><property><rich:fileUplo= ad></property></emphasis>with = - <emphasis><property> "maxFilesQuantity"</pro= perty></emphasis> attribute - - - - - -
= - - + This is the result: +
+ <emphasis role=3D= "bold"> + <property><rich:fileU= pload></property> + </emphasis>with <emphasi= s> + <property> + "maxFilesQuantity&q= uot;</property> + </emphasis> attribute</t= itle> + <mediaobject> + <imageobject> + <imagedata + fileref=3D"images/fileUp= load2.png" + /> + </imageobject> + </mediaobject> + </figure> + </listitem> + </itemizedlist> = = - = - = - <para id=3D"fileUploadEventAttributes">The <emphasis role=3D"bold"= ><property><rich:fileUpload></property></emphasis> component = - provides a number of specific event attributes: = - </para> - <itemizedlist> - = - <listitem> - <para> - The <emphasis><property> "onadd"</proper= ty></emphasis>a event handler called on an add file operation = - </para> - </listitem> - = - <listitem> - <para> - The <emphasis><property> "onupload"</pro= perty></emphasis> which gives you a possibility to cancel the upload at cli= ent side = - </para> - </listitem> - <listitem> - <para> - The <emphasis><property> "onuploadcomplete&qu= ot;</property></emphasis> which is called after all files from the list are= uploaded = - </para> - </listitem> - <listitem> - <para> - The <emphasis><property> "onuploadcanceled&qu= ot;</property></emphasis> which is called after upload has been canceled vi= a cancel control = - </para> - </listitem> - <listitem> - <para> - The <emphasis><property> "onerror"</prop= erty></emphasis> which is called if the file upload was interrupted accordi= ng to any errors = - </para> - </listitem> - </itemizedlist> = - = - = - = - = - <!--Flash Module--> - <para> - The <emphasis role=3D"bold"><property><rich:fileUpload><= /property></emphasis> component has an embedded Flash module = - that adds extra functionality to the component. The module is = enabled with <emphasis><property> "allowFlash"</property></emphas= is> - attribute set to "true". = - </para> - <para>These are the additional features that the Flash module prov= ides:</para> - = - <itemizedlist> - <listitem><para>Multiple files choosing;</para></listitem> - <listitem><para>Permitted file types are specified in the &quo= t;Open File" dialog window;</para></listitem> - <listitem><para>A number of additional entry object properties= are also available, which can be found <link linkend=3D"objectProperties">= here</link>. </para></listitem> - </itemizedlist> - = - <para>Apart from uploading files to the sever without using AJAX, = the Flash module provides a number of useful API functions that can be used= to obtain information about the uploaded file. </para> = - = - <para>There are 2 ways to obtain the data stored in the FileUpload= Entry object. </para> - = - <itemizedlist> - <listitem><para>By means of JavaScript on the client side. Use the= following syntax for that <code>entries[i].propertyName</code>. For exampl= e <code>entries[0].state</code> will return the state of the file the is be= ing processed or has just been processed.</para></listitem> - = - = - <listitem><para>The properties of <code>FileUploadEntry</code> obje= ct can be retrieved using the <code>entry.propertyName</code> expression i= n the specific event attributes. For example, <code>onupload=3D"alert(= event.memo.entry.fileName);" </code> will display a message with the n= ame of the file at the very moment when upload operation starts. A full lis= t of properties can be found <link linkend=3D"objectPropertiesWithAttribute= s">here</link>.</para></listitem> = - = - = - </itemizedlist> = -<para>The given bellow code sample demonstrates how the properties can be = used. Please study it carefully. </para> - <programlisting role=3D"XML"><![CDATA[... + + + <para id=3D"fileUploadEventAttributes">The <emphasis r= ole=3D"bold"> + <property><rich:fileUpload><= /property> + </emphasis> component provides a number of s= pecific event attributes: </para> + <itemizedlist> + + <listitem> + <para> The <emphasis> + <property> + "onadd"</prope= rty> + </emphasis>a event handl= er called on an add file + operation </para> + </listitem> + + <listitem> + <para> The <emphasis> + <property> + "onupload"</pr= operty> + </emphasis> which gives = you a possibility to + cancel the upload at cli= ent side </para> + </listitem> + <listitem> + <para> The <emphasis> + <property> + "onuploadcomplete&q= uot;</property> + </emphasis> which is cal= led after all files from + the list are uploaded </= para> + </listitem> + <listitem> + <para> The <emphasis> + <property> + "onuploadcanceled&q= uot;</property> + </emphasis> which is cal= led after upload has been + canceled via cancel cont= rol </para> + </listitem> + <listitem> + <para> The <emphasis> + <property> + "onerror"</pro= perty> + </emphasis> which is cal= led if the file upload was + interrupted according to= any errors </para> + </listitem> + </itemizedlist> + + + + + <!--Flash Module--> + <para> The <emphasis role=3D"bold"> + <property><rich:fileUpload><= /property> + </emphasis> component has an embedded Flash = module that adds extra + functionality to the component. The module i= s enabled with <emphasis> + <property> "allowFlash"<= /property> + </emphasis> attribute set to "true"= ;. </para> + <para>These are the additional features that the Flash= module provides:</para> + + <itemizedlist> + <listitem> + <para>Multiple files choosing;</pa= ra> + </listitem> + <listitem> + <para>Permitted file types are spe= cified in the + "Open File" di= alog + window;</para> + </listitem> + <listitem> + <para>A number of additional entry= object properties are + also available, which ca= n be found <link + linkend=3D"objectPropert= ies">here</link>. + </para> + </listitem> + </itemizedlist> + + <para>Apart from uploading files to the sever without = using AJAX, the Flash + module provides a number of useful API funct= ions that can be used to + obtain information about the uploaded file. = </para> + + <para>There are 2 ways to obtain the data stored in th= e FileUploadEntry object. </para> + + <itemizedlist> + <listitem> + <para>By means of JavaScript on th= e client side. Use the + following syntax for that + <code>entries[i].propert= yName</code>. + For example <code>entrie= s[0].state</code> will + return the state of the = file the is being + processed or has just be= en processed.</para> + </listitem> + + + <listitem> + <para>The properties of <code>File= UploadEntry</code> object + can be retrieved using t= he + <code>entry.propertyName= </code> + expression in the specif= ic event attributes. For + example, + <code>onupload=3D"a= lert(event.memo.entry.fileName);" + </code> will display a m= essage with the name of + the file at the very mom= ent when upload operation + starts. A full list of p= roperties can be found + <link + linkend=3D"objectPropert= iesWithAttributes" + >here</link>.</para> + </listitem> + + + </itemizedlist> + <para>The given bellow code sample demonstrates how th= e properties can be used. + Please study it carefully. </para> + <programlisting role=3D"XML"><![CDATA[... <head> <script> function _onaddHandler (e) { @@ -291,53 +357,64 @@ </script> </head> ...]]></programlisting> - = - = - = - <para> Moreover, embedded Flash module provides a smoother representat= ion of progress bar during the uploading process: the polling is performed = is not by AJAX, but my means of the flash module. = - </para> - <figure> - <title> - Uploading using Flash module <emphasis role=3D"bold"><propert= y><rich:fileUpload></property></emphasis> = - - - - - - -
= - = - However, the Flash module doens't perform any visual re= presentation of the component. - = - - = - = - = - = - = - - In order to customize the information regarding the ongoing pr= ocess you could use "label" facet - with the following macrosubstitution: - - - - {B}, {KB}, {MB} contains the size of file uploaded in bytes, kilobytes, megabytes resp= ectively = + + + + Moreover, embedded Flash module provides a smoo= ther representation of + progress bar during the uploading process: t= he polling is performed is + not by AJAX, but my means of the flash modul= e. +
+ Uploading using Flash module <emphas= is role=3D"bold"> + <property><rich:fileU= pload></property> + </emphasis> + + + + + + +
+ + However, the Flash module doens't perform a= ny visual + representation of the component. + + + + + + + + In order to customize the information regarding= the ongoing process you + could use + "label" + facet with the following macrosu= bstitution: + + + {B}, {KB}, + {MB} contai= ns the + size of file uploaded in= bytes, + kilobytes, megabytes res= pectively + + + + + {_B}, {_KB}, + {_MB} conta= ins + the remain file size to = upload in bytes, + kilobytes, megabytes res= pectively + + + + + {ss}, {mm}, + {hh} contai= ns + elapsed time in seconds,= minutes and + hours respectively + + - - - - {_B}, {_KB}, {_MB}= contains the remain file size to upload in bytes, kilobytes, megaby= tes respectively = - - - - - {ss}, {mm}, {hh} contains elapsed time in seconds, minutes and hours respectively - - - - - = - - = - - Example: - - + Example: + + ...]]> - This is the result: -
- - <emphasis role=3D"bold"><property><rich:fileUpload><= /property></emphasis> = - with <emphasis><property> "label"</property></em= phasis> facet - - - - - - -
= - = - You could define labels of the component controls<= /property> with the help of = - "addControlLabel", = - "clearAllControlLabel", = - "clearControlLabel"<= /emphasis>, = - "stopEntryControlLabel", = - "uploadControlLabel"= - attributes. See the following example. - - - Example: - - This is the result: +
+ + <emphasis role=3D"bold"> + <property><rich:fileU= pload></property> + </emphasis> with <emphasis> + <property> "label&q= uot;</property> + </emphasis> facet + + + + + +
+ + You could define labels of the compone= nt controls + with the help of + "addControlLabel&q= uot; + , + + "clearAllControlLabel" + , + "clearControlLabel= " + , + + "stopEntryControlLabel"<= /property> + , + "uploadControlLabe= l" + attributes. See the following ex= ample. + + Example: + + ...]]> - - This is the result: - = -
- - <emphasis role=3D"bold"><property><rich:fileUpload><= /property></emphasis> with labels - - - - - - -
= - - The <rich:fileUpload><= /property> component allows to use sizes attributes: - - - - - "listHeight" attribute specify height for list of files in pixels - - - - - "listWidth" attribute specify width for list of files in pixels - - - - = - - In order to disable the whole component you could use the "disabled" attribute. - See the following example. - - - Example: - - This is the result: +
+ + <emphasis role=3D"bold"> + <property><rich:fileU= pload></property> + </emphasis> with labels + + + + + +
+ The + <rich:fileUpload><= /property> + component allows to use sizes at= tributes: + + + + + + "listHeight" + attribute sp= ecify height for list of + files in pixels + + + + + + "listWidth" + attribute sp= ecify width for list of + files in pixels + + + + In order to disable the whole component you cou= ld use the + "disabled" + attribute. See the following exa= mple. + + Example: + + ...]]> - This is the result: -
- - <emphasis role=3D"bold"><property><rich:fileUpload><= /property></emphasis>with <emphasis><property> "disabled"</proper= ty></emphasis> attribute - - - - - - -
= - It's possible to handle events for fileUpload using Jav= aScript code. A simplest example of usage JavaScript API is placed below: - - Example: - - This is the result: +
+ + <emphasis role=3D"bold"> + <property><rich:fileU= pload></property> + </emphasis>with <emphasis> + <property> "disable= d"</property> + </emphasis> attribute + + + + + +
+ It's possible to handle events for fileUplo= ad using JavaScript + code. A simplest example of usage JavaScript= API is placed below: + + Example: + + -...]]> = - = - - <rich:fileUpload> = - component also provides a number of JavaScript property, - that can be used to process uploaded files, file states etc. = - The given below example illustrates how the entries[0].s= tate property can be used to get access to the file state. = - Full list of JavaScript properties can be found below. - = - - = - = - + + + + <rich:fileUpload><= /property> + component also provides a number= of JavaScript property, + that can be used to process uploaded files, = file states etc. The given + below example illustrates how the entr= ies[0].state + property can be used to get access to the fi= le state. Full list of + JavaScript properties can be found below. + + + = -...]]> = - = - = - The <rich:fileUpload>= ; component allows to use internationalization method = - to redefine and localize the labels. You could use application= resource bundle and define = - RICH_FILE_UPLOAD_CANCEL_LABEL, = - RICH_FILE_UPLOAD_STOP_LABEL, = - RICH_FILE_UPLOAD_ADD_LABEL, = - RICH_FILE_UPLOAD_UPLOAD_LABEL, = - RICH_FILE_UPLOAD_CLEAR_LABEL, = - RICH_FILE_UPLOAD_CLEAR_ALL_LABEL, = - RICH_FILE_UPLOAD_PROGRESS_LABEL, = - RICH_FILE_UPLOAD_SIZE_ERROR_LABLE, = - RICH_FILE_UPLOAD_TRANSFER_ERROR_LABLE, = - RICH_FILE_UPLOAD_ENTRY_STOP_LABEL, = - RICH_FILE_UPLOAD_ENTRY_CLEAR_LABEL, = - RICH_FILE_UPLOAD_ENTRY_CANCEL_LABEL there. - - = - = - - = - = - = - = - - = - - The <rich:fileUpload> component could work together with Seam framework. - Here<= /ulink> you can see how to configure Seam Filter in order to handle - <rich:fileUpload> requests. - - = - = - = +...]]> = -
- = -
- JavaScript API - = - JavaScript API - - - - Function - Description = - - - - - enable() - Enables the component - - - disable() - Disables the component - - - stop() - Stops the uploading process - - - clear() - Removes all files from the list. The functi= on can also get the $('id').component.entries[i] as a parameter t= o remove a particular file. - - = - = - = - = - = - - -
- = = - = - = - Client side object properties - - - - Property - Description = - - - - = - - entries - Returns a array of all files in the list - = - - - = - = - = - - entries.length - Returns the number of files in the list - - = - = - - entries[i].fileName - Returns the file name, that is retrieved by= the array index - - = - = - = - - entries[i].state = - Returns the file state. Possible states are = - - = - "initialized" - = the file is added, corresponds to FileUploadEntry.INITIALIZED constant - "progress" - the= file is being uploaded, corresponds to FileUploadEntry.UPLOAD_IN_PROGRESS = constant - "ready" - upload= ing is in process, corresponds to FileUploadEntry.READY constant The file = will be uploaded on queue order. - "canceled" - upl= oading of the file is canceled, corresponds to FileUploadEntry.UPLOAD_CANCE= LED constant - "done" - the fil= e is uploaded successfully, corresponds to FileUploadEntry.UPLOAD_SUCCESS = constant - "transfer_error"= - a file transfer error occurred, corresponds to FileUploadEntry.UPLOAD_T= RANSFER_ERROR constant - "size_error" - t= he file exceeded maximum size, corresponds to FileUploadEntry.UPLOAD_SIZE_E= RROR constant - = - = - - = - = - - - = - = - = - - entries[i].size Returns the = size of the file. Available in flash enabled version only = - = - - entries[i].TypeReturns the m= ime type of the file. Available in flash enabled version only - = - - entries[i].creator Returns t= he name of the author of the file. Available in flash enabled version only<= /entry> = - = - - entries[i].creationDateRetur= ns the date when the file was created. Available in flash enabled version o= nly = - = - - entries[i].modificationDate Returns the date of the last file modification. Available in flash enabled= version only = - = - = - = - = - = - - -
- = - = - = - = - = - Client side object properties available with specific <= link linkend=3D"fileUploadEventAttributes"> event attributes</link> - - - - Property - Description = - - - + The + <rich:fileUpload><= /property> + component allows to use internat= ionalization method to + redefine and localize the labels. You could = use application resource + bundle and define RICH_FILE_UPLOAD_CAN= CEL_LABEL, + RICH_FILE_UPLOAD_STOP_LABEL<= /code>, + RICH_FILE_UPLOAD_ADD_LABEL, + RICH_FILE_UPLOAD_UPLOAD_LABE= L, + RICH_FILE_UPLOAD_CLEAR_LABEL= , + RICH_FILE_UPLOAD_CLEAR_ALL_L= ABEL, + RICH_FILE_UPLOAD_PROGRESS_LA= BEL, + RICH_FILE_UPLOAD_SIZE_ERROR_= LABLE, + RICH_FILE_UPLOAD_TRANSFER_ER= ROR_LABLE, + RICH_FILE_UPLOAD_ENTRY_STOP_= LABEL, + RICH_FILE_UPLOAD_ENTRY_CLEAR= _LABEL, + RICH_FILE_UPLOAD_ENTRY_CANCE= L_LABEL there. = - = - = - = - - entry.state = - Returns the file state. Possible states are = - - = - "initialized" - = the file is added, corresponds to FileUploadEntry.INITIALIZED constant - "progress" - the= file is being uploaded, corresponds to FileUploadEntry.UPLOAD_IN_PROGRESS = constant - "ready" - upload= ing is in process, corresponds to FileUploadEntry.READY constant The file = will be uploaded on queue order. - "canceled" - upl= oading of the file is canceled, corresponds to FileUploadEntry.UPLOAD_CANCE= LED constant - "done" - the fil= e is uploaded successfully, corresponds to FileUploadEntry.UPLOAD_SUCCESS = constant - "transfer_error"= - a file transfer error occurred, corresponds to FileUploadEntry.UPLOAD_T= RANSFER_ERROR constant - "size_error" - t= he file exceeded maximum size, corresponds to FileUploadEntry.UPLOAD_SIZE_E= RROR constant - = - = - - = - = - - - = - - entry.fileName = - Returns the file's name. This property= works with all event handlers except for "onadd". - - = - = - = - = - - entry.size Returns the size = of the file. Available in flash enabled version only = - = - - entry.TypeReturns the mime t= ype of the file. Available in flash enabled version only - = - - entry.creator Returns the na= me of the author of the file. Available in flash enabled version only = - = - - entry.creationDateReturns th= e date when the file was created. Available in flash enabled version only = - = - - entry.modificationDate Retu= rns the date of the last file modification. Available in flash enabled vers= ion only = - = - = - = - = - = - - -
- = - = - = -
- = -
- Look-and-Feel Customization - For skinnability implementation, the components use a - style class redefinition method. - Default style classes are mapped on - skin parameters. - - There are two ways to redefine the appearance of all - <rich:fileUpload> - components at once: - Redefine the corresponding skin parameters= - Add to your style sheets style classes us= ed by a - <rich:fileUpload> - component - - -
= -
- Skin Parameters Redefinition + = - - Skin parameters redefinition for a component - - - - Skin parameters - CSS properties - - - - - tableBackgroundColor - background-color - - - tableBorderColor - border-color - = - - -
- = - - Skin parameters redefinition for a font - - - - Skin parameters - CSS properties - - - - - generalFamilyFont - font-family - - - generalSizeFont - font-size - = - - -
- = - - Skin parameters redefinition for a toolbar - - - - Skin parameters - CSS properties - - - - - additionalBackgroundColor - background-color - - - tableBorderColor - border-bottom-color - - - tableBackgroundColor - border-top-color - - - tableBackgroundColor - border-left-color - - = - - -
- = - - Skin parameters redefinition for items in the list</tit= le> - <tgroup cols=3D"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 - - - - Skin parameters - CSS properties - - - - - generalLinkColor - color - - - -
+ The + <rich:fileUpload><= /property> + component could work together wi= th Seam framework. Here you can see how to c= onfigure filters for both + of them in web.xml file in + order to handle + <rich:fileUpload><= /property> + requests. = - - Skin parameters redefinition for a button - - - - Skin parameters - CSS properties - - - - - trimColor - background-color - = - - -
- - Skin parameters redefinition for a button border - - - - Skin parameters - CSS properties - - - - - tableBorderColor - border-color - = - - -
- - Skin parameters redefinition for a highlighted button</= title> - <tgroup cols=3D"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</titl= e> - <tgroup cols=3D"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", &q= uot;Clean" buttons - - - - Skin parameters - CSS properties - - - - - generalTextColor - color - - - -
- - Skin parameters redefinition for a disabled "Start= " button icon - - - - Skin parameters - CSS properties - - - - - tableBorderColor - color - - - -
- - Skin parameters redefinition for a disabled "Clear= " button icon - - - - Skin parameters - CSS properties - - - - - tableBorderColor - color - - - -
-
= -
- Definition of Custom Style Classes = - The following picture illustrates how CSS classes define sty= les for component elements. -
- Classes names - - - - - -
-
- Classes names - - - - - -
+
+ +
+ JavaScript API + + JavaScript API + + + + Function + Description + + + + + enable() + Enables the compo= nent + + + disable() + Disables the comp= onent + + + stop() + Stops the uploadi= ng + process + + + clear() + Removes all files= from the list. + The function can also ge= t the + $('id').compon= ent.entries[i] + as a parameter to remove= a + particular file. + = -
- Classes names that define a component representation</t= itle> - <tgroup cols=3D"2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-fileupload-list-decor</entry> - <entry>Defines styles for a wrapper <div> el= ement of a fileUpload</entry> - </row> - <row> - <entry>rich-fileupload-font</entry> - <entry>Defines styles for a font of buttons and it= ems</entry> - </row> - <row> - <entry>rich-fileupload-toolbar-decor</entry> - <entry>Defines styles for a toolbar</entry> - </row> - <row> - <entry> rich-fileupload-list-overflow</entry> - <entry>Defines styles for a list of files</entry> - </row> - </tbody> - </tgroup> - </table> = - = - <table > - <title>Classes names that define buttons representation - - - - Class name - Description - - - - - rich-fileupload-button - Defines styles for a buttons - - - rich-fileupload-button-border - Defines styles for a border of buttons - - - rich-fileupload-button-light - Defines styles for a highlight of button - - - rich-fileupload-button-press - Defines styles for a pressed button - - - rich-fileupload-button-dis - Defines styles for a disabled button - - - rich-fileupload-button-selection - Defines styles for "Upload", &quo= t;Clean" buttons - - - -
- = - - Classes names that define the representation of the but= tons' icons - - - - Class name - Description - - - - - rich-fileupload-ico - Defines styles for an icon - - - rich-fileupload-ico-add - Defines styles for a "Add" button= icon - - - rich-fileupload-ico-start - Defines styles for a "Upload" but= ton icon - - - rich-fileupload-ico-stop - Defines styles for a "Stop" butto= n icon - - - rich-fileupload-ico-clear - Defines styles for a "Clear" butt= on icon - - - rich-fileupload-ico-add-dis - Defines styles for a disabled "Add&quo= t; button icon - - - rich-fileupload-ico-start-dis - Defines styles for a disabled "Upload&= quot; button icon - - - rich-fileupload-ico-clear-dis - Defines styles for a disabled "Clear&q= uot; button icon - - - -
- = - - Classes names that define list items representation</ti= tle> - <tgroup cols=3D"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> ele= ment of a list items</entry> - </row> - <row> - <entry>rich-fileupload-anc</entry> - <entry>Defines styles for "Cancel", &quo= t;Stop", "Clear" links</entry> - </row> - </tbody> - </tgroup> - </table> - = - = - <para>In order to redefine styles for all <emphasis role=3D"bold">= <property><rich:fileUpload></property></emphasis> components on a pag= e = - using CSS, it's enough to create classes with the same na= mes = - (possible classes could be found in the tables <link linkend= =3D"fileUploadCN"> above</link>) and define necessary properties in them. = - </para> - <para> - <emphasis role=3D"bold">Example:</emphasis> - </para> - <programlisting role=3D"CSS"><![CDATA[... + + + + </tbody> + </tgroup> + </table> + + + + <table id=3D"objectProperties"> + <title>Client side object properties + + + + Property + Description + + + + + + entries + Returns a array o= f all files in + the list + + + + + + entries.length + Returns the numbe= r of files in + the list + + + + + entries[i].fileNa= me + Returns the file = name, that is + retrieved by the array i= ndex + + + + + + + entries[i].state = + Returns the file = state. Possible + states are + + + "initialized&= quot; + - + the + file + is + added, + corresponds + to + FileUploadEntry.INITIALI= ZED + constant + + + + "progress&quo= t; + - + the + file + is + being + uploaded, + corresponds + to + FileUploadEntry.UPLOAD_I= N_PROGRESS + constant + + + "ready" + - + uploading + is + in + process, + corresponds + to + FileUploadEntry.READY + constant + The + file + will + be + uploaded + on + queue + order. + + + "canceled&quo= t; + - + uploading + of + the + file + is + canceled, + corresponds + to + FileUploadEntry.UPLOAD_C= ANCELED + constant + + + + "done" + - + the + file + is + uploaded + successfully, + corresponds + to + FileUploadEntry.UPLOAD_S= UCCESS + constant + + + "transfer_err= or" + - + a + file + transfer + error + occurred, + corresponds + to + FileUploadEntry.UPLOAD_T= RANSFER_ERROR + constant + + + + "size_error&q= uot; + - + the + file + exceeded + maximum + size, + corresponds + to + FileUploadEntry.UPLOAD_S= IZE_ERROR + constant + + + + + + + + + + + entries[i].size + Returns the size= of the file. + Available in flash enabl= ed + version only + + + entries[i].Type + Returns the mime = type of the + file. Available in flash + enabled version only + + + entries[i].creato= r + Returns the name = of the author of + the file. Available in f= lash + enabled version only + + + entries[i].creati= onDate + Returns the date = when the file + was created. Available in + flash enabled version + only + + + entries[i].modifi= cationDate + Returns the date = of the last file + modification. Available = in + flash enabled version + only + + + + + + + +
+ + + + + + Client side object properties availab= le with specific <link + linkend=3D"fileUploadEve= ntAttributes"> event + attributes</link> + + + + Property + Description + + + + + + + + + entry.state + Returns the file = state. Possible + states are + + + "initialized&= quot; + - + the + file + is + added, + corresponds + to + FileUploadEntry.INITIALI= ZED + constant + + + + "progress&quo= t; + - + the + file + is + being + uploaded, + corresponds + to + FileUploadEntry.UPLOAD_I= N_PROGRESS + constant + + + "ready" + - + uploading + is + in + process, + corresponds + to + FileUploadEntry.READY + constant + The + file + will + be + uploaded + on + queue + order. + + + "canceled&quo= t; + - + uploading + of + the + file + is + canceled, + corresponds + to + FileUploadEntry.UPLOAD_C= ANCELED + constant + + + + "done" + - + the + file + is + uploaded + successfully, + corresponds + to + FileUploadEntry.UPLOAD_S= UCCESS + constant + + + "transfer_err= or" + - + a + file + transfer + error + occurred, + corresponds + to + FileUploadEntry.UPLOAD_T= RANSFER_ERROR + constant + + + + "size_error&q= uot; + - + the + file + exceeded + maximum + size, + corresponds + to + FileUploadEntry.UPLOAD_S= IZE_ERROR + constant + + + + + + + + + entry.fileName + Returns the file&= apos;s name. + This property works with= all + event handlers except for + "onadd". + + + + + + + entry.size + Returns the size= of the file. + Available in flash enabl= ed + version only + + + entry.Type + Returns the mime = type of the + file. Available in flash + enabled version only + + + entry.creator + Returns the name = of the author of + the file. Available in f= lash + enabled version only + + + entry.creationDat= e + Returns the date = when the file + was created. Available in + flash enabled version + only + + + entry.modificatio= nDate + Returns the date = of the last file + modification. Available = in + flash enabled version + only + + + + + + + +
+ + + +
+ +
+ Look-and-Feel Customization + For skinnability implementation, the components = use a + style class redefinition= method. + Default style classes are mapped= on + skin parameters. + + There are two ways to redefine the appearance of= all + <rich:fileUpload><= /property> + components at once: + + Redefine the corre= sponding skin + parameters + + + Add to your style= sheets style classes used + by a + <rich:fileU= pload> + component + + + +
+ +
+ Skin Parameters Redefinition + + + Skin parameters redefinition for a co= mponent + + + + Skin parameters + CSS properties + + + + + tableBackgroundCo= lor + background-color<= /entry> + + + tableBorderColor<= /entry> + border-color + + + +
+ + + Skin parameters redefinition for a fo= nt + + + + Skin parameters + CSS properties + + + + + generalFamilyFont= + font-family + + + generalSizeFont + font-size + + + +
+ + + Skin parameters redefinition for a to= olbar + + + + Skin parameters + CSS properties + + + + + additionalBackgro= undColor + background-color<= /entry> + + + tableBorderColor<= /entry> + border-bottom-col= or + + + tableBackgroundCo= lor + border-top-color<= /entry> + + + tableBackgroundCo= lor + border-left-color= + + + + +
+ + + Skin parameters redefinition for item= s in the list + + + + Skin parameters + CSS properties + + + + + tableBorderColor<= /entry> + border-bottom-col= or + + + +
+ + + Skin parameters redefinition for a &q= uot;Cancel", + "Clear" links + + + + Skin parameters + CSS properties + + + + + generalLinkColor<= /entry> + color + + + +
+ + + Skin parameters redefinition for a bu= tton + + + + Skin parameters + CSS properties + + + + + trimColor + background-color<= /entry> + + + +
+ + Skin parameters redefinition for a bu= tton border + + + + Skin parameters + CSS properties + + + + + tableBorderColor<= /entry> + border-color + + + +
+ + Skin parameters redefinition for a hi= ghlighted button + + + + Skin parameters + CSS properties + + + + + trimColor + background-color<= /entry> + + + selectControlColo= r + border-color + + + +
+ + + Skin parameters redefinition for a pr= essed button + + + + Skin parameters + CSS properties + + + + + selectControlColo= r + border-color + + + additionalBackgro= undColor + background-color<= /entry> + + + +
+ + + Skin parameters redefinition for &quo= t;Upload", + "Clean" buttons + + + + Skin parameters + CSS properties + + + + + generalTextColor<= /entry> + color + + + +
+ + Skin parameters redefinition for a di= sabled + "Start" button icon</tit= le> + <tgroup cols=3D"2"> + <thead> + <row> + <entry>Skin parameters</= entry> + <entry>CSS properties</e= ntry> + </row> + </thead> + <tbody> + <row> + <entry>tableBorderColor<= /entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for a di= sabled + "Clear" button icon</tit= le> + <tgroup cols=3D"2"> + <thead> + <row> + <entry>Skin parameters</= entry> + <entry>CSS properties</e= ntry> + </row> + </thead> + <tbody> + <row> + <entry>tableBorderColor<= /entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>Definition of Custom Style Classes + + The following picture illustrates how CSS classe= s define styles for + component elements. +
+ Classes names + + + + + +
+
+ Classes names + + + + + +
+ +
+ Classes names that define a component= representation + + + + Class name + Description + + + + + rich-fileupload-l= ist-decor + Defines styles fo= r a wrapper + <div> element of + a fileUpload + + + rich-fileupload-f= ont + Defines styles fo= r a font of + buttons and items + + + rich-fileupload-t= oolbar-decor + Defines styles fo= r a + toolbar + + + rich-fileupload-= list-overflow + Defines styles fo= r a list of + files + + + +
+ + + + Classes names that define buttons rep= resentation + + + + Class name + Description + + + + + rich-fileupload-b= utton + Defines styles fo= r a + buttons + + + rich-fileupload-b= utton-border + Defines styles fo= r a border of + buttons + + + rich-fileupload-b= utton-light + Defines styles fo= r a highlight of + button + + + rich-fileupload-b= utton-press + Defines styles fo= r a pressed + button + + + rich-fileupload-b= utton-dis + Defines styles fo= r a disabled + button + + + rich-fileupload-b= utton-selection + Defines styles for + "Upload", + "Clean" + buttons + + + +
+ + + Classes names that define the represe= ntation of the buttons' + icons + + + + Class name + Description + + + + + rich-fileupload-i= co + Defines styles fo= r an + icon + + + rich-fileupload-i= co-add + Defines styles fo= r a + "Add" button + icon + + + rich-fileupload-i= co-start + Defines styles fo= r a + "Upload" + button icon + + + rich-fileupload-i= co-stop + Defines styles fo= r a + "Stop" + button icon + + + rich-fileupload-i= co-clear + Defines styles fo= r a + "Clear" + button icon + + + rich-fileupload-i= co-add-dis + Defines styles fo= r a disabled + "Add" button + icon + + + rich-fileupload-i= co-start-dis + Defines styles fo= r a disabled + "Upload" + button icon + + + rich-fileupload-i= co-clear-dis + Defines styles fo= r a disabled + "Clear" + button icon + + + +
+ + + Classes names that define list items = representation + + + + Class name + Description + + + + + rich-fileupload-t= able-td + Defines styles fo= r a wrapper + <td> element of + a list items + + + rich-fileupload-a= nc + Defines styles for + "Cancel", + "Stop", + "Clear" + links + + + +
+ + + In order to redefine styles for all + <rich:fileUpload><= /property> + components on a page using CSS, = it's enough to + create classes with the same names (possible= classes could be found in + the tables a= bove) and define + necessary properties in them. + + Example: + + = - = - This is the result: - = -
- Redefinition styles with predefined classes - - - - - -
- = - In the example above the font weight and text decoration for= "Cancel" and "Clear" links are changed. - = - - Also it's possible to change styles of particular <rich:fileUpload> co= mponent. = - In this case you should create own style classes and use them = in the corresponding <rich:fileUpload&= gt; = - styleClass attribute= s. An example is placed below: - - - Example: - - + + This is the result: + +
+ Redefinition styles with predefined c= lasses + + + + + +
+ + In the example above the font weight and text de= coration for + "Cancel" and "Clear" lin= ks are + changed. + + Also it's possible to change styles of par= ticular + <rich:fileUpload><= /property> + component. In this case you shou= ld create own style + classes and use them in the corresponding + <rich:fileUpload><= /property> + + + styleClass + attributes. An example is placed= below: + + Example: + + = - - The "addButtonClass"<= /emphasis> attribute for = - <rich:fileUpload> is defined as it's shown in the example below: - - - Example: - - -]]> = - = - This is the result: -
- Redefinition styles with own classes and <emphasis><pro= perty>styleClass</property></emphasis> attributes - - - - - -
= - = - As it could be seen on the picture above, the font style for= "Add" button is changed. - = -
- = -
- Relevant Resources Links - Here you can see an example of - <rich:fileUpload> - usage and sources for the given example. -
+...]]> + The + "addButtonClass&quo= t; + attribute for + <rich:fileUpload><= /property> + is defined as it's shown in= the example below: + + Example: + + +]]> = + This is the result: +
+ Redefinition styles with own classes = and <emphasis> + <property>styleClass</pr= operty> + </emphasis> attributes + + + + + +
+ + As it could be seen on the picture above, the fo= nt style for + "Add" button is changed. + +
+ +
+ Relevant Resources Links + Here you can see an examp= le of + <rich:fileUpload><= /property> + usage and sources for the given = example. +
+
- = + --===============6288110713903800293==--