Author: vsukhov Date: 2008-03-15 12:25:09 -0400 (Sat, 15 Mar 2008) New Revision: 6842 Added: trunk/docs/userguide/en/src/main/resources/images/fileUploadCN.png Modified: trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml trunk/docs/userguide/en/src/main/resources/images/fileUpload.png Log: http://jira.jboss.com/jira/browse/RF-1207 I've added Skin Parameters Redefinition and Definition of Custom Style Classes sections Modified: trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml 2008-03-15 02:03:31 UTC (rev 6841) +++ trunk/docs/userguide/en/src/main/docbook/included/fileUpload.xml 2008-03-15 16:25:09 UTC (rev 6842) @@ -228,7 +228,7 @@ </para> <para>The <emphasis role="bold"><property>&lt;rich:fileUpload&gt;</property></emphasis> 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.</para> - </section> + <!-- ordering control set> @@ -263,10 +263,10 @@ </row> </tbody> </tgroup> - </table> + </table--> </section> - <section> + <!--section> <title>JavaScript API</title> <table> <title>JavaScript API</title> @@ -277,50 +277,8 @@ <entry>Description</entry> </row> </thead> - <tbody--> - <!--Sorting API--> - <!-- + <tbody> <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> @@ -347,7 +305,7 @@ </tbody> </tgroup> </table> - </section> + </section--> <section> <title>Look-and-Feel Customization</title> @@ -357,11 +315,11 @@ <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> + <property>&lt;rich:fileUpload&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> + <property>&lt;rich:fileUpload&gt;</property> </emphasis> component</listitem> </itemizedlist> </para> @@ -381,20 +339,20 @@ </thead> <tbody> <row> - <entry>generalBackgroundColor</entry> + <entry>tableBackgroundColor</entry> <entry>background-color</entry> </row> <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> + <entry>tableBorderColor</entry> + <entry>border-color</entry> </row> - + </tbody> </tgroup> </table> <table> - <title>Skin parameters redefinition for a button</title> + <title>Skin parameters redefinition for a font</title> <tgroup cols="2"> <thead> <row> @@ -404,14 +362,6 @@ </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> @@ -419,12 +369,12 @@ <entry>generalSizeFont</entry> <entry>font-size</entry> </row> - + </tbody> </tgroup> </table> <table> - <title>Skin parameters redefinition for a disabled button</title> + <title>Skin parameters redefinition for an items</title> <tgroup cols="2"> <thead> <row> @@ -434,28 +384,16 @@ </thead> <tbody> <row> - <entry>trimColor</entry> - <entry>background-color</entry> + <entry>tableBorderColor</entry> + <entry>border-bottom-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> + <title>Skin parameters redefinition for a cancel link</title> <tgroup cols="2"> <thead> <row> @@ -465,35 +403,16 @@ </thead> <tbody> <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> + <entry>generalLinkColor</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> + <title>Skin parameters redefinition for a toolbar</title> <tgroup cols="2"> <thead> <row> @@ -503,35 +422,27 @@ </thead> <tbody> <row> - <entry>trimColor</entry> + <entry>additionalBackgroundColor</entry> <entry>background-color</entry> </row> <row> - <entry>generalTextColor</entry> - <entry>color</entry> + <entry>tableBorderColor</entry> + <entry>border-bottom-color</entry> </row> <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> + <entry>tableBackgroundColor</entry> + <entry>border-top-color</entry> </row> <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> + <entry>tableBackgroundColor</entry> + <entry>border-left-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 button selection</title> + <title>Skin parameters redefinition for a button</title> <tgroup cols="2"> <thead> <row> @@ -541,16 +452,15 @@ </thead> <tbody> <row> - <entry>generalTextColor</entry> - <entry>color</entry> + <entry>trimColor</entry> + <entry>background-color</entry> </row> </tbody> </tgroup> </table> - <table> - <title>Skin parameters redefinition for a button content</title> + <title>Skin parameters redefinition for a highlighted button</title> <tgroup cols="2"> <thead> <row> @@ -559,21 +469,16 @@ </row> </thead> <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> + <entry>trimColor</entry> + <entry>background-color</entry> </row> - + </tbody> </tgroup> </table> - <table> - <title>Skin parameters redefinition for a source and target items</title> + <title>Skin parameters redefinition for a pressed button</title> <tgroup cols="2"> <thead> <row> @@ -583,24 +488,33 @@ </thead> <tbody> <row> - <entry>generalBackgroundColor</entry> + <entry>trimColor</entry> <entry>background-color</entry> </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Skin parameters redefinition for a disabled add button icon</title> + <tgroup cols="2"> + <thead> <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> </row> + </thead> + <tbody> <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> + <entry>tableBorderColor</entry> + <entry>color</entry> </row> </tbody> </tgroup> </table> - <table> - <title>Skin parameters redefinition for a source and target cell</title> + <title>Skin parameters redefinition for a disabled start button icon</title> <tgroup cols="2"> <thead> <row> @@ -610,24 +524,15 @@ </thead> <tbody> <row> - <entry>generalTextColor</entry> + <entry>tableBorderColor</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> + <title>Skin parameters redefinition for a disabled clear button icon</title> <tgroup cols="2"> <thead> <row> @@ -637,15 +542,14 @@ </thead> <tbody> <row> - <entry>controlBorderColor</entry> - <entry>border-color</entry> + <entry>tableBorderColor</entry> + <entry>color</entry> </row> - + </tbody> </tgroup> </table> - - + </section> <section> @@ -659,13 +563,13 @@ <mediaobject> <imageobject> - <imagedata fileref="images/pickList2.png"/> + <imagedata fileref="images/fileUploadCN.png"/> </imageobject> </mediaobject> </figure> - <table id="pickListC"> + <table id="fileUploadCN"> <title>Classes names that define a list representation</title> <tgroup cols="2"> <thead> @@ -676,16 +580,20 @@ </thead> <tbody> <row> - <entry>rich-picklist-list</entry> - <entry>Defines styles for a wrapper &lt;table&gt; element of a pickList</entry> + <entry>upload_list_decor</entry> + <entry>Defines styles for a wrapper &lt;table&gt; element of a fileUpload</entry> </row> + <row> + <entry>upload_font</entry> + <entry>Defines styles for a font of buttons and items</entry> + </row> </tbody> </tgroup> </table> <table > - <title>Classes names that define a button representation</title> + <title>Classes names that define toolbar representation</title> <tgroup cols="2"> <thead> <row> @@ -695,36 +603,17 @@ </thead> <tbody> <row> - <entry>rich-list-picklist-button</entry> - <entry>Defines styles for a button</entry> + <entry>upload_toolbar_decor</entry> + <entry>Defines styles for a toolbar</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> + <title>Classes names that define items representation</title> <tgroup cols="2"> <thead> <row> @@ -734,12 +623,12 @@ </thead> <tbody> <row> - <entry>rich-picklist-source-items</entry> - <entry>Defines styles for an item in a source list</entry> + <entry>upload_anc</entry> + <entry>Defines styles for a cancel link</entry> </row> <row> - <entry>rich-picklist-target-items</entry> - <entry>Defines styles for an item in a target list</entry> + <entry>upload_table_td</entry> + <entry>Defines styles for an items</entry> </row> </tbody> @@ -747,7 +636,7 @@ </table> <table > - <title>Classes names that define a source cell representation</title> + <title>Classes names that define buttons representation</title> <tgroup cols="2"> <thead> <row> @@ -757,23 +646,28 @@ </thead> <tbody> <row> - <entry>rich-picklist-source-cell</entry> - <entry>Defines styles for a cell in a source list</entry> + <entry>upload_button_border</entry> + <entry>Defines styles for a border of buttons</entry> </row> <row> - <entry>rich-picklist-source-cell-selected</entry> - <entry>Defines styles for a selected cell in a source list</entry> + <entry>upload_button</entry> + <entry>Defines styles for a buttons</entry> </row> <row> - <entry>rich-picklist-source-cell-active</entry> - <entry>Defines styles for an active cell in a source list</entry> + <entry>upload_button_light</entry> + <entry>Defines styles for a highlight of button</entry> </row> + <row> + <entry>upload_button_press</entry> + <entry>Defines styles for a pressed button</entry> + </row> + </tbody> </tgroup> </table> <table > - <title>Classes names that define a target cell representation</title> + <title>Classes names that define disabled add button icon representation</title> <tgroup cols="2"> <thead> <row> @@ -783,17 +677,10 @@ </thead> <tbody> <row> - <entry>rich-picklist-target-cel</entry> - <entry>Defines styles for a cell in a source list</entry> + <entry>upload_ico_add_dis</entry> + <entry>Defines styles for a disabled add button icon</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> @@ -801,7 +688,7 @@ <table > - <title>Classes names that define a control representation</title> + <title>Classes names that define disabled upload button icon representation</title> <tgroup cols="2"> <thead> <row> @@ -811,41 +698,43 @@ </thead> <tbody> <row> - <entry>rich-picklist-control-disabled</entry> - <entry>Defines styles for a control in a disabled state</entry> + <entry>upload_ico_start_dis</entry> + <entry>Defines styles for a disabled upload button icon</entry> </row> + + </tbody> + </tgroup> + </table> + <table > + <title>Classes names that define disabled clear button icon representation</title> + <tgroup cols="2"> + <thead> <row> - <entry>rich-picklist-control-copyall</entry> - <entry>Defines styles for a "copyAll" control</entry> + <entry>Class name</entry> + <entry>Description</entry> </row> + </thead> + <tbody> <row> - <entry>rich-picklist-control-copy</entry> - <entry>Defines styles for a "Copy" control</entry> + <entry>upload_ico_clear_dis</entry> + <entry>Defines styles for a disabled clear button icon</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> + <property>&lt;rich:fileUpload&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> + 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-picklist-list{ - background-color:#ecf4fe; +..upload_list_decor{ +background-color:#ecf4fe; } ...]]></programlisting> @@ -855,16 +744,16 @@ <title>Redefinition styles with predefined classes</title> <mediaobject> <imageobject> - <imagedata fileref="images/pickListClass.png"/> + <imagedata fileref="images/fileUpload10.png"/> </imageobject> </mediaobject> </figure> - <para>In the example the background color for lists is changed.</para> + <para>In the example the background color for list 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> + ><property>&lt;rich:fileUpload&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:fileUpload&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> <para> <emphasis role="bold">Example:</emphasis> @@ -874,13 +763,13 @@ 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>The <emphasis><property>&quot;addButtonClass&quot;</property></emphasis> attribute for <emphasis role="bold" + ><property>&lt;rich:fileUpload&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 role="CSS"><![CDATA[<rich:fileUpload ... addButtonClass="myClass"/> ]]></programlisting> <para>This is a result:</para> @@ -889,14 +778,14 @@ <title>Redefinition styles with own classes and styleClass attributes</title> <mediaobject> <imageobject> - <imagedata fileref="images/pickListStyle.png"/> + <imagedata fileref="images/fileUpload9.png"/> </imageobject> </mediaobject> </figure> - <para>As it could be seen on the picture above, the font style for buttons is changed.</para> + <para>As it could be seen on the picture above, the font style for add button is changed.</para> - </section--> + </section> <section> <title>Relevant Resources Links</title> Modified: trunk/docs/userguide/en/src/main/resources/images/fileUpload.png =================================================================== (Binary files differ) Added: trunk/docs/userguide/en/src/main/resources/images/fileUploadCN.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/fileUploadCN.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream