Author: vkorluzhenko Date: 2007-07-31 13:07:00 -0400 (Tue, 31 Jul 2007) New Revision: 1964 Modified: trunk/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml trunk/docs/userguide/en/src/main/docbook/included/suggestionBox.desc.xml trunk/docs/userguide/en/src/main/docbook/included/suggestionBox.xml trunk/docs/userguide/en/src/main/resources/images/suggestionbox4.gif Log: http://jira.jboss.com/jira/browse/RF-451 Modified: trunk/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-07-31 17:05:19 UTC (rev 1963) +++ trunk/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-07-31 17:07:00 UTC (rev 1964) @@ -276,7 +276,7 @@ </section> <section> - <title> Redefinition of Skin Parameters</title> + <title> Skin parameters redefinition</title> <table> <title>Label Skin parameters redefinition</title> Modified: trunk/docs/userguide/en/src/main/docbook/included/suggestionBox.desc.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/suggestionBox.desc.xml 2007-07-31 17:05:19 UTC (rev 1963) +++ trunk/docs/userguide/en/src/main/docbook/included/suggestionBox.desc.xml 2007-07-31 17:07:00 UTC (rev 1964) @@ -42,6 +42,7 @@ <listitem>Flexible list of components to update after AJAX request managed by attributes</listitem> <listitem>Setting restriction to AJAX request generation</listitem> <listitem>Easily setting action to collect suggestion data</listitem> + <listitem>Keyboard navigation support</listitem> </itemizedlist> </section> </section> \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/suggestionBox.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-07-31 17:05:19 UTC (rev 1963) +++ trunk/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-07-31 17:07:00 UTC (rev 1964) @@ -189,7 +189,240 @@ after which AJAX requests are called to perform suggestion.</para> </section> + <section> + <title>Look-and-Feel Customization</title> + + <para>For skinnability implementation, the components use a style class redefinition method. + Default style classes are mapped on skin parameters.</para> + + <para>There are two ways to redefine the appearance of all suggestionbox at once:</para> + + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + + <listitem> + <para>Add to a user's style sheets style classes used by a suggestionbox</para> + </listitem> + </itemizedlist> + </section> + + <section> + <title> Skin parameters redefinition</title> + + <table> + <title>General skin parameters redefinition for popup list</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for popup list</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>additionalBackgroundColor</entry> + + <entry>background-color</entry> + </row> + + <row> + <entry>panelBorderColor</entry> + + <entry>border-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for shadow element of the list</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for shadow element of the list</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>shadowBackgroundColor</entry> + + <entry>background-color</entry> + </row> + + <row> + <entry>shadowBackgroundColor</entry> + + <entry>border-color</entry> + </row> + + <row> + <entry>shadowOpacity</entry> + + <entry>opacity</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for popup table rows</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for popup table rows</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>generalSizeFont</entry> + + <entry>font-size</entry> + </row> + + <row> + <entry>generalTextColor</entry> + + <entry>color</entry> + </row> + + <row> + <entry>generalFamilyFont</entry> + + <entry>font-family</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Skin parameters redefinition for selected row</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Parameters for selected row</entry> + + <entry>CSS properties</entry> + </row> + </thead> + + <tbody> + <row> + <entry>headerBackgroundColor</entry> + + <entry>background-color</entry> + </row> + + <row> + <entry>generalSizeFont</entry> + + <entry>font-size</entry> + </row> + + <row> + <entry>generalFamilyFont</entry> + + <entry>font-family</entry> + </row> + <row> + <entry>headerTextColor</entry> + + <entry>color</entry> + </row> + + </tbody> + </tgroup> + </table> + </section> + + <section> + <title>Definition of Custom Style Classes</title> + + <figure> + <title>Classes names</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox4.gif"/> + </imageobject> + </mediaobject> + </figure> + + <para>On the screenshot, there are classes names defining specified elements.</para> + + <table> + <title>Component skin class</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-sb-overflow</entry> + + <entry>Defines the styles of outer div</entry> + </row> + + <row> + <entry>rich-sb-int-decor-table</entry> + + <entry>Defines the styles for suggestion box table</entry> + </row> + + <row> + <entry>rich-sb-int</entry> + + <entry>Defines the styles for suggestion box table rows (tr)</entry> + </row> + + <row> + <entry>rich-sb-cell-padding</entry> + + <entry>Defines the styles for suggestion box table cells (td)</entry> + </row> + + <row> + <entry>rich-sb-shadow</entry> + + <entry>Defines the styles for shadow</entry> + </row> + + <row> + <entry>rich-sb-int-sel</entry> + + <entry>Defines the styles for selected row</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>In order to redefine the style for all saggestionbox components on a page using CSS, it's enough to + create classes with the same names and define the necessary properties in them.</para> + + <para>To change the style of particular suggestionbox components define your own style classes in the corresponding suggestionbox attributes. </para> + </section> + + <section> <title>Relevant resources links</title> <para> <ulink Modified: trunk/docs/userguide/en/src/main/resources/images/suggestionbox4.gif =================================================================== (Binary files differ)