[richfaces-svn-commits] JBoss Rich Faces SVN: r6796 - in trunk: docs/userguide/en/src/main/docbook and 3 other directories.

Author: vsukhov Date: 2008-03-13 16:37:14 -0400 (Thu, 13 Mar 2008) New Revision: 6796 Added: trunk/docs/userguide/en/src/main/docbook/included/fileUpload.desc.xml trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml trunk/docs/userguide/en/src/main/resources/images/fileUpload.png trunk/docs/userguide/en/src/main/resources/images/fileUpload2.png trunk/docs/userguide/en/src/main/resources/images/fileUpload5.png trunk/docs/userguide/en/src/main/resources/images/fileUpload6.png Modified: trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml trunk/docs/userguide/en/src/main/docbook/included/pickList.xml trunk/docs/userguide/en/src/main/docbook/master.xml trunk/docs/userguide/pom.xml trunk/ui/togglePanel/src/main/config/component/togglePanel.xml Log: http://jira.jboss.com/jira/browse/RF-2198 I've corrected the description for Toggle control component. http://jira.jboss.com/jira/browse/RF-1207 I've added fileUpload component into guide Modified: trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml 2008-03-13 18:27:40 UTC (rev 6795) +++ trunk/docs/userguide/en/src/main/docbook/included/comboBox.xml 2008-03-13 20:37:14 UTC (rev 6796) @@ -330,7 +330,7 @@ </tgroup> </table> <table> - <title>Skin parameters redefinition for a button in inactive and disable state</title> + <title>Skin parameters redefinition for an inactive button</title> <tgroup cols="2"> <thead> <row> @@ -353,6 +353,29 @@ </tgroup> </table> <table> + <title>Skin parameters redefinition for a disabled button</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + + <row> + <entry>buttonBorderColor</entry> + <entry>border-top-color</entry> + </row> + <row> + <entry>buttonBorderColor</entry> + <entry>border-left-color</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> <title>Skin parameters redefinition for a hovered button</title> <tgroup cols="2"> <thead> @@ -445,7 +468,7 @@ </tgroup> </table> <table> - <title>Skin parameters redefinition for an input field, input field in inactive and disable state</title> + <title>Skin parameters redefinition for an input field</title> <tgroup cols="2"> <thead> <row> @@ -471,7 +494,7 @@ </tgroup> </table> <table> - <title>Skin parameters redefinition for an item and selected item</title> + <title>Skin parameters redefinition for an inactive input field</title> <tgroup cols="2"> <thead> <row> @@ -481,6 +504,58 @@ </thead> <tbody> <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>inputFieldBorderColor</entry> + <entry>border-bottom-color</entry> + </row> + <row> + <entry>inputFieldBorderColor</entry> + <entry>border-right-color</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for a disabled input field</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>inputFieldBorderColor</entry> + <entry>border-bottom-color</entry> + </row> + <row> + <entry>inputFieldBorderColor</entry> + <entry>border-right-color</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for an item</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> <entry>itemSizeFont</entry> <entry>font-size</entry> </row> @@ -496,6 +571,32 @@ </tbody> </tgroup> </table> + <table> + <title>Skin parameters redefinition for a selected item</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>itemSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>itemFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>itemTextColor</entry> + <entry>color</entry> + </row> + + </tbody> + </tgroup> + </table> </section> <section> @@ -711,7 +812,7 @@ <section> <title>Relevant Resources Links</title> <para> - <ulink url="">Here</ulink> you can see an example of <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> usage + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/comboBox.js... you can see an example of <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> usage and sources for the given example. </para> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml 2008-03-13 18:27:40 UTC (rev 6795) +++ trunk/docs/userguide/en/src/main/docbook/included/componentControl.xml 2008-03-13 20:37:14 UTC (rev 6796) @@ -215,8 +215,10 @@ <para>This is a result:</para> <figure> <title><emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> shows with the help of <emphasis role="bold"> <property>&lt;rich:componentControl&gt;</property> - </emphasis> with <emphasis><property> &quot;for&quot;</property></emphasis> attribute.</title> + </emphasis>.</title> <mediaobject> <imageobject> <imagedata fileref="images/componentControl1.png"/> Added: trunk/docs/userguide/en/src/main/docbook/included/fileUpload.desc.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/fileUpload.desc.xml (rev 0) +++ trunk/docs/userguide/en/src/main/docbook/included/fileUpload.desc.xml 2008-03-13 20:37:14 UTC (rev 6796) @@ -0,0 +1,40 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>fileUpload</keyword> + </keywordset> + </sectioninfo> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component designed to perform Ajax-ed files upload to server. + </para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/fileUpload.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> +<section> + <title>Key Features</title> + <itemizedlist> + <listitem>Highly customizable look and feel</listitem> + <listitem>File types/File sizes restrictions</listitem> + <listitem>Multiple files upload support </listitem> + <listitem>Cancel the request possibility </listitem> + <listitem>One request for every upload component</listitem> + <listitem>Different submit modes (Server/Client)</listitem> + <listitem>Asynchronous mode</listitem> + + </itemizedlist> +</section> +</section> + \ No newline at end of file Added: trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml (rev 0) +++ trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml 2008-03-13 20:37:14 UTC (rev 6796) @@ -0,0 +1,910 @@ +<?xml version="1.0" encoding="UTF-8"?> +<section> + <sectioninfo> + <keywordset> + <keyword>rich:fileUpload</keyword> + <keyword>fileUpload</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.FileUpload</entry> + </row> + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlFileUpload</entry> + </row> + <row> + <entry>component-family</entry> + + <entry>org.richfaces.component.FileUpload</entry> + </row> + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.renderkit.html.FileUploadRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.FileUploadTag</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:fileUpload uploadData="#{bean.data}"/> +...]]></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.HtmlFileUpload; +... +HtmlFileUpload myFileUpload = new HtmlFileUpload(); +...]]></programlisting> + </section> + <section> + <title>Details of Usage</title> + + <!--maintenance of component orderingList--> + + <para>The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component consists of two parts:<itemizedlist> + <listitem><property>List of files</property> which contains the list of currently chosen files with possibility to manage every file. + </listitem> + <listitem> + <property>Component controls</property>- the bar with controls for managing the whole component. + + </listitem> + </itemizedlist> + </para> + + <!-- attributes of component orderingList --> + + <para> + The <emphasis> + <property> &quot;disabled&quot;</property> + </emphasis> + attribute is used to disable all elements of the component. All the controls should be disabled too. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:fileUpload disabled="true" uploadData="#{bean.data}" /> +...]]></programlisting> + <para>This is a result:</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis>with <emphasis> + <property> &quot;disabled&quot;</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/fileUpload2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>The <emphasis> + <property> &quot;acceptedTypes&quot;</property></emphasis> attribute is used to define file types which should be accepted to upload. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:fileUpload uploadData="#{bean.data}" acceptedTypes="html"/> + ...]]></programlisting> + <para>As it could be seen in the example below, only files with "html" extension should be accepted to upload.</para> + + <para>The <emphasis> + <property> &quot;autoclear&quot;</property></emphasis> attribute is used to remove automatically files from list after upload completed.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" + acceptedTypes="html"/> + ...]]></programlisting> + <para>As it could be seen in the example below, files removes from list after upload completed.</para> + <para>The <emphasis> + <property> &quot;maxFilesQuantity&quot;</property></emphasis> defines max number of files allowed for upload. + After number of files in the list is equals to this attribute – add button should be disabled. + Add button should not be enabled before upload of the whole list done. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" maxFilesQuantity="2" + acceptedTypes="html"/> + ...]]></programlisting> + <para>This is a result:</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis>with <emphasis> + <property> &quot;maxFilesQuantity&quot;</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/fileUpload5.png"/> + </imageobject> + </mediaobject> + </figure> + <para>As it could be seen in the picture below, only 2 files allows for upload.</para> + <para>The <emphasis> + <property> &quot;fileUploadedListener&quot;</property></emphasis> is + called at server side after every file uploaded and used for the file saving by end developer. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" maxFilesQuantity="2" fileUploadListener="#{bean.listener}" + acceptedTypes="html"/> + ...]]></programlisting> + <para>The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> provides using a number of handlers. The <emphasis> + <property> &quot;onupload&quot;</property></emphasis> is available to cancel the upload at client side. The <emphasis> + <property> &quot;onuploadcomplete&quot;</property></emphasis> is called after all files in from list uploaded. The <emphasis> + <property> &quot;onuploadcanceled&quot;</property></emphasis> is called after upload was canceled via cancel control. The <emphasis> + <property> &quot;onerror&quot;</property></emphasis> is if the file upload was interrupted according to any errors.</para> + <para> + There is a number of facets that define entry customization. Markup should be provided using <emphasis> + <property> &quot;entry&quot;</property></emphasis> facet. <emphasis> + <property> &quot;label&quot;</property></emphasis> facet could be used to provide displaying the progress of uploading. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:fileUpload uploadData="#{bean.data}" addControlLabel="myLabel" autoclear="true" maxFilesQuantity="2" fileUploadListener="#{bean.listener}" + acceptedTypes="html"> + <f:facet name="label"> + <h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}"></h:outputText> + </f:facet> +</rich:fileUpload> +...]]></programlisting> + <para>This is a result:</para> + <figure> + <title><emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis>with <emphasis> + <property> &quot;label&quot;</property> + </emphasis> facet</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/fileUpload6.png"/> + </imageobject> + </mediaobject> + </figure> + <para>As it could be seen in the picture below, the label displays under the item.</para> + <para>Labels of <property>component controls</property> can be defined with <emphasis> + <property> &quot;addControlLabel&quot;</property></emphasis>, <emphasis> + <property> &quot;clearAllControlLabel&quot;</property></emphasis>, <emphasis> + <property> &quot;clearControlLabel&quot;</property></emphasis>, <emphasis> + <property> &quot;stopEntryControlLabel&quot;</property></emphasis>, <emphasis> + <property> &quot;uploadControlLabel&quot;</property></emphasis></para> + <para>The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component allows to use sizes attributes: + <itemizedlist> + <listitem><emphasis> + <property> &quot;listHeight&quot;</property></emphasis> attribute specify height for list of files in pixels + </listitem> + <listitem><emphasis> + <property> &quot;listWidth&quot;</property></emphasis> attribute specify width for list of files in pixels. + </listitem> + </itemizedlist> + </para> + + + </section> + + <!-- ordering control set> + + <table> + <title>Keyboard usage for elements selection</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <Sorting API > + <row> + <entry>CTRL+click</entry> + <entry>Inverts selection for an item</entry> + </row> + <row> + <entry>SHIFT+click</entry> + <entry>Selects all rows from active one to a clicked row if they differ, + else select the active row. All other selections are cleared</entry> + </row> + <row> + <entry>CTRL+A</entry> + <entry>Selects all elements inside the list if some active element is + already present in a list</entry> + </row> + <row> + <entry>Up, Down arrows</entry> + <entry>Changes the active and selected elements to the next or previous in a list</entry> + </row> + </tbody> + </tgroup> + </table> + </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>SortAscending()</entry> + <entry>Sorts items in the list ascending</entry> + </row> + <row> + <entry>SortDescending()</entry> + <entry>Sorts items in the list descending</entry> + </row> + <row> + <entry>Sort()</entry> + <entry>Inverts current sorting</entry> + </row> + --> + + <!--Controls common API --> + <!--row> + <entry>hide()</entry> + <entry>Hides ordering control</entry> + </row> + <row> + <entry>show()</entry> + <entry>Shows ordering control</entry> + </row> + <row> + <entry>isShown()</entry> + <entry>Checks if current control is shown</entry> + </row> + <row> + <entry>enable()</entry> + <entry>Enables ordering control</entry> + </row> + <row> + <entry>disable()</entry> + <entry>Disables ordering control</entry> + </row> + <row> + <entry>isEnabled()</entry> + <entry>Checksif current control is enabled</entry> + </row--> + <!--List managing API --> + <!--row> + <entry>copy()</entry> + <entry>Copies selected item from the source list to the target list</entry> + </row> + <row> + <entry>remove()</entry> + <entry>Removes selected item from the target list to the source list</entry> + </row> + <row> + <entry>copyAll()</entry> + <entry>Copies all items from the source list to the target list</entry> + </row> + <row> + <entry>removeAll()</entry> + <entry>Removes all items from the target list to the source list</entry> + </row> + <row> + <entry>getSelection()</entry> + <entry>Returns currently selected item</entry> + </row> + <row> + <entry>getItems()</entry> + <entry>Returns the collection of all items</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <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>&lt;rich:pickList&gt;</property> + </emphasis> components at once: <itemizedlist> + <listitem>Redefine the corresponding skin parameters</listitem> + <listitem> Add to your style sheets style classes used by a <emphasis role="bold"> + <property>&lt;rich:pickList&gt;</property> + </emphasis> component</listitem> + </itemizedlist> + </para> + </section> + + <section> + <title>Skin Parameters Redefinition</title> + + <table> + <title>Skin parameters redefinition for a list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>tableBorderWidth</entry> + <entry>border-width</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> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + <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 disabled 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>generalTextColor</entry> + <entry>color</entry> + </row> + <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 pressed 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>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>tableBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tableBorderWidth</entry> + <entry>border-width</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>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>tableBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tableBorderWidth</entry> + <entry>border-width</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for a button selection</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 button content</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 source and target items</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>tableBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tableBorderWidth</entry> + <entry>border-width</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for a source and target cell</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> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for a controls</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>controlBorderColor</entry> + <entry>border-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/pickList2.png"/> + </imageobject> + </mediaobject> + + </figure> + + <table id="pickListC"> + <title>Classes names that define a list representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-list</entry> + <entry>Defines styles for a wrapper &lt;table&gt; element of a pickList</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table > + <title>Classes names that define a button representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-list-picklist-button</entry> + <entry>Defines styles for a button</entry> + </row> + <row> + <entry>rich-list-picklist-button-disabled</entry> + <entry>Defines styles for a disabled button</entry> + </row> + <row> + <entry>rich-list-picklist-button-press</entry> + <entry>Defines styles for a pressed button</entry> + </row> + <row> + <entry>rich-list-picklist-button-light</entry> + <entry>Defines styles for a button highlight</entry> + </row> + <row> + <entry>rich-list-picklist-button-selection</entry> + <entry>Defines styles for a button selection</entry> + </row> + <row> + <entry>rich-list-picklist-button-content</entry> + <entry>Defines styles for a button content</entry> + </row> + </tbody> + </tgroup> + </table> + + + <table > + <title>Classes names that define a source and target items representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-source-items</entry> + <entry>Defines styles for an item in a source list</entry> + </row> + <row> + <entry>rich-picklist-target-items</entry> + <entry>Defines styles for an item in a target list</entry> + </row> + + </tbody> + </tgroup> + </table> + + <table > + <title>Classes names that define a source cell representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-source-cell</entry> + <entry>Defines styles for a cell in a source list</entry> + </row> + <row> + <entry>rich-picklist-source-cell-selected</entry> + <entry>Defines styles for a selected cell in a source list</entry> + </row> + <row> + <entry>rich-picklist-source-cell-active</entry> + <entry>Defines styles for an active cell in a source list</entry> + </row> + </tbody> + </tgroup> + </table> + + <table > + <title>Classes names that define a target cell representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-target-cel</entry> + <entry>Defines styles for a cell in a source list</entry> + </row> + <row> + <entry>rich-picklist-target-cell-selected</entry> + <entry>Defines styles for a selected cell in a target list</entry> + </row> + <row> + <entry>rich-picklist-target-cell-active</entry> + <entry>Defines styles for an active cell in a target list</entry> + </row> + </tbody> + </tgroup> + </table> + + + + <table > + <title>Classes names that define a control representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-control-disabled</entry> + <entry>Defines styles for a control in a disabled state</entry> + </row> + <row> + <entry>rich-picklist-control-copyall</entry> + <entry>Defines styles for a "copyAll" control</entry> + </row> + <row> + <entry>rich-picklist-control-copy</entry> + <entry>Defines styles for a "Copy" control</entry> + </row> + <row> + <entry>rich-picklist-control-remove</entry> + <entry>Defines styles for a "Remove" control</entry> + </row> + <row> + <entry>rich-picklist-control-removeall</entry> + <entry>Defines styles for a "removeAll" control</entry> + </row> + + </tbody> + </tgroup> + </table> + + <para>In order to redefine styles for all <emphasis role="bold"> + <property>&lt;rich:pickList&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + same names (possible classes could be found in the tables <link linkend="pickListC"> above</link>) and define necessary properties in them. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[... +.rich-picklist-list{ + background-color:#ecf4fe; +} +...]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with predefined classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/pickListClass.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the background color for lists is changed.</para> + + <para>Also it’s possible to change styles of particular <emphasis role="bold" + ><property>&lt;rich:pickList&gt;</property></emphasis> component. In this case you should create own style classes and use them in the corresponding <emphasis role="bold" + ><property>&lt;rich:pickList&gt;</property></emphasis> <property>styleClass</property> 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>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" + ><property>&lt;rich:pickList&gt;</property></emphasis> is defined as it’s shown in the example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS"><![CDATA[<rich:pickList ... styleClass="myClass"/> +]]></programlisting> + + <para>This is a result:</para> + + <figure> + <title>Redefinition styles with own classes and styleClass attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/pickListStyle.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it could be seen on the picture above, the font style for buttons 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>&lt;rich:fileUpload&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> + +</section> Modified: trunk/docs/userguide/en/src/main/docbook/included/pickList.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/pickList.xml 2008-03-13 18:27:40 UTC (rev 6795) +++ trunk/docs/userguide/en/src/main/docbook/included/pickList.xml 2008-03-13 20:37:14 UTC (rev 6796) @@ -2,8 +2,8 @@ <section> <sectioninfo> <keywordset> - <keyword>rich:pickList</keyword> - <keyword>pickList</keyword> + <keyword>rich:fileUpload</keyword> + <keyword>fileUpload</keyword> </keywordset> </sectioninfo> <table> @@ -21,27 +21,27 @@ <row> <entry>component-type</entry> - <entry>org.richfaces.PickList</entry> + <entry>org.richfaces.component.FileUpload</entry> </row> <row> <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPickList</entry> + <entry>org.richfaces.component.html.HtmlFileUpload</entry> </row> <row> <entry>component-family</entry> - <entry>org.richfaces.PickList</entry> + <entry>org.richfaces.component.FileUpload</entry> </row> <row> <entry>renderer-type</entry> - <entry>org.richfaces.PickListRenderer</entry> + <entry>org.richfaces.renderkit.html.FileUploadRenderer</entry> </row> <row> <entry>tag-class</entry> - <entry>org.richfaces.taglib.PickListTag</entry> + <entry>org.richfaces.taglib.FileUploadTag</entry> </row> </tbody> </tgroup> @@ -54,10 +54,7 @@ <emphasis role="bold">Example:</emphasis> </para> <programlisting role="XML"><![CDATA[... -<rich:pickList value="#{pickBean.listValues}"> - <f:selectItem itemValue="Bentley" itemLabel="Bentley"/> - <f:selectItem itemValue="Audi" itemLabel="Audi"/> -</rich:pickList> +<rich:fileUpload uploadData="#{bean.data}"/> ...]]></programlisting> </section> <section> @@ -66,9 +63,9 @@ <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPickList; + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlFileUpload; ... -HtmlPickList myPickList = new HtmlPickList(); +HtmlFileUpload myFileUpload = new HtmlFileUpload(); ...]]></programlisting> </section> <section> @@ -343,7 +340,7 @@ </table> <table> - <title>Skin parameters redefinition for a button, button in disable state</title> + <title>Skin parameters redefinition for a button</title> <tgroup cols="2"> <thead> <row> @@ -371,10 +368,40 @@ </tbody> </tgroup> + </table> + <table> + <title>Skin parameters redefinition for a disabled 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>generalTextColor</entry> + <entry>color</entry> + </row> + <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 pressed and highlighted button</title> + <title>Skin parameters redefinition for a pressed button</title> <tgroup cols="2"> <thead> <row> @@ -411,8 +438,45 @@ </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>generalTextColor</entry> + <entry>color</entry> + </row> + <row> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>generalSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>tableBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tableBorderWidth</entry> + <entry>border-width</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> <title>Skin parameters redefinition for a button selection</title> <tgroup cols="2"> <thead> Modified: trunk/docs/userguide/en/src/main/docbook/master.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/master.xml 2008-03-13 18:27:40 UTC (rev 6795) +++ trunk/docs/userguide/en/src/main/docbook/master.xml 2008-03-13 20:37:14 UTC (rev 6796) @@ -49,7 +49,9 @@ <!ENTITY columns_table SYSTEM "../../../target/generated/columns.xml"> <!ENTITY comboBox_table SYSTEM "../../../target/generated/combobox.xml"> <!ENTITY pickList_table SYSTEM "../../../target/generated/pickList.xml"> - <!ENTITY progressBar_table SYSTEM "../../../target/generated/progressBar.xml"> + <!ENTITY fileUpload_table SYSTEM "../../../target/generated/fileUpload.xml"> + + <!ENTITY coreComponents_table SYSTEM "../../../target/generated/a4j.xml"> ]> <book> @@ -93,6 +95,7 @@ &dropDownMenu_table; &menuComponents_table; &effect_table; +&fileUpload_table; &gmap_table; &virtualEarth_table; &inputNumberSlider_table; @@ -108,7 +111,7 @@ &panelBar_table; &panelMenu_table; &pickList_table; -&progressBar_table; + &scrollableDataTable_table; &separator_table; &simpleTogglePanel_table; Added: trunk/docs/userguide/en/src/main/resources/images/fileUpload.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/fileUpload.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/fileUpload2.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/fileUpload2.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/fileUpload5.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/fileUpload5.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/fileUpload6.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/fileUpload6.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Modified: trunk/docs/userguide/pom.xml =================================================================== --- trunk/docs/userguide/pom.xml 2008-03-13 18:27:40 UTC (rev 6795) +++ trunk/docs/userguide/pom.xml 2008-03-13 20:37:14 UTC (rev 6796) @@ -75,26 +75,37 @@ ${project.version} </version> </artifactItem> - - <artifactItem> <groupId> org.richfaces.ui </groupId> <artifactId> + fileUpload + </artifactId> + <version> + ${project.version} + </version> + </artifactItem> + + + <!--artifactItem> + <groupId> + org.richfaces.ui + </groupId> + <artifactId> progressBar </artifactId> <version> ${project.version} </version> - </artifactItem> + </artifactItem--> <artifactItem> <groupId> org.richfaces.ui </groupId> <artifactId> - combobox + comboBox </artifactId> <version> ${project.version} @@ -700,7 +711,7 @@ <imagePathSettingRequired> true </imagePathSettingRequired> - </format > + </format> <format> <formatName>html</formatName> <stylesheetResource> Modified: trunk/ui/togglePanel/src/main/config/component/togglePanel.xml =================================================================== --- trunk/ui/togglePanel/src/main/config/component/togglePanel.xml 2008-03-13 18:27:40 UTC (rev 6795) +++ trunk/ui/togglePanel/src/main/config/component/togglePanel.xml 2008-03-13 20:37:14 UTC (rev 6796) @@ -99,12 +99,12 @@ <property hidden="true"> <name>valid</name> <classname>java.lang.String</classname> - </property> - <property> - <name>label</name> - <classname>java.lang.String</classname> - <description>A localized user presentable name for this component.</description> </property> + <property> + <name>label</name> + <classname>java.lang.String</classname> + <description>A localized user presentable name for this component.</description> + </property> <!-- @@ -173,8 +173,7 @@ <name>for</name> <classname>java.lang.String</classname> <description> - <![CDATA[String containing comma separated ids (in the format of a UIComponent.findComponent() - call) of the target components.]]> + <![CDATA[String, which contains id (in the format of a UIComponent.findComponent() call) of the target Toggle Panel.]]> </description> </property> @@ -237,7 +236,7 @@ <description> CSS style(s) to be applied when this component is rendered - </description> + </description> <defaultvalue>""</defaultvalue> </property> <property> @@ -248,7 +247,7 @@ applied when this element is rendered. This value must be passed through as the "class" attribute on generated markup - </description> + </description> <defaultvalue>""</defaultvalue> </property>