Author: vkorluzhenko Date: 2007-10-30 08:13:26 -0400 (Tue, 30 Oct 2007) New Revision: 3616 Modified: trunk/docs/userguide/en/src/main/docbook/included/panel.xml trunk/docs/userguide/en/src/main/docbook/included/panelBar.xml trunk/docs/userguide/en/src/main/docbook/included/panelBarItem.xml trunk/docs/userguide/en/src/main/docbook/included/panelMenu.xml trunk/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml Log: http://jira.jboss.com/jira/browse/RF-920 - checked and added skins fixed errors in description of classes. Modified: trunk/docs/userguide/en/src/main/docbook/included/panel.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panel.xml 2007-10-30 12:10:21 UTC (rev 3615) +++ trunk/docs/userguide/en/src/main/docbook/included/panel.xml 2007-10-30 12:13:26 UTC (rev 3616) @@ -172,7 +172,7 @@ <section> <title>Skin Parameters Redefinition</title> <table> - <title>Skin parameters for the panel</title> + <title>Skin parameters redefinition for a whole component</title> <tgroup cols="2"> <thead> <row> @@ -193,7 +193,7 @@ </tgroup> </table> <table> - <title>Parameters for a header element</title> + <title>Skin parameters redefinition for a header element</title> <tgroup cols="2"> <thead> <row> @@ -230,7 +230,7 @@ </tgroup> </table> <table> - <title>Parameters for a body element</title> + <title>Skin parameters redefinition for a body element</title> <tgroup cols="2"> <thead> <row> @@ -257,8 +257,9 @@ </section> <section> <title>Definition of Custom Style Classes</title> + <para>On the screenshot there are classes names that define styles for component elements.</para> <figure> - <title>Style classes of panel</title> + <title>Style classes</title> <mediaobject> <imageobject> @@ -266,7 +267,7 @@ </imageobject> </mediaobject> </figure> - <para>On the screenshot, there are classes names that define specified elements.</para> + <table> <title>Classes names that define a component appearance</title> <tgroup cols="2"> @@ -279,15 +280,15 @@ <tbody> <row> <entry>rich-panel</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a panel</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> </row> <row> <entry>rich-panel-header</entry> - <entry>Defines styles for header element of a panel</entry> + <entry>Defines styles for a header element</entry> </row> <row> <entry>rich-panel-body</entry> - <entry>Defines styles for a panel body</entry> + <entry>Defines styles for a body elemnt</entry> </row> </tbody> </tgroup> Modified: trunk/docs/userguide/en/src/main/docbook/included/panelBar.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panelBar.xml 2007-10-30 12:10:21 UTC (rev 3615) +++ trunk/docs/userguide/en/src/main/docbook/included/panelBar.xml 2007-10-30 12:13:26 UTC (rev 3616) @@ -46,9 +46,9 @@ <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it could be used on a page: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="XML"><![CDATA[... <rich:panelBar> <!--//... --> @@ -65,9 +65,9 @@ <section> <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelBar; ... HtmlPanelBar myBar = new HtmlPanelBar(); @@ -76,9 +76,9 @@ </section> <section> <title>Details of Usage</title> - <para>As it was mentioned <link linkend="panelBar">above</link>, <property>panelBar</property> is used for grouping any - content on the client, thus its customization deals only with specification of sizes and - styles for rendering.</para> + <para>As it was mentioned <link linkend="panelBar">above</link>, + <property>panelBar</property> is used for grouping any content on the client, thus its + customization deals only with specification of sizes and styles for rendering.</para> <para><emphasis> <property>&quot;width&quot;</property> </emphasis> and <emphasis> @@ -106,12 +106,36 @@ it&apos;s described for its children).</listitem> </itemizedlist> </section> + <section> + <title>Skin Parameters Redefinition</title> + <table> + <title>Skin parameter redefinition for a whole component</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameter</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>headerBackgroundColor</entry> + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> <title>Definition of Custom Style Classes</title> - <para>There is one predefined class for the <property>panelBar</property>, which is - applicable to the whole component, specifying padding, borders, and etc.</para> + <para>There is one predefined class for the <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis>, which is applicable to a whole component, specifying padding, borders, and + etc.</para> <figure> - <title>Custom style class of panelBar</title> + <title>Style class</title> <mediaobject> <imageobject> @@ -120,7 +144,7 @@ </mediaobject> </figure> <table> - <title>Classes names that define a component appearance</title> + <title>Class name that define a component appearance</title> <tgroup cols="2"> <thead> <row> @@ -131,15 +155,17 @@ <tbody> <row> <entry>rich-panelbar</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a panelbar</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a + component</entry> </row> - </tbody> </tgroup> </table> - <para>Other classes responsible for elements rendering are described for child panelBarItem - elements and could be found in the components chapters.</para> - + <para>Other classes responsible for elements rendering are described for child <emphasis + role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> elements and could be found in the components chapters.</para> + <table> <title>Style component classes</title> <tgroup cols="2"> @@ -152,35 +178,35 @@ <tbody> <row> <entry>styleClass</entry> - <entry>applicable to the whole panel together with headers</entry> + <entry>Applicable to a whole component (together with headers)</entry> </row> <row> <entry>headerClass</entry> - <entry>applicable to headers elements</entry> + <entry>Applicable to a header element</entry> </row> <row> <entry>contentClass</entry> - <entry>applicable to panels</entry> + <entry>Applicable to a content </entry> </row> </tbody> </tgroup> </table> <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define necessary properties in them.</para> - + <property>&lt;rich:panelBar&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with + the same names and define necessary properties in them.</para> + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis>attributes.</para> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis>attributes.</para> <para>CSS code piece used on a page:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="HTML"><![CDATA[... . rich-panelbar{ padding:10px; @@ -193,9 +219,9 @@ <para>When using headerClass and headerClassActive attributes the declaration of headerClass should precede the one of headerClassActive:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="HTML"><![CDATA[... .headerClass{ ... @@ -217,16 +243,20 @@ </rich:panelBar> ... ]]></programlisting> - <para>Hence, padding for all <property>panelBars</property> is changed on a page as well as - a font for particular <property>panelBarItems</property> content.</para> + <para>Hence, padding for all <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> is changed on a page as well as a font for particular + <emphasis role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> content.</para> </section> <section> <title>Relevant Resources Links</title> <para> <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelBar.js... - >Here</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:panelBar&gt;</property></emphasis> usage and sources for the given example. - </para> + >Here</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> usage and sources for the given example. </para> </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/panelBarItem.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panelBarItem.xml 2007-10-30 12:10:21 UTC (rev 3615) +++ trunk/docs/userguide/en/src/main/docbook/included/panelBarItem.xml 2007-10-30 12:13:26 UTC (rev 3616) @@ -75,8 +75,13 @@ </section> <section> <title>Details of Usage</title> - <para>The <emphasis ><property> &quot;label&quot;</property></emphasis > attribute defines text to be represented. If you can use the - <emphasis ><property>&quot;label&quot;</property></emphasis > facet, you can even not use the <emphasis ><property>&quot;label&quot;</property></emphasis > attribute.</para> + <para>The <emphasis> + <property> &quot;label&quot;</property> + </emphasis> attribute defines text to be represented. If you can use the <emphasis> + <property>&quot;label&quot;</property> + </emphasis> facet, you can even not use the <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute.</para> <emphasis role="bold">Example:</emphasis> <programlisting role="XML"><![CDATA[... <rich:panelBarItem...> @@ -89,10 +94,11 @@ </rich:panelBarItem> ... ]]></programlisting> - <para>As it was mentioned <link linkend="panelBarItem">above</link>, <property>panelBarItem</property> is used for grouping any - content inside within one <property>panelBar</property>, thus its customization deals only - with specification of sizes and styles for rendering.</para> - <para><property>panelBar</property> could contain any number of child + <para>As it was mentioned <link linkend="panelBarItem">above</link>, + <property>panelBarItem</property> is used for grouping any content inside within one + <property>panelBar</property>, thus its customization deals only with specification of sizes + and styles for rendering.</para> + <para><property>panelBar</property> could contain any number of child <property>panelBarItem</property> components inside, which content is uploaded onto the client and headers are controls to open the corresponding child element.</para> </section> @@ -114,32 +120,32 @@ <section> <title>Skin Parameters Redefinition</title> <table> - <title>Skin parameters for the panel content appearance</title> + <title>Skin parameters redefinition for a content </title> <tgroup cols="2"> <thead> <row> - <entry>Skin parameters for a hint</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> </thead> <tbody> <row> - <entry>panelTextColor</entry> + <entry>generalTextColor</entry> <entry>color</entry> </row> <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> + <entry>preferableDataSizeFont</entry> + <entry>font-size</entry> </row> <row> - <entry>border</entry> - <entry>tableBorderColor</entry> + <entry>preferableDataFamilyFont</entry> + <entry>font-family</entry> </row> </tbody> </tgroup> </table> <table> - <title>Parameters for panel header appearance</title> + <title>Skin parameters redefinition for a header element (active or inactive)</title> <tgroup cols="2"> <thead> <row> @@ -149,25 +155,41 @@ </thead> <tbody> <row> + <entry>headerTextColor</entry> + <entry>color</entry> + </row> + <row> <entry>headerBackgroundColor</entry> - <entry>border</entry> + <entry>background-color</entry> </row> + <row> + <entry>headerSizeFont</entry> + <entry>font-size</entry> + </row> + <row> + <entry>headerWeightFont</entry> + <entry>font-weight</entry> + </row> + <row> + <entry>headerFamilyFont</entry> + <entry>font-family</entry> + </row> </tbody> </tgroup> </table> </section> <section> <title>Definition of Custom Style Classes</title> + <para>On the screenshot there are classes names that define styles for component elements.</para> <figure> - <title>PanelBarItem style classes</title> + <title>Style classes</title> <mediaobject> <imageobject> <imagedata fileref="images/panelBar3.gif" scalefit="1"/> </imageobject> </mediaobject> </figure> - <para>There are three predefined classes for the <property>panelBarItem</property> shown on the - screenshot and described in the table below</para> + <table> <title>Classes names that define a component appearance</title> <tgroup cols="2"> @@ -180,22 +202,24 @@ <tbody> <row> <entry>rich-panelbar-header</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a panelbar item header</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a header + element</entry> </row> - + <row> <entry>rich-panelbar-header-act</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of an acting panelbar item header</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of an active header + element</entry> </row> - + <row> <entry>rich-panelbar-content</entry> - <entry>Defines styles for a panelbar item content</entry> + <entry>Defines styles for a content</entry> </row> </tbody> </tgroup> </table> - + <table> <title>Style component classes</title> <tgroup cols="2"> @@ -208,27 +232,27 @@ <tbody> <row> <entry>headerClass</entry> - <entry>applicable to header elements</entry> + <entry>Applicable to a header element</entry> </row> <row> <entry>contentClass</entry> - <entry>applicable to panel elements</entry> + <entry>Applicable to a content</entry> </row> </tbody> </tgroup> </table> - + <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> components on a page using CSS, it&apos;s enough to create classes with the same names and define necessary properties in them.</para> - + <para>To change styles of particular <emphasis role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis> components, define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis>attributes.</para> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> components, define your own style classes in the corresponding <emphasis + role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis>attributes.</para> <para>CSS code piece used on a page:</para> <para> @@ -243,7 +267,7 @@ } ... ]]></programlisting> - <para>The component is defined in the following way:</para> + <para>The component is defined in the following way:</para> <para> <emphasis role="bold">Example:</emphasis> @@ -256,7 +280,11 @@ </rich:panelBar> ... ]]></programlisting> - <para>Hence, a font size of all <property>panelBarItem</property> headers is changed on a page - as well as a font for the particular <property>panelBarItem</property> content.</para> + <para>Hence, a font size of all <emphasis role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> headers is changed on a page as well as a font for the particular <emphasis + role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> content.</para> </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/panelMenu.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panelMenu.xml 2007-10-30 12:10:21 UTC (rev 3615) +++ trunk/docs/userguide/en/src/main/docbook/included/panelMenu.xml 2007-10-30 12:13:26 UTC (rev 3616) @@ -234,9 +234,8 @@ </section> - <section> - <title>Look-and-Feel Customization</title> + <title>Definition of Custom Style Classes</title> <para>As this component is just a wrapper for its children its provide the only &quot;rich-panel-menu&quot; class for wrapper div element. To redefine appearance of Modified: trunk/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2007-10-30 12:10:21 UTC (rev 3615) +++ trunk/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2007-10-30 12:13:26 UTC (rev 3616) @@ -255,12 +255,12 @@ <title> Skin Parameters Redefinition</title> <table> - <title>Skin parameters redefinition for table element of the first level group</title> + <title>Skin parameters redefinition for a table element of the first level group</title> <tgroup cols="2"> <thead> <row> - <entry>Parameters for table element of the first level group</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> @@ -301,12 +301,12 @@ </table> <table> - <title>Skin parameters redefinition for table element of the second and next levels groups</title> + <title>Skin parameters redefinition for a table element of second and next levels groups</title> <tgroup cols="2"> <thead> <row> - <entry>Parameters for table element of the second and next levels groups</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> @@ -347,12 +347,12 @@ </table> <table> - <title>Skin parameter redefinition for wrapped div element of the first level group</title> + <title>Skin parameters redefinition for wrapper div element of the first level group</title> <tgroup cols="2"> <thead> <row> - <entry>Parameter for wrapped div element of the first level group</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> @@ -372,7 +372,7 @@ <section> <title>Definition of Custom Style Classes</title> - + <para>On the screenshot there are classes names that define styles for component elements.</para> <figure> <title>Classes names</title> @@ -383,10 +383,8 @@ </mediaobject> </figure> - <para>On the screenshot, there are classes names defining specified elements.</para> - <table> - <title>Classes names that define an upper level nodes</title> + <title>Classes names that define an upper level groups</title> <tgroup cols="2"> <thead> @@ -426,7 +424,7 @@ </table> <table> - <title>Classes names that define a second and lower level nodes</title> + <title>Classes names that define a second and lower level groups</title> <tgroup cols="2"> <thead> Modified: trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2007-10-30 12:10:21 UTC (rev 3615) +++ trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2007-10-30 12:13:26 UTC (rev 3616) @@ -263,7 +263,7 @@ <tgroup cols="2"> <thead> <row> - <entry>Parameters for table element item of first level</entry> + <entry>Skin parameters</entry> <entry>CSS properties</entry> </row> @@ -304,7 +304,7 @@ </table> <table> - <title>General skin parameter redefinition for disabled item </title> + <title>Skin parameter redefinition for a disabled item </title> <tgroup cols="2"> <thead> @@ -330,7 +330,7 @@ <section> <title>Definition of Custom Style Classes</title> - + <para>On the screenshot there are classes names that define styles for component elements.</para> <figure> <title>Classes names</title> @@ -341,9 +341,7 @@ </mediaobject> </figure> - <para>On the screenshot, there are classes names defining specified elements.</para> - - <table> + <table> <title>Classes names that define first level items</title> <tgroup cols="2">