Author: artdaw Date: 2008-03-26 10:18:32 -0400 (Wed, 26 Mar 2008) New Revision: 7259 Modified: trunk/docs/userguide/en/src/main/docbook/included/progressBar.desc.xml trunk/docs/userguide/en/src/main/docbook/included/progressBar.xml Log: http://jira.jboss.com/jira/browse/RF-1690 - review done Modified: trunk/docs/userguide/en/src/main/docbook/included/progressBar.desc.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/progressBar.desc.xml 2008-03-26 14:11:52 UTC (rev 7258) +++ trunk/docs/userguide/en/src/main/docbook/included/progressBar.desc.xml 2008-03-26 14:18:32 UTC (rev 7259) @@ -23,10 +23,10 @@ <section> <title>Key Features</title> <itemizedlist> - <listitem>Customization of informational part of the component</listitem> - <listitem>Status polling frequency adjustment</listitem> - <listitem>Ajax or Client modes</listitem> - <listitem>Option to display some numeric data along side with graphical presentation.</listitem> + <listitem><para>Highly customizable look and feel</para></listitem> + <listitem><para>Status polling frequency and timeout adjustment</para></listitem> + <listitem><para>Ajax or Client modes</para></listitem> + <listitem><para>Option to display some numeric data along side with graphical presentation</para></listitem> </itemizedlist> </section> </section> \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/progressBar.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/progressBar.xml 2008-03-26 14:11:52 UTC (rev 7258) +++ trunk/docs/userguide/en/src/main/docbook/included/progressBar.xml 2008-03-26 14:18:32 UTC (rev 7259) @@ -64,7 +64,7 @@ <section> <title>Details of Usage</title> <para> - As it was mentioned above, the <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property> </emphasis> + As it was mentioned above, the <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> component displays the status of the ongoing process. </para> <para> @@ -77,13 +77,13 @@ </listitem> <listitem> <para> - <emphasis><property>&quot;minValue&quot;</property></emphasis> (default value – &quot;0&quot;) sets minimal value for + <emphasis><property>&quot;minValue&quot;</property></emphasis> (default value is &quot;0&quot;) sets minimal value for the <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> to start rendering </para> </listitem> <listitem> <para> - <emphasis><property>&quot;minValue&quot;</property></emphasis> (default value – &quot;0&quot;) sets maximum value for + <emphasis><property>&quot;maxValue&quot;</property></emphasis> (default value is &quot;100&quot;) sets maximum value for the <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> to finish rendering </para> </listitem> @@ -232,7 +232,7 @@ <h:outputText value="Min value is {minValue}, current value is {value}, max value is {maxValue}"/> </rich:progressBar> ...]]> </programlisting> - <para>This is a result:</para> + <para>This is the result:</para> <figure> <title>Macrosubstitution</title> <mediaobject> @@ -397,184 +397,137 @@ <section> <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameters redefinition for the progressBar without a label</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>controlBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for the completed progress area of the progressBar without a label</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>selectControlColor</entry> + <entry>background-color</entry> + </row> + </tbody> + </tgroup> + </table> + <table> - <title>Skin parameters redefinition for the &quot;completed&quot; part of the bar with no label</title> - + <title>Skin parameters redefinition for the progressBar with a label</title> <tgroup cols="2"> <thead> <row> <entry>Skin parameters</entry> - <entry>CSS properties</entry> </row> </thead> - <tbody> <row> - <entry>selectControlColor</entry> - - <entry>background-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the &quot;completed&quot; part of the bar with a label used</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> <entry>panelBorderColor</entry> - <entry>border-color</entry> </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the “completed” part of the bar with a label used</title> - - <tgroup cols="2"> - <thead> <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>selectControlColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>controlBackgroundColor</entry> - - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the &quot;remained&quot; part of the bar</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>controlBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>controlTextColor</entry> - - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the bar itself with a label used</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - - <row> <entry>generalFamilyFont</entry> - <entry>font-family</entry> </row> - <row> - <entry>headerFamilyFont</entry> - - <entry>font-family</entry> - </row> - - <row> <entry>generalSizeFont</entry> - <entry>font-size</entry> </row> - <row> <entry>controlTextColor</entry> - <entry>color</entry> </row> - </tbody> </tgroup> </table> - <table> - <title>Skin parameters redefinition for the bar itself with no label used</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>controlBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - - </tbody> - </tgroup> - </table> - + <table> + <title>Skin parameters redefinition for the label of the progressBar</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for the completed progress area of the progressBar with a label</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>selectControlColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>controlBackgroundColor</entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for the remained progress area of the progressBar with a label</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>controlBackgroundColor</entry> + <entry>background-color</entry> + </row> + <row> + <entry>controlTextColor</entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> </section> <!-- END Skin Parameters Redefinition--> @@ -589,13 +542,13 @@ <title>Classes names</title> <mediaobject> <imageobject> - <imagedata fileref="images/progressbarClasses.png"/> + <imagedata fileref="images/progressBar_classes.png"/> </imageobject> </mediaobject> </figure> - <table> - <title>Classes names for the bar</title> + <table id="pBclasses"> + <title>Classes names for the progressBar without a label</title> <tgroup cols="2"> <thead> <row> @@ -606,19 +559,26 @@ <tbody> <row> <entry>rich-progress-bar-shell</entry> - <entry>Defines styles for the background and the borders of the bar when label is not used</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a progressBar</entry> </row> - <row> - <entry>rich-progress-bar-shell-dig</entry> - <entry>Defines styles for background, font and border settings when label is used</entry> + <entry>rich-progress-bar-uploaded</entry> + <entry>Defines styles for the completed progress area</entry> </row> + <row> + <entry>rich-progress-bar-height</entry> + <entry>Defines height for a progressBar</entry> + </row> + <row> + <entry>rich-progress-bar-width</entry> + <entry>Defines width for a progressBar</entry> + </row> </tbody> </tgroup> </table> <table> - <title>Classes names that define &quot;completed&quot; part of the bar</title> + <title>Classes names for the progressBar with a label</title> <tgroup cols="2"> <thead> <row> @@ -627,53 +587,39 @@ </row> </thead> <tbody> - <row> - <entry>rich-progress-bar-uploaded</entry> - <entry>Defines styles for of &quot;completed&quot; progress area with no labels used</entry> - </row> + <entry>rich-progress-bar-shell-dig</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a progressBar</entry> + </row> <row> <entry>rich-progress-bar-uploaded-dig</entry> - <entry>Defines styles for that &quot;completed&quot; progress area with labels used </entry> + <entry>Defines styles for the label</entry> </row> - <row> + <entry>rich-progress-bar-remained</entry> + <entry>Defines styles for the remained progress area</entry> + </row> + <row> <entry>rich-progress-bar-completed</entry> - <entry>Defines styles for the &quot;completed&quot; progress area with a label used</entry> + <entry>Defines styles for the completed progress area</entry> </row> - - - </tbody> - </tgroup> - </table> - - - - <table> - <title>Classes names that define &quot;remained&quot; part of the progress area</title> - <tgroup cols="2"> - <thead> <row> - <entry>Class name</entry> - <entry>Description</entry> + <entry>rich-progress-bar-height-dig</entry> + <entry>Defines height for a progressBar</entry> </row> - </thead> - <tbody> - <row> - <entry>rich-progress-bar-remained</entry> - <entry>Defines styles for the &quot;remained&quot; part of the bar</entry> + <entry>rich-progress-bar-width</entry> + <entry>Defines width for a progressBar</entry> </row> - - - </tbody> </tgroup> </table> + + <para>In order to redefine styles for all <emphasis role="bold"> <property>&lt;rich:progressBar&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="tab_cn3"> above</link>) and define necessary properties in them. </para> + same names (possible classes could be found in the tables <link linkend="pBclasses">above</link>) and define necessary properties in them. </para> <para> <emphasis role="bold">Example:</emphasis> @@ -694,10 +640,11 @@ </imageobject> </mediaobject> </figure> - <para>In the example the &quot;remained&quot; part of progress area is modified with a background-color CSS property.</para> + <para>In the example above background color of the remained part of progress area was changed.</para> <para>It&apos;s aslo possible to change styles of a particular - <emphasis role="bold"> <property>&lt;rich:progressBar&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> + <emphasis role="bold"> <property>&lt;rich:progressBar&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding + <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> <para> <emphasis role="bold">Example:</emphasis> </para> @@ -706,16 +653,16 @@ background-color: #ebf3fd; } ...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" + <para>The <emphasis><property>&quot;remainClass&quot;</property></emphasis> attribute for <emphasis role="bold" <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="XML"><![CDATA[<rich:progressBar value="#{bean.incValue1}" styleClass="myClass"/> + <programlisting role="XML"><![CDATA[<rich:progressBar value="#{bean.incValue1}" styleClass="remainClass"/> ]]></programlisting> - <para>This is a result:</para> + <para>This is the result:</para> <figure> <title>Modificaton of a look and feel with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> @@ -726,7 +673,7 @@ </mediaobject> </figure> - <para>As it could be seen on the picture above, the font style for output text was changed.</para> + <para>As it could be seen on the picture above, background color of the remained part of progress area was changed.</para> </section>