Author: vkorluzhenko Date: 2007-08-07 11:46:38 -0400 (Tue, 07 Aug 2007) New Revision: 2106 Modified: trunk/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml trunk/docs/userguide/en/src/main/docbook/included/menuGroup.xml trunk/docs/userguide/en/src/main/docbook/included/menuItem.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: added styles for attributes Modified: trunk/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-08-07 15:45:17 UTC (rev 2105) +++ trunk/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-08-07 15:46:38 UTC (rev 2106) @@ -84,8 +84,15 @@ <section> <title>Details of Usage</title> - <para>All attributes except "value" are optional. The "value" attribute defines text to be - represented. If you can use the "label" facet, you can even not use the "value" attribute.</para> + <para>All attributes except <emphasis> + <property>"value"</property> + </emphasis> are optional. The <emphasis> + <property>"value"</property> + </emphasis> attribute defines text to be represented. If you can use the <emphasis> + <property>"label"</property> + </emphasis> facet, you can even not use the <emphasis> + <property>"value"</property> + </emphasis> attribute.</para> <para>Here is an example:</para> @@ -100,8 +107,10 @@ ... </programlisting> - <para>Use the "event" attribute to define an event for the represented element that triggers a - menu appearance. An example of a menu appearance on a click can be seen below.</para> + <para>Use the <emphasis> + <property>"event"</property> + </emphasis> attribute to define an event for the represented element that triggers a menu + appearance. An example of a menu appearance on a click can be seen below.</para> <para> @@ -115,7 +124,10 @@ <para>The <emphasis role="bold"> <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> "mode" attribute can be set to three possible parameters:</para> + </emphasis> + <emphasis> + <property>"mode"</property> + </emphasis> attribute can be set to three possible parameters:</para> <itemizedlist> <listitem> @@ -131,8 +143,9 @@ </listitem> </itemizedlist> - <para>An AJAX form submission is performed, and specified elements in the "reRender" attribute - are rerendered.</para> + <para>An AJAX form submission is performed, and specified elements in the <emphasis> + <property>"reRender"</property> + </emphasis> attribute are rerendered.</para> <itemizedlist> <listitem> @@ -140,18 +153,27 @@ </listitem> </itemizedlist> - <para>The "action" and "actionListener" item's attributes are ignored. Menu items don't fire any - submits themselves. The behavior is fully defined by the components nested inside items.</para> + <para>The <emphasis> + <property>"action"</property> + </emphasis> and <emphasis> + <property>"actionListener"</property> + </emphasis> item's attributes are ignored. Menu items don't fire any submits themselves. The + behavior is fully defined by the components nested inside items.</para> <note><title>Note:</title> As the <emphasis role="bold"> <property>&lt;rich:dropDownMenu&gt;</property> </emphasis> component doesn't provide its own form, use it between &lt;h:form&gt; and &lt;/h:form&gt; tags.</note> - <para>The "direction" and "jointPoint" attributes are used for defining aspects of menu - appearance.</para> + <para>The <emphasis> + <property>"direction"</property> + </emphasis> and <emphasis> + <property>"jointPoint"</property> + </emphasis> attributes are used for defining aspects of menu appearance.</para> - <para>Possible values for the "direction" attribute are:</para> + <para>Possible values for the <emphasis> + <property>"direction"</property> + </emphasis> attribute are:</para> <itemizedlist> <listitem> @@ -175,7 +197,9 @@ </listitem> </itemizedlist> - <para>Possible values for the "jointPoint" attribute are:</para> + <para>Possible values for the <emphasis> + <property>"jointPoint"</property> + </emphasis> attribute are:</para> <itemizedlist> <listitem> @@ -199,7 +223,13 @@ </listitem> </itemizedlist> - <para>By default, the "direction" and "jointPoint" attributes are set to "auto".</para> + <para>By default, the <emphasis> + <property>"direction"</property> + </emphasis> and <emphasis> + <property>"jointPoint"</property> + </emphasis> attributes are set to <emphasis> + <property>"auto"</property> + </emphasis>.</para> <para>Here is an example:</para> @@ -217,7 +247,7 @@ <para>This is the result:</para> <figure> - <title>Using the "direction" and "joinPoint" attributes</title> + <title>Using the "direction" and"joinPoint" attributes</title> <mediaobject> <imageobject> @@ -227,7 +257,11 @@ </figure> <para>You can correct an offset of the pop-up list relative to the label using the following - attributes: "horizontalOffset" and "verticalOffset".</para> + attributes: <emphasis> + <property>"horizontalOffset"</property> + </emphasis> and <emphasis> + <property>"verticalOffset"</property> + </emphasis>.</para> <para>Here is an example:</para> Modified: trunk/docs/userguide/en/src/main/docbook/included/menuGroup.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/menuGroup.xml 2007-08-07 15:45:17 UTC (rev 2105) +++ trunk/docs/userguide/en/src/main/docbook/included/menuGroup.xml 2007-08-07 15:46:38 UTC (rev 2106) @@ -2,51 +2,51 @@ <section> <sectioninfo> <keywordset> - <keyword>menuGroup</keyword> + <keyword>menuGroup</keyword> </keywordset> </sectioninfo> - - <table> - <title>Component identification parameters</title> + + <table> + <title>Component identification parameters</title> <tgroup cols="2"> <thead> <row> - <entry>Name</entry> - <entry>Value</entry> + <entry>Name</entry> + <entry>Value</entry> </row> </thead> <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.MenuGroup</entry> + <row> + <entry>component-type</entry> + <entry>org.richfaces.MenuGroup</entry> </row> - <row> + <row> <entry>component-class</entry> <entry>oorg.richfaces.component.html.HtmlMenuGroup</entry> </row> - <row> + <row> <entry>component-family</entry> <entry>org.richfaces.DropDownMenu</entry> </row> - <row> + <row> <entry>renderer-type</entry> <entry>org.richfaces.MenuGroupRenderer</entry> </row> - <row> + <row> <entry>tag-class</entry> <entry>org.richfaces.taglib.MenuGroupTag</entry> </row> </tbody> </tgroup> </table> - + <section> - <title>Creating the Component with a Page Tag</title> + <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="xml"><![CDATA[... <rich:dropDownMenu value="Active"> ... @@ -58,103 +58,134 @@ ... ]]></programlisting> </section> - + <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[... org.richfaces.component.html.HtmlMenuGroup myGroup = new org.richfaces.component.html.HtmlMenuGroup (); ... ]]></programlisting> </section> - + <section> <title>Details of Usage</title> - <para> - The &quot;value&quot; attribute defines the text representation of a group element in the page. - </para> - <para> - The &quot;icon&quot; attribute defines an icon for the component. The &quot;iconDisabled&quot; attribute defines an icon for when the group is disabled. Also you can use the &quot;icon&quot; and &quot;iconDisabled&quot; facets. If the facets are defined, the corresponding &quot;icon&quot; and &quot;iconDisabled&quot; attributes are ignored and the facets' contents are used as icons. This could be used for an item check box implementation. - </para> - <para> - Here is an example: - </para> + <para> The <emphasis> + <property>&quot;value&quot;</property> + </emphasis> attribute defines the text representation of a group element in the page. </para> + <para> The <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> attribute defines an icon for the component. The <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> attribute defines an icon for when the group is disabled. Also you can use + the <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> and <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> facets. If the facets are defined, the corresponding <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> and <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> attributes are ignored and the facets&apos; contents are used as icons. + This could be used for an item check box implementation. </para> + <para> Here is an example: </para> <programlisting role="xml"><![CDATA[... <f:facet name="icon"> <h:selectBooleanCheckbox value="#{bean.property}"/> </f:facet> ... ]]></programlisting> - <para> - The &quot;iconFolder&quot; and &quot;iconFolderDisabled&quot; attributes are defined for using icons as folder icons. The &quot;iconFolder&quot; and &quot;iconFolderDisabled&quot; facets use their contents as folder icon representations in place of the attribute values. - </para> - <para> - The &quot;direction&quot; attribute is used to define which way to display the menu as shown in the example below: - </para> + <para> The <emphasis> + <property>&quot;iconFolder&quot;</property> + </emphasis> and <emphasis> + <property>&quot;iconFolderDisabled&quot;</property> + </emphasis> attributes are defined for using icons as folder icons. The <emphasis> + <property>&quot;iconFolder&quot;</property> + </emphasis> and <emphasis> + <property>&quot;iconFolderDisabled&quot;</property> + </emphasis> facets use their contents as folder icon representations in place of the + attribute values. </para> + <para> The <emphasis> + <property>&quot;direction&quot;</property> + </emphasis> attribute is used to define which way to display the menu as shown in the + example below: </para> <para>Possible values are:</para> <itemizedlist> - <listitem><para>left - down - a submenu is attached to the left side of the menu and is dropping down</para></listitem> - <listitem><para>left - up - a submenu is attached to the left side of the menu and is dropping up</para></listitem> - <listitem><para>right - down - a submenu is attached to the right side of the menu and is dropping down</para></listitem> - <listitem><para>right - up - a submenu is attached to the right side of the menu and is dropping up</para></listitem> - <listitem><para>auto - smart positioning activation</para></listitem> + <listitem> + <para>left - down - a submenu is attached to the left side of the menu and is + dropping down</para> + </listitem> + <listitem> + <para>left - up - a submenu is attached to the left side of the menu and is dropping + up</para> + </listitem> + <listitem> + <para>right - down - a submenu is attached to the right side of the menu and is + dropping down</para> + </listitem> + <listitem> + <para>right - up - a submenu is attached to the right side of the menu and is + dropping up</para> + </listitem> + <listitem> + <para>auto - smart positioning activation</para> + </listitem> </itemizedlist> - <para> - By default, the &quot;direction&quot; attribute is set to &quot;auto&quot;. - </para> - <para> - Here is an example: - </para> + <para> By default, the <emphasis> + <property>&quot;direction&quot;</property> + </emphasis> attribute is set to <emphasis> + <property>&quot;auto&quot;</property> + </emphasis>. </para> + <para> Here is an example: </para> <programlisting role="xml"><![CDATA[... <rich:menuGroup value="Active" direction="left-down" <!--Nested menu components--> </rich:menuGroup> ... ]]></programlisting> - <para> - This would be the result: - </para> + <para> This would be the result: </para> <figure> - <title>Using the &quot;direction&quot; attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuGroup2.png" /> - </imageobject> - </mediaobject> - </figure> - </section> + <title>Using the &quot;direction&quot; attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/menuGroup2.png"/> + </imageobject> + </mediaobject> + </figure> + </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 menu groups at once: - </para> + <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 menu groups at once: </para> <itemizedlist> - <listitem><para>Redefine corresponding skin parameters</para></listitem> - <listitem><para>Add to user&apos;s styles heet style classes used by a menu group</para></listitem> + <listitem> + <para>Redefine corresponding skin parameters</para> + </listitem> + <listitem> + <para>Add to user&apos;s styles heet style classes used by a menu group</para> + </listitem> </itemizedlist> - </section> - <section> - <title>Skin parameters redefinition</title> + </section> + <section> + <title>Skin parameters redefinition</title> <table> - <title>Label Skin parameters redefinition</title> + <title>Label Skin parameters redefinition</title> <tgroup cols="2"> <thead> <row> - <entry>Skin parameters for group</entry> - <entry>CSS properties</entry> + <entry>Skin parameters for group</entry> + <entry>CSS properties</entry> </row> </thead> <tbody> <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> </row> <row> <entry>generalSizeFont</entry> @@ -164,9 +195,9 @@ </tgroup> </table> <table> - <title>Label Skin parameters redefinition</title> + <title>Label Skin parameters redefinition</title> <tgroup cols="2"> - <thead> + <thead> <row> <entry>Skin parameters for disabled group</entry> <entry>CSS properties</entry> @@ -180,11 +211,11 @@ </tbody> </tgroup> </table> - + <table> - <title>Label Skin parameters redefinition</title> + <title>Label Skin parameters redefinition</title> <tgroup cols="2"> - <thead> + <thead> <row> <entry>Skin parameters for text label</entry> <entry>CSS properties</entry> @@ -197,84 +228,80 @@ </row> </tbody> </tgroup> - </table> -</section> + </table> + </section> -<section> - <title> Definition custom style classes </title> - <para> - The classes names that define group element appearance are in the screenshot. - </para> - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuGroup3.png" /> - </imageobject> - </mediaobject> - </figure> - <table> - <title>Classes names that define group element appearance.</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>Rich-menu-group</entry> - <entry>Defines the class for wrapping div element for the whole group</entry> - </row> - <row> - <entry>Rich-menu-item-label</entry> - <entry>Defines properties for the text</entry> - </row> - <row> - <entry>Rich-menu-item-icon</entry> - <entry>Defines properties for the left icon element</entry> - </row> - <row> - <entry>Rich-menu-item-folder</entry> - <entry>Defines properties for the right icon element</entry> - </row> - </tbody> - </tgroup> - </table> - <para> - All listed elements except for the general one are defined for disabled mode. - </para> - <table> - <title>Classes names for disabled mode</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>Rich-menu-item-label-disabled</entry> - <entry>Defines properties for the text</entry> - </row> - <row> - <entry>Rich-menu-item-icon-disabled</entry> - <entry>Defines properties for the left icon element</entry> - </row> - <row> - <entry>Rich-menu-item-folder-disabled</entry> - <entry>Defines properties for the right icon element</entry> - </row> - </tbody> - </tgroup> - </table> - <para> - In order to redefine the style for all menu groups on a page using CSS, it&apos;s enough to create classes with the same names and define the necessary properties in them. - </para> - <para> - To change style aspects of particular panel menu groups define your own style classes in the corresponding menuGroup attributes. - </para> + <section> + <title> Definition custom style classes </title> + <para> The classes names that define group element appearance are in the screenshot. </para> + <figure> + <title>Classes names</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/menuGroup3.png"/> + </imageobject> + </mediaobject> + </figure> + <table> + <title>Classes names that define group element appearance.</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>Rich-menu-group</entry> + <entry>Defines the class for wrapping div element for the whole + group</entry> + </row> + <row> + <entry>Rich-menu-item-label</entry> + <entry>Defines properties for the text</entry> + </row> + <row> + <entry>Rich-menu-item-icon</entry> + <entry>Defines properties for the left icon element</entry> + </row> + <row> + <entry>Rich-menu-item-folder</entry> + <entry>Defines properties for the right icon element</entry> + </row> + </tbody> + </tgroup> + </table> + <para> All listed elements except for the general one are defined for disabled mode. </para> + <table> + <title>Classes names for disabled mode</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>Rich-menu-item-label-disabled</entry> + <entry>Defines properties for the text</entry> + </row> + <row> + <entry>Rich-menu-item-icon-disabled</entry> + <entry>Defines properties for the left icon element</entry> + </row> + <row> + <entry>Rich-menu-item-folder-disabled</entry> + <entry>Defines properties for the right icon element</entry> + </row> + </tbody> + </tgroup> + </table> + <para> In order to redefine the style for all menu groups on a page using CSS, it&apos;s + enough to create classes with the same names and define the necessary properties in + them. </para> + <para> To change style aspects of particular panel menu groups define your own style classes + in the corresponding menuGroup attributes. </para> + </section> </section> -</section> Modified: trunk/docs/userguide/en/src/main/docbook/included/menuItem.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/menuItem.xml 2007-08-07 15:45:17 UTC (rev 2105) +++ trunk/docs/userguide/en/src/main/docbook/included/menuItem.xml 2007-08-07 15:46:38 UTC (rev 2106) @@ -1,52 +1,52 @@ <?xml version="1.0" encoding="UTF-8"?> <section> <sectioninfo> - <keywordset> - <keyword>menuItem</keyword> + <keywordset> + <keyword>menuItem</keyword> </keywordset> </sectioninfo> - - <table> - <title>Component identification parameters</title> + + <table> + <title>Component identification parameters</title> <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> </row> </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.MenuItem</entry> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.MenuItem</entry> </row> - <row> + <row> <entry>component-class</entry> <entry>org.richfaces.component.html.HtmlMenuItem</entry> </row> - <row> + <row> <entry>component-family</entry> <entry>org.richfaces.DropDownMenu</entry> </row> - <row> + <row> <entry>renderer-type</entry> <entry>org.richfaces.MenuItemRenderer</entry> </row> - <row> + <row> <entry>tag-class</entry> <entry>org.richfaces.taglib.MenuItemTag</entry> </row> </tbody> </tgroup> </table> - + <section> - <title>Creating the Component with a Page Tag</title> + <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="xml"><![CDATA[... <rich:dropDownMenu> ... @@ -56,72 +56,89 @@ ... ]]></programlisting> </section> - + <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[... org.richfaces.component.html.HtmlMenuItem myItem = new org.richfaces.component.html.HtmlMenuItem (); ...]]></programlisting> </section> - + <section> <title>Details of Usage</title> - <para> - The &quot;value&quot; attribute defines the text representation for an item element. - </para> - <para> - There are two icon-related attributes. The &quot;icon&quot; attribute defines an icon. The &quot;iconDisabled&quot; attribute defines an icon for a disabled item. Also you can use the &quot;icon&quot; and &quot;iconDisabled&quot; facets. If the facets are defined, the corresponding &quot;icon&quot; and &quot;iconDisabled&quot; attributes are ignored and the facets content is shown as an icon. It could be used for an item check box implementation. - </para> - <para> - Here is an example: - </para> + <para> The <emphasis> + <property>&quot;value&quot;</property> + </emphasis> attribute defines the text representation for an item element. </para> + <para> There are two icon-related attributes. The <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> attribute defines an icon. The <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> attribute defines an icon for a disabled item. Also you can use the <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> and <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> facets. If the facets are defined, the corresponding <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> and <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> attributes are ignored and the facets content is shown as an icon. It could + be used for an item check box implementation. </para> + <para> Here is an example: </para> <programlisting role="xml"><![CDATA[... <f:facet name="icon"> <h:selectBooleanCheckbox value="#{bean.property}"/> </f:facet> ... ]]></programlisting> - - <para>The <emphasis role="bold"><property>&lt;rich: menuItem&gt;</property></emphasis> "mode" attribute can be set to three - possible parameters:</para> - <itemizedlist> - <listitem> - <para>Server (default)</para> - </listitem> - </itemizedlist> + <para>The <emphasis role="bold"> + <property>&lt;rich: menuItem&gt;</property> + </emphasis> + <emphasis> + <property>&quot;mode&quot;</property> + </emphasis> attribute can be set to three possible parameters:</para> - <para>The standard form submission is performed and the page is completely - refreshed.</para> + <itemizedlist> + <listitem> + <para>Server (default)</para> + </listitem> + </itemizedlist> - <itemizedlist> - <listitem> - <para>Ajax</para> - </listitem> - </itemizedlist> + <para>The standard form submission is performed and the page is completely refreshed.</para> - <para>An AJAX form submission is performed, and specified elements in the - "reRender" attribute are rerendered.</para> + <itemizedlist> + <listitem> + <para>Ajax</para> + </listitem> + </itemizedlist> - <itemizedlist> - <listitem> - <para>None</para> - </listitem> - </itemizedlist> + <para>An AJAX form submission is performed, and specified elements in the <emphasis> + <property>"reRender"</property> + </emphasis> attribute are rerendered.</para> - <para>The "action" and "actionListener" item's attributes are ignored. - Menu items don't fire any submits themselves. The behavior is fully - defined by the components nested inside items.</para> - <para> - For example, you can put any content into an item, but, in this case, you should set the &quot;mode&quot; attribute as &quot;none&quot;. - </para> - <para> - Here is an example: - </para> + <itemizedlist> + <listitem> + <para>None</para> + </listitem> + </itemizedlist> + + <para>The <emphasis> + <property>"action"</property> + </emphasis> and <emphasis> + <property>"actionListener"</property> + </emphasis> item's attributes are ignored. Menu items don't fire any submits themselves. + The behavior is fully defined by the components nested inside items.</para> + <para> For example, you can put any content into an item, but, in this case, you should set + the <emphasis> + <property>&quot;mode&quot;</property> + </emphasis> attribute as <emphasis> + <property>&quot;none&quot;</property> + </emphasis>. </para> + <para> Here is an example: </para> <programlisting role="xml"><![CDATA[... <rich:dropDownMenu> ... @@ -132,142 +149,139 @@ <rich:dropDownMenu> ... ]]></programlisting> - <para> - You can use the &quot;disabled&quot; attribute to set the item state. - </para> - <para> - Here is an example: - </para> + <para> You can use the <emphasis> + <property>&quot;disabled&quot;</property> + </emphasis> attribute to set the item state. </para> + <para> Here is an example: </para> <programlisting role="xml"><![CDATA[... <rich:dropDownMenu> <rich:menuItem value="Disable" disabled="true"/> <rich:dropDownMenu> ... ]]></programlisting> - </section> + </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 menuItems at once: - </para> - <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para>Add to user&apos;s style sheets style classes used by a menuItem</para></listitem> - </itemizedlist> - </section> - <section> - <title>Skin parameters redefinition</title> - <table> - <title>Label skin parameters redefinition</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters for item</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>Label skin parameters redefinition</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters for hovered item</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tipBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tipBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Label skin parameters redefinition</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters for disabled item</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Label skin parameters redefinition</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters for text element label</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> + <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 menuItems at once: </para> + <itemizedlist> + <listitem> + <para>Redefine the corresponding skin parameters</para> + </listitem> + <listitem> + <para>Add to user&apos;s style sheets style classes used by a menuItem</para> + </listitem> + </itemizedlist> </section> - <section> + <title>Skin parameters redefinition</title> + <table> + <title>Label skin parameters redefinition</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters for item</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>Label skin parameters redefinition</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters for hovered item</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tipBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tipBackgroundColor</entry> + <entry>background-color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Label skin parameters redefinition</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters for disabled item</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>tabDisabledTextColor</entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Label skin parameters redefinition</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Skin parameters for text element label</entry> + <entry>CSS properties</entry> + </row> + </thead> + <tbody> + <row> + <entry>generalTextColor</entry> + <entry>color</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + + <section> <title> Definition of Custom Style Classes </title> - <para> - In the screenshot, the classes names that define item element appearance are shown. - </para> + <para> In the screenshot, the classes names that define item element appearance are shown. </para> <figure> - <title>Class names</title> + <title>Class names</title> <mediaobject> <imageobject> - <imagedata fileref="images/menuItem2.png" /> + <imagedata fileref="images/menuItem2.png"/> </imageobject> </mediaobject> </figure> <table> - <title>Class names that define item element appearance.</title> + <title>Class names that define item element appearance.</title> <tgroup cols="2"> <thead> <row> - <entry>Class name</entry> - <entry>Description</entry> + <entry>Class name</entry> + <entry>Description</entry> </row> </thead> <tbody> <row> - <entry>Rich-menu-item</entry> - <entry>Defines the class for wrapping div element for the whole item</entry> + <entry>Rich-menu-item</entry> + <entry>Defines the class for wrapping div element for the whole item</entry> </row> <row> <entry>Rich-menu-item-label</entry> @@ -280,22 +294,21 @@ </tbody> </tgroup> </table> - <para> - All listed elements except the general ones are defined for disabled, enabled, and hovered modes. - </para> + <para> All listed elements except the general ones are defined for disabled, enabled, and + hovered modes. </para> <table> - <title>Class names for modes</title> + <title>Class names for modes</title> <tgroup cols="2"> <thead> <row> - <entry>Class name</entry> - <entry>Description</entry> + <entry>Class name</entry> + <entry>Description</entry> </row> </thead> <tbody> <row> - <entry>Rich-menu-item-disabled</entry> - <entry>Defines the class for wrapping div element for the whole item</entry> + <entry>Rich-menu-item-disabled</entry> + <entry>Defines the class for wrapping div element for the whole item</entry> </row> <row> <entry>Rich-menu-item-enabled</entry> @@ -305,7 +318,7 @@ <entry>Rich-menu-item-hover</entry> <entry>Defines the class for wrapping div element for the whole item</entry> </row> - + <row> <entry>Rich-menu-item-label-disabled</entry> <entry>Defines properties for the text</entry> @@ -333,12 +346,10 @@ </tbody> </tgroup> </table> - <para> - In order to redefine the style for all menuItems on a page using CSS, it&apos;s enough to create classes with the same names and define the necessary properties in them. - </para> - <para> - To change the style of particular menuItems define your own style classes in the corresponding menuItem attributes. - </para> + <para> In order to redefine the style for all menuItems on a page using CSS, it&apos;s + enough to create classes with the same names and define the necessary properties in + them. </para> + <para> To change the style of particular menuItems define your own style classes in the + corresponding menuItem attributes. </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-08-07 15:45:17 UTC (rev 2105) +++ trunk/docs/userguide/en/src/main/docbook/included/panelMenu.xml 2007-08-07 15:46:38 UTC (rev 2106) @@ -83,9 +83,12 @@ <title>Details of Usage</title> <para>All attributes are not required.</para> - <para>Use &quot;event&quot; attribute to define an event for appearance of - collapsing/expanding sublevels. Default value is &quot;onclick&quot;. An example could - be seen below.</para> + <para>Use <emphasis> + <property>&quot;event&quot;</property> + </emphasis> attribute to define an event for appearance of collapsing/expanding sublevels. + Default value is <emphasis> + <property>&quot;onclick&quot;</property> + </emphasis>. An example could be seen below.</para> <para> <emphasis role="bold">Example:</emphasis> @@ -96,13 +99,19 @@ &lt;/rich:panelMenu&gt; ...</programlisting> - <para>Switching mode could be chosen with the &quot;mode&quot; attribute for all - panelMenu items except ones where this attribute was redefined. By default all items send - traditional request. </para> - <para>The &quot;expandMode&quot; attribute defines the submission modes for all - collapsing/expanding panelMenu groups except ones where this attribute was redefined. </para> - <para>The &quot;mode&quot; and &quot;expandMode&quot; attributes could be used - with three possible parameters.</para> + <para>Switching mode could be chosen with the <emphasis> + <property>&quot;mode&quot;</property> + </emphasis> attribute for all panelMenu items except ones where this attribute was redefined. + By default all items send traditional request. </para> + <para>The <emphasis> + <property>&quot;expandMode&quot;</property> + </emphasis> attribute defines the submission modes for all collapsing/expanding panelMenu + groups except ones where this attribute was redefined. </para> + <para>The <emphasis> + <property>&quot;mode&quot;</property> + </emphasis> and <emphasis> + <property>&quot;expandMode&quot;</property> + </emphasis> attributes could be used with three possible parameters.</para> <itemizedlist> <listitem> @@ -118,8 +127,9 @@ </listitem> </itemizedlist> - <para>An Ajax form submission is performed additionally specified elements in the - &quot;reRender&quot; attribute are reRendered.</para> + <para>An Ajax form submission is performed additionally specified elements in the <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute are reRendered.</para> <itemizedlist> <listitem> @@ -127,9 +137,12 @@ </listitem> </itemizedlist> - <para>&quot;Action&quot; and &quot;ActionListener&quot; attributes are ignored. - Items don&apos;t fire any submits itself. Behavior is fully defined by the components - nested to items. Groups expand on the client side.</para> + <para><emphasis> + <property>&quot;Action&quot;</property> + </emphasis> and <emphasis> + <property>&quot;ActionListener&quot;</property> + </emphasis> attributes are ignored. Items don&apos;t fire any submits itself. Behavior is + fully defined by the components nested to items. Groups expand on the client side.</para> <para> <emphasis role="bold">Example:</emphasis> @@ -147,10 +160,13 @@ </emphasis> component doesn&apos;t provide its own form, use it between &lt;h:form&gt; and &lt;/h:form&gt; tags.</note> - <para>The &quot;expandSingle&quot; attribute is defined for expanding more than one - submenu on the same level. The default value is &quot;false&quot;. If it&apos;s - true the previously opened group on the top level closes before opening another one. See the - picture below.</para> + <para>The <emphasis> + <property>&quot;expandSingle&quot;</property> + </emphasis> attribute is defined for expanding more than one submenu on the same level. The + default value is <emphasis> + <property>&quot;false&quot;</property> + </emphasis>. If it&apos;s true the previously opened group on the top level closes before + opening another one. See the picture below.</para> <figure> <title>Using the &quot;expandSingle&quot; attribute</title> @@ -162,8 +178,10 @@ </mediaobject> </figure> - <para>The &quot;selectedChild&quot; attribute is used for defining the name of the - selected group or item. An example for group is placed below:</para> + <para>The <emphasis> + <property>&quot;selectedChild&quot;</property> + </emphasis> attribute is used for defining the name of the selected group or item. An example + for group is placed below:</para> <para>Here is an example:</para> @@ -181,8 +199,8 @@ <section> <title>JavaScript API</title> - <para>In Java Script code for expanding/collapsing group element creation it&apos;s necessary to use - doExpand()/doCollapse() function.</para> + <para>In Java Script code for expanding/collapsing group element creation it&apos;s + necessary to use doExpand()/doCollapse() function.</para> <table> <title>JavaScript API</title> @@ -218,10 +236,11 @@ <section> <title>Look-and-Feel Customization</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 particular panel menus, it&apos;s possible - to define your own CSS class. And then just define it in the components class attribute. </para> - + <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 + particular panel menus, it&apos;s possible to define your own CSS class. And then just + define it in the components class attribute. </para> + </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2007-08-07 15:45:17 UTC (rev 2105) +++ trunk/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2007-08-07 15:46:38 UTC (rev 2106) @@ -84,11 +84,17 @@ <section> <title>Details of Usage</title> - <para>All attributes except &quot;label&quot; are optional. The - &quot;label&quot; attribute defines text to be represented.</para> - <para>Switching mode could be chosen with the &quot;expandMode&quot; attribute for the - concrete panelMenu group.</para> - <para>The &quot;expandMode&quot; attribute could be used with three possible parameters:</para> + <para>All attributes except <emphasis> + <property>&quot;label&quot;</property> + </emphasis> are optional. The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute defines text to be represented.</para> + <para>Switching mode could be chosen with the<emphasis> + <property> &quot;expandMode&quot;</property> + </emphasis> attribute for the concrete panelMenu group.</para> + <para>The <emphasis> + <property>&quot;expandMode&quot;</property> + </emphasis> attribute could be used with three possible parameters:</para> <itemizedlist> <listitem> @@ -104,8 +110,9 @@ </listitem> </itemizedlist> - <para>Ajax form submission is performed additionally specified elements in the - &quot;reRender&quot; attribute are reRendered.</para> + <para>Ajax form submission is performed additionally specified elements in the <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute are reRendered.</para> <itemizedlist> <listitem> @@ -113,14 +120,20 @@ </listitem> </itemizedlist> - <para>&quot;Action&quot; and &quot;ActionListener&quot; attributes are ignored. - Items don&apos;t fire any submits itself. Behavior is fully defined by the components - nested to items.</para> + <para><emphasis> + <property>&quot;Action&quot;</property> + </emphasis> and <emphasis> + <property>&quot;ActionListener&quot;</property> + </emphasis> attributes are ignored. Items don&apos;t fire any submits itself. Behavior is + fully defined by the components nested to items.</para> - <para>There are three icon-related attributes. The &quot;iconExpanded&quot; attribute - defines an icon for an expanded state. The &quot;iconCollapsed&quot; attribute defines - an icon for a collapsed state. The &quot;iconDisabled&quot; attribute defines an icon - for a disabled state.</para> + <para>There are three icon-related attributes. The <emphasis> + <property>&quot;iconExpanded&quot;</property> + </emphasis> attribute defines an icon for an expanded state. The <emphasis> + <property>&quot;iconCollapsed&quot;</property> + </emphasis> attribute defines an icon for a collapsed state. The <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> attribute defines an icon for a disabled state.</para> <para>Default icons are shown on the picture below:</para> Modified: trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2007-08-07 15:45:17 UTC (rev 2105) +++ trunk/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2007-08-07 15:46:38 UTC (rev 2106) @@ -84,9 +84,14 @@ <section> <title>Details of Usage</title> - <para>All attributes except &quot;label&quot; are optional. The - &quot;label&quot; attribute defines text to be represented.</para> - <para>The &quot;mode&quot; attribute could be used with three possible parameters:</para> + <para>All attributes except <emphasis> + <property>&quot;label&quot;</property> + </emphasis> are optional. The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute defines text to be represented.</para> + <para>The <emphasis> + <property>&quot;mode&quot;</property> + </emphasis> attribute could be used with three possible parameters:</para> <itemizedlist> <listitem> @@ -102,8 +107,9 @@ </listitem> </itemizedlist> - <para>Ajax form submission is performed additionally specified elements in the - &quot;reRender&quot; attribute are reRendered.</para> + <para>Ajax form submission is performed additionally specified elements in the <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute are reRendered.</para> <itemizedlist> <listitem> @@ -111,11 +117,16 @@ </listitem> </itemizedlist> - <para>&quot;Action&quot; and &quot;ActionListener&quot; attributes are ignored. - Items don&apos;t fire any submits itself. Behavior is fully defined by the components - nested to items.</para> + <para><emphasis> + <property>&quot;Action&quot;</property> + </emphasis> and <emphasis> + <property>&quot;ActionListener&quot;</property> + </emphasis> attributes are ignored. Items don&apos;t fire any submits itself. Behavior is + fully defined by the components nested to items.</para> - <para>Here is an example for value &quot;none&quot;:</para> + <para>Here is an example for value <emphasis> + <property>&quot;none&quot;</property> + </emphasis>:</para> <para> <emphasis role="bold">Example:</emphasis> @@ -132,8 +143,11 @@ &lt;/rich:panelMenu&gt; ...</programlisting> - <para>There are two icon-related attributes. The &quot;icon&quot; attribute defines an - icon. The &quot;iconDisabled&quot; attribute defines an icon for a disabled item.</para> + <para>There are two icon-related attributes. The <emphasis> + <property>&quot;icon&quot;</property> + </emphasis> attribute defines an icon. The <emphasis> + <property>&quot;iconDisabled&quot;</property> + </emphasis> attribute defines an icon for a disabled item.</para> <para>Default icons are shown on the picture below:</para> @@ -174,16 +188,16 @@ <para>It&apos;s also possible to define a path to the icon. Simple code is placed below.</para> <programlisting role="xml">... - &quot;rich:panelMenu&quot; + &lt;rich:panelMenu&gt; … - &quot;rich:panelMenuItem ="Item 1.1" icon="\images\img1.gif" /&quot; + &lt;rich:panelMenuItem ="Item 1.1" icon="\images\img1.gif" /&gt; … - &quot;/rich:panelMenu&quot; + &lt;/rich:panelMenu&gt; ...</programlisting> </section> - <section> + <!--section> <title>JavaScript API</title> <para>In Java Script code for expanding/collapsing group element creation it&apos;s necessary to use doExpand()/doCollapse() function.</para> @@ -216,7 +230,7 @@ </tgroup> </table> - </section> + </section--> <section> @@ -371,9 +385,8 @@ <listitem>rich-pmenu-top-item-label</listitem> </itemizedlist> - <para>In order to redefine the style for all panel menu items on a page using CSS, - it&apos;s enough to create classes with the same names and define the necessary properties - in them.</para> + <para>In order to redefine the style for all panel menu items on a page using CSS, it&apos;s + enough to create classes with the same names and define the necessary properties in them.</para> <para>To change the style of particular panel menu items components define your own style classes in the corresponding panelMenuItem attributes.</para>