Author: afedosik Date: 2007-05-03 09:12:30 -0400 (Thu, 03 May 2007) New Revision: 629 Removed: trunk/docs/userguide/en/modules/togglePanel_table.xml trunk/docs/userguide/en/modules/toolBarGroup_table.xml trunk/docs/userguide/en/modules/toolBar_table.xml trunk/docs/userguide/en/modules/treeNode_table.xml trunk/docs/userguide/en/modules/tree_table.xml Log: Deleted: trunk/docs/userguide/en/modules/togglePanel_table.xml =================================================================== --- trunk/docs/userguide/en/modules/togglePanel_table.xml 2007-05-03 11:01:08 UTC (rev 628) +++ trunk/docs/userguide/en/modules/togglePanel_table.xml 2007-05-03 13:12:30 UTC (rev 629) @@ -1,328 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="togglePanel"><?dbhtml filename="togglePanel.html" ?> - <title>&lt;rich:togglePanel&gt;</title> - <sectioninfo> - - <keywordset> - - <keyword>togglePanel</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <para>A wrapper component with named facets, where every facet is shown after activation of - the corresponding <property>toggleControl</property> - (the other is hidden).</para> - - <figure> - - <title>TogglePanel component</title> - - <mediaobject> - - <imageobject> - - <imagedata fileref="images/togglePanel.gif"/> - - </imageobject> - - </mediaobject> - - </figure> - - </section> - <section> - - <title>Key Features</title> - - <itemizedlist> - - <listitem>Support for any content inside</listitem> - - <listitem>Three modes of facets switching - <itemizedlist> - - <listitem>Server</listitem> - - <listitem>Client</listitem> - - <listitem>Ajax</listitem> - - </itemizedlist> - - </listitem> - - <listitem>Controls for <property>togglePanel</property> can be everywhere in layout</listitem> - - </itemizedlist> - - </section> - <table> - <title>rich:togglePanel attributes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Attribute Name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>binding</entry> - <entry>The attribute takes a value-binding expression for a component property of -a backing bean</entry> - </row> - <row> - <entry>converter</entry> - <entry>converter</entry> - </row> - <row> - <entry>id</entry> - <entry>Every component may have a unique id that is automatically created if - omitted</entry> - </row> - <row> - <entry>immediate</entry> - <entry>immediate</entry> - </row> - <row> - <entry>initialState</entry> - <entry>It contains a name of the first active facet</entry> - </row> - <row> - <entry>rendered</entry> - <entry>If "false", this component is rendered.</entry> - </row> - <row> - <entry>required</entry> - <entry>required</entry> - </row> - <row> - <entry>stateOrder</entry> - <entry>Names of the facets in the switching order. If - ToggleControl doesn't contain information about a next facet to - be shown it is switched corresponding to this - attribute</entry> - </row> - <row> - <entry>switchType</entry> - <entry>Facets switch algorithm: "client", "server"(default), "ajax".</entry> - </row> - <row> - <entry>valid</entry> - <entry>valid</entry> - </row> - <row> - <entry>validator</entry> - <entry>validator</entry> - </row> - <row> - <entry>value</entry> - <entry>The initial value to set when rendered for the first time. - It contains information about an active facet</entry> - </row> - <row> - <entry>valueChangeListener</entry> - <entry>valueChangeListener</entry> - </row> - </tbody> - </tgroup> - </table> - <sectioninfo> - - <keywordset> - - <keyword>facet</keyword> - - <keyword>rich:togglePanel</keyword> - - <keyword>HtmlTogglePanel</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <table> - - <title>Component identification parameters</title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Name</entry> - - <entry>Value</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>component-type</entry> - - <entry>org.richfaces.TogglePanel</entry> - - </row> - - <row> - - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlTogglePanel</entry> - - </row> - - <row> - - <entry>component-family</entry> - - <entry>org.richfaces.TogglePanel</entry> - - </row> - - <row> - - <entry>renderer-type</entry> - - <entry>org.richfaces.TogglePanelRenderer</entry> - - </row> - - <row> - - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.TogglePanelTag</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - </section> - <section> - - <title>Creating the Component with a Page Tag</title> - - <para>To create it on a page, use the following syntax: </para> - - <programlisting role="XML">... - &lt;rich:togglePanel&gt; - &lt;f:facet name="first"&gt; - ... - &lt;/f:facet&gt; - &lt;f:facet name="second"&gt; - ... - &lt;/f:facet&gt; - ... - &lt;/rich:togglePanel&gt; - ... - &lt;!--//Set of the toggleControls somewhere on the page.--&gt; -... -</programlisting> - - </section> - <section> - - <title>Creating the Component Dynamically Using Java</title> - - <programlisting role="JAVA">... -org.richfaces.component.html.HtmlTogglePanel myPanel = new org.richfaces.component.html.HtmlTogglePanel(); -... -</programlisting> - - </section> - <section> - - <title>Details of Usage</title> - - <para>As it was mentioned above, <property>togglePanel</property> splits content into named - facets that rendered and processed when a click performed on controls linked to this <property>togglePanel</property> - (either switched on the client or send requests on the server for switching).</para> - - <para>The initial component state is defined with <emphasis role="italic"> - <property>"initialState"</property> - </emphasis> attribute, where a facet name that is shown at first is defined.</para> - - <note> - <title>Note:</title> -It's also possible to define an <property>"empty"</property> facet to implement the functionality as -drop-down panels have and make the facet active when no content is required to be rendered.</note> - - <para>Switching mode could be defined with the <emphasis role="italic"> - <property>"switchType"</property> - </emphasis> attribute with three possible - parameters:</para> - - <itemizedlist> - - <listitem> - Server (DEFAULT)<para>The common submission is performed around <property>togglePanel</property> and a page is completely rendered on a called panel. Only one at a time panel is uploaded onto the client side.</para> - - </listitem> - - <listitem> - Ajax<para>AJAX form submission is performed around the panel, content of the called panel is - uploaded on an AJAX request and additionally specified elements in the <emphasis role="italic"> - <property>"reRender"</property> - </emphasis> attribute are rendered. Only one at a time panel is uploaded on the client side.</para> - - </listitem> - - <listitem> - Client<para> - All panels are uploaded on the client side. The switching from the active to the hidden panel - is performed with client JavaScript.</para> - - </listitem> - - </itemizedlist> - - <para>"Facets" switching order could be defined on - the side of <emphasis role="bold"> - <property>&lt;rich:toggleControl&gt;</property> - </emphasis> component or on the panel. On the side of the togglePanel it's possible to define facets switching order with the <emphasis role="italic"> - <property>"stateOrder"</property> - </emphasis> attribute. The facets names are enumerated in - such an order that they are rendered when a control is clicked, as it's not defined where - to switch beforehand.</para> - - <programlisting role="XML">&lt;rich:togglePanel id="panel" - initialState="panelB" switchType="client" - stateOrder="panelA,panelB,panelC"&gt; - &lt;f:facet name="panelA"&gt; - ... - &lt;/f:facet&gt; - &lt;f:facet name="panelB"&gt; - ... - &lt;/f:facet&gt; - &lt;f:facet name="panelC"&gt; - ... - &lt;/f:facet&gt; -&lt;/rich:togglePanel&gt; -&lt;rich:toggleControl for="panel" value="Switch"/&gt; -</programlisting> - - <para>The example shows a <property>togglePanel</property> initial state when the second facet (panelB) is rendered and successive switching from the first to the second happens.</para> - - </section> - <section> - - <title>Look and Feel Customization</title> - - <para>The component doesn't have its own representation rendering only content of its facets, thus all look and feel is set only for content.</para> - - </section> -</section> \ No newline at end of file Deleted: trunk/docs/userguide/en/modules/toolBarGroup_table.xml =================================================================== --- trunk/docs/userguide/en/modules/toolBarGroup_table.xml 2007-05-03 11:01:08 UTC (rev 628) +++ trunk/docs/userguide/en/modules/toolBarGroup_table.xml 2007-05-03 13:12:30 UTC (rev 629) @@ -1,379 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="toolBarGroup"><?dbhtml filename="toolBarGroup.html" ?> - <title>&lt;rich:toolBarGroup&gt;</title> - <sectioninfo> - - <keywordset> - - <keyword>toolBarGroup</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <para>A group of items inside a tool bar.</para> - - <figure> - - <title>ToolbarGroup with items on it</title> - - <mediaobject> - - <imageobject> - - <imagedata fileref="images/toolbarGroup.gif"/> - - </imageobject> - - </mediaobject> - - </figure> - - </section> - <section> - - <title>Key Features</title> - - <itemizedlist> - - <listitem>Fully skinnable with its child items</listitem> - - <listitem>Grouping bar content</listitem> - - <listitem>Easily place content on either side of tool bar using a predefined group layout</listitem> - - <listitem>Predefined separators for menu items and groups</listitem> - - <listitem>Any content inside</listitem> - - </itemizedlist> - - </section> - <table> - <title>rich:toolBarGroup attributes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Attribute Name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>binding</entry> - <entry>The attribute takes a value-binding expression for a component property of -a backing bean</entry> - </row> - <row> - <entry>id</entry> - <entry>Every component may have a unique id that is automatically created if - omitted</entry> - </row> - <row> - <entry>itemSeparator</entry> - <entry>"A separator for the items in a group. Possible - values are "none", "line", "square", "disc" and "grid"."</entry> - </row> - <row> - <entry>location</entry> - <entry>"A location of a group on a menu bar. Possible values are "left" and "right"."</entry> - </row> - <row> - <entry>rendered</entry> - <entry>If "false", this component is rendered.</entry> - </row> - <row> - <entry>separatorClass</entry> - <entry>"A CSS class to be applied to menu bar group separators."</entry> - </row> - <row> - <entry>style</entry> - <entry>CSS style(s) is/are to be applied when this component is rendered</entry> - </row> - <row> - <entry>styleClass</entry> - <entry>Corresponds to the HTML class attribute</entry> - </row> - </tbody> - </tgroup> - </table> - <sectioninfo> - - <keywordset> - - <keyword>items</keyword> - - <keyword>rich:toolBarGroup</keyword> - - <keyword>HtmlToolBarGroup</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <table> - - <title>Component identification parameters </title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Name</entry> - - <entry>Value</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>component-type</entry> - - <entry>org.richfaces.ToolBarGroup</entry> - - </row> - - <row> - - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlToolBarGroup</entry> - - </row> - - <row> - - <entry>component-family</entry> - - <entry>org.richfaces.ToolBarGroup</entry> - - </row> - - <row> - - <entry>renderer-type</entry> - - <entry>org.richfaces.ToolBarGroupRenderer</entry> - - </row> - - <row> - - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.ToolBarGroupTag</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - </section> - <section> - - <title>Creating the Component with a Page Tag</title> - - <para>To create it on a page, use the following syntax: </para> - - <programlisting role="XML">&lt;rich:toolBar&gt; - ... - &lt;rich:toolBarGroup&gt; - &lt;!--...Set of action or other JSF components--&gt; - &lt;/rich:toolBarGroup&gt; - ... - &lt;rich:toolBarGroup&gt; - &lt;!--...Set of action or other JSF components--&gt; - &lt;/rich:toolBarGroup&gt; - ... -&lt;/rich:toolBar&gt; -</programlisting> - - </section> - <section> - - <title>Creating the Component Dynamically Using Java</title> - - <programlisting role="JAVA">... -org.richfaces.component.html.HtmlToolBarGroup myToolBarGroup = new org.richfaces.component.html.HtmlToolBarGroup(); -... -</programlisting> - - </section> - <section> - - <title>Details of Usage</title> - - <para>A <property>toolBarGroup</property> is a wrapper component that groups <property>toolBar</property> content and facilitates creation of menu and tool bars. All components defined inside are located on a stylized bar with a possibility to group, arrange on the both bar sides, and place predefined separators between them.</para> - - <para>Separators are located between components with the help of the <emphasis role="italic"> - <property>"itemSeparator"</property> - </emphasis> attribute with four - predefined values:</para> - - <itemizedlist> - - <listitem> - none - </listitem> - - <listitem> - line - </listitem> - - <listitem> - square - </listitem> - - <listitem> - disc - </listitem> - - </itemizedlist> - - <para>To control the group location inside, use the <emphasis role="italic"> - <property>"location"</property> - </emphasis> attribute with left (DEFAULT) and right values.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML">&lt;rich:toolBar itemSeparator="disc" width="500"&gt; - &lt;rich:toolBarGroup itemSeparator="line"&gt; - &lt;h:commandLink value="Command 1.1"/&gt; - &lt;h:commandLink value="Command 2.1"/&gt; - &lt;/rich:toolBarGroup&gt; - &lt;rich:toolBarGroup itemSeparator="line" location="right"&gt; - &lt;h:commandLink value="Command 1.2"/&gt; - &lt;h:commandLink value="Command 2.2"/&gt; - &lt;/rich:toolBarGroup&gt; - &lt;/rich:toolBar&gt; -</programlisting> - - <para>The code result is the following:</para> - - <figure> - - <title>Stylized toolBarGroup</title> - - <mediaobject> - - <imageobject> - - <imagedata fileref="images/toolBar3.gif"/> - - </imageobject> - - </mediaobject> - - </figure> - - </section> - <section> - - <title>Look and Feel Customization</title> - - <para>For skinnability implementation the components use a <emphasis role="italic"> - <property>style class redefinition method</property> - </emphasis>.</para> - - <para>Default style classes are mapped on <emphasis role="italic"> - <property>skin parameters</property>.</emphasis> - </para> - - <para>To redefine appearance of all toolBarGroups at once, there are two ways:</para> - - <itemizedlist> - - <listitem>to redefine corresponding skin parameters</listitem> - - <listitem>to add <emphasis role="italic"> - <property>style classes</property> - </emphasis> used by the toolBarGroup to your page stylesheets</listitem> - - </itemizedlist> - - <table> - - <title>Skin parameters redefinition</title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Skin parameters for the toolBarGroup component</entry> - - <entry>Corresponding CSS parameters</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>headerSizeFont</entry> - - <entry>font-size</entry> - - </row> - - <row> - - <entry>headTextColor</entry> - - <entry>color</entry> - - </row> - - <row> - - <entry>headerFamilyFont</entry> - - <entry>font-family</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - </section> - <section> - - <title>Definition custom style classes</title> - - <para>On generating, the component substitutes the default class rich-toolbar-item into - <emphasis role="italic"> - <property>style class</property> - </emphasis> of a generated component, i.e. -to redefine at once all <property>toolBarGroups</property> appearance on a page, redefine this class in your CSS.</para> - - <para>The component also has the standard attribute style and <emphasis role="italic"> - <property>style class</property> - </emphasis> that could redefine an - appearance of particular component variants. - </para> - - <para>It's necessary to define a class according to the corresponding name, so as an - -appearance of all <property>toolBarGroups</property> on a page is changed at once.</para> - - </section> -</section> \ No newline at end of file Deleted: trunk/docs/userguide/en/modules/toolBar_table.xml =================================================================== --- trunk/docs/userguide/en/modules/toolBar_table.xml 2007-05-03 11:01:08 UTC (rev 628) +++ trunk/docs/userguide/en/modules/toolBar_table.xml 2007-05-03 13:12:30 UTC (rev 629) @@ -1,374 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="toolBar"><?dbhtml filename="toolBar.html" ?> - <title>&lt;rich:toolBar&gt;</title> - <sectioninfo> - - <keywordset> - - <keyword>toolBar</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <para>A horizontal bar with Action items on it that accepts any JSF components as children.</para> - - <figure> - - <title>Toolbar with action items</title> - - - <mediaobject> - - <imageobject> - - <imagedata fileref="images/toolBarMain.gif"/> - - </imageobject> - - </mediaobject> - - </figure> - - </section> - <section> - - <title>Key Features</title> - - <itemizedlist> - - <listitem>Skinnable menu panel and child items</listitem> - - <listitem>Standard top menu bar that can be used in accordance with a menu component</listitem> - - <listitem>Grouping bar content</listitem> - - <listitem>Easily place content on any side of a menu bar using predefined group layout</listitem> - - <listitem>Predefined separators for menu items and groups</listitem> - - <listitem>Any content inside</listitem> - - </itemizedlist> - - </section> - <table> - <title>rich:toolBar attributes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Attribute Name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>binding</entry> - <entry>The attribute takes a value-binding expression for a component property of -a backing bean</entry> - </row> - <row> - <entry>contentClass</entry> - <entry>A CSS style is to be applied to each element of tool bar content. - Use this style, for example, to setup parameters of the font.</entry> - </row> - <row> - <entry>contentStyle</entry> - <entry>A CSS style is to be applied to each element of tool bar content.</entry> - </row> - <row> - <entry>height</entry> - <entry>A height of a bar in pixels. If a height is not defined, - a bar height depends of the "headerFontSize" skin parameter.</entry> - </row> - <row> - <entry>id</entry> - <entry>Every component may have a unique id that is automatically created if - omitted</entry> - </row> - <row> - <entry>itemSeparator</entry> - <entry>A separator between items on a bar. Possible values - are none, line, square, disc and grid.</entry> - </row> - <row> - <entry>rendered</entry> - <entry>If "false", this component is rendered.</entry> - </row> - <row> - <entry>separatorClass</entry> - <entry>A CSS class to be applied to menu bar group separators. - Use this property, for example, to setup parameters of a font.</entry> - </row> - <row> - <entry>style</entry> - <entry>CSS style(s) is/are to be applied when this component is rendered</entry> - </row> - <row> - <entry>styleClass</entry> - <entry>Corresponds to the HTML class attribute</entry> - </row> - <row> - <entry>width</entry> - <entry>A width of a bar that can be defined in pixels or as percentage. The default value is 100%.</entry> - </row> - </tbody> - </tgroup> - </table> - <sectioninfo> - - <keywordset> - - <keyword>bar</keyword> - - <keyword>rich:toolBar</keyword> - - <keyword>HtmlToolBar</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <table> - - <title>Component identification parameters </title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Name</entry> - - <entry>Value</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>component-type</entry> - - <entry>org.richfaces.ToolBar</entry> - - </row> - - <row> - - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlToolBar</entry> - - </row> - - <row> - - <entry>component-family</entry> - - <entry>org.richfaces.ToolBar</entry> - - </row> - - <row> - - <entry>renderer-type</entry> - - <entry>org.richfaces.ToolBarRenderer</entry> - - </row> - - <row> - - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.ToolBarTag</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - </section> - <section> - - <title>Creating the Component with a Page Tag</title> - - <para>To create it on a page, use the following syntax: </para> - - <programlisting role="XML">&lt;rich:toolBar&gt; - &lt;!--//...Set of action or other JSF components--&gt; -&lt;/rich:toolBar&gt; -</programlisting> - - </section> - <section> - - <title>Creating the Component Dynamically Using Java</title> - - <programlisting role="JAVA">... -org.richfaces.component.html.HtmlToolBar myToolBar = new org.richfaces.component.html.HtmlToolBar(); -... -</programlisting> - - </section> - <section> - - <title>Details of Usage</title> - - <para>A <property>toolBar</property> is a wrapper component that facilitates creation of menu and - <property>tool bars</property>. All components defined inside are located on a stylized bar with possibility to group, - arrange on the both bar sides, and place predefined separators between them.</para> - - <para>Grouping and an input side definition is described for <property>toolBarGroup</property> that defines this - functionality.</para> - - <para>Separators are located between components with the help of the <emphasis role="italic"> - <property>"itemSeparator"</property> - </emphasis> attribute - with four predefined values:</para> - - <itemizedlist> - - <listitem> - none - </listitem> - - <listitem> - line - </listitem> - - <listitem> - square - </listitem> - - <listitem> - disc - </listitem> - - </itemizedlist> - - <para>For example, when settting a separator of a disc type, the following result is produced:</para> - - <figure> - - <title>Toolbar with a "disc" separator</title> - - - <mediaobject> - - <imageobject> - - <imagedata fileref="images/toolBar2.gif"/> - - </imageobject> - - </mediaobject> - - </figure> - - <para>Moreover, for <property>toolBar</property> style - <emphasis role="italic"> - <property>"width"</property> - </emphasis> and <emphasis role="italic"> - <property>"height"</property> - </emphasis> attributes - are placed above all.</para> - - </section> - <section> - - <title>Look and Feel Customization</title> - - <para>For skinnability implementation the components use a <emphasis role="italic"> - <property>style class redefinition method</property> - </emphasis>.</para> - - <para>Default style classes are mapped on <emphasis role="italic"> - <property>skin parameters</property>.</emphasis> - </para> - - <para>To redefine appearance of all toolBars at once, there are two ways:</para> - - <itemizedlist> - - <listitem>to redefine corresponding skin parameters</listitem> - - <listitem>to add <emphasis role="italic"> - <property>style classes</property> - </emphasis> used by the toolBar to your page stylesheets</listitem> - - </itemizedlist> - - <table> - - <title>Skin parameters redefinition</title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Skin parameters for the toolbar component</entry> - - <entry>Corresponding CSS parameters</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>tableBorderColor</entry> - - <entry>border-color</entry> - - </row> - - <row> - - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - </section> - <section> - - <title>Definition custom style classes</title> - - <para>On generating, the component substitutes the default class rich-toolbar-exterior - into <emphasis role="italic"> - <property>style class</property> - </emphasis> - of a generated component, i.e. to redefine at once all <property>toolBars</property> appearance - on a page, redefine this class in your CSS.</para> - - <para>The component also has the standard attributes <emphasis role="italic"> - <property>"style"</property> - </emphasis> and - <emphasis role="italic"> - <property>"styleClass"</property> - </emphasis> that could redefine an - appearance of a particular component variants.</para> - - </section> -</section> \ No newline at end of file Deleted: trunk/docs/userguide/en/modules/treeNode_table.xml =================================================================== --- trunk/docs/userguide/en/modules/treeNode_table.xml 2007-05-03 11:01:08 UTC (rev 628) +++ trunk/docs/userguide/en/modules/treeNode_table.xml 2007-05-03 13:12:30 UTC (rev 629) @@ -1,559 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="treeNode"><?dbhtml filename="treeNode.html" ?> - <title>&lt;rich:treeNode&gt;</title> - <sectioninfo> - - <keywordset> - - <keyword>treeNode</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <para>A component is used for designing templates for nodes definition.</para> - - <figure> - - <title>TreeNode component</title> - - <mediaobject> - - <imageobject> - - <imagedata fileref="images/tree1.gif"/> - - </imageobject> - - </mediaobject> - - </figure> - - </section> - <section> - - <title>Key Features</title> - - </section> - <table> - <title>rich:treeNode attributes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Attribute Name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>acceptedTypes</entry> - <entry>List of drag types to be processd by the current drop zone.</entry> - </row> - <row> - <entry>ajaxSubmitSelection</entry> - <entry>An algorithm of AJAX request submission. "inherit", "true", "false" values are possible</entry> - </row> - <row> - <entry>binding</entry> - <entry>binding</entry> - </row> - <row> - <entry>changeExpandListener</entry> - <entry>changeExpandListener</entry> - </row> - <row> - <entry>dragIndicator</entry> - <entry>Id of the dragIndicator component used as drag operation cursor.</entry> - </row> - <row> - <entry>dragListener</entry> - <entry>dragListener</entry> - </row> - <row> - <entry>dragType</entry> - <entry>Key of a drag object. It's used to define a necessity of processing the current dragged element on the drop zone side</entry> - </row> - <row> - <entry>dragValue</entry> - <entry>Data to be sent to the drop zone after a drop event.</entry> - </row> - <row> - <entry>dropListener</entry> - <entry>dropListener</entry> - </row> - <row> - <entry>dropValue</entry> - <entry>Data to be processed after a drop event.</entry> - </row> - <row> - <entry>highlightedClass</entry> - <entry>Corresponds to the HTML class attribute. Applied to highlighted node</entry> - </row> - <row> - <entry>icon</entry> - <entry>The icon for node</entry> - </row> - <row> - <entry>iconCollapsed</entry> - <entry>The icon for collapsed node</entry> - </row> - <row> - <entry>iconExpanded</entry> - <entry>The icon for expanded node</entry> - </row> - <row> - <entry>iconLeaf</entry> - <entry>iconLeaf</entry> - </row> - <row> - <entry>id</entry> - <entry>id</entry> - </row> - <row> - <entry>nodeClass</entry> - <entry>Name of node CSS class</entry> - </row> - <row> - <entry>nodeSelectListener</entry> - <entry>nodeSelectListener</entry> - </row> - <row> - <entry>oncontextmenu</entry> - <entry>JavaScript handler to be called on right click. - Returning false prevents default browser context menu from being displayed</entry> - </row> - <row> - <entry>ondragend</entry> - <entry>A JavaScript event handler called after a drag operation.</entry> - </row> - <row> - <entry>ondragenter</entry> - <entry>A JavaScript event handler called on enter draggable object to zone.</entry> - </row> - <row> - <entry>ondragexit</entry> - <entry>A JavaScript event handler called after a drag object leaves zone.</entry> - </row> - <row> - <entry>ondragstart</entry> - <entry>A JavaScript event handler called before drag object.</entry> - </row> - <row> - <entry>ondrop</entry> - <entry>It's an event that is called when something is dropped on a drop zone</entry> - </row> - <row> - <entry>ondropend</entry> - <entry>A Javascript handler for event fired on a drop even the drop for a given type is not available</entry> - </row> - <row> - <entry>rendered</entry> - <entry>rendered</entry> - </row> - <row> - <entry>reRender</entry> - <entry>Id[s] (in format of call UIComponent.findComponent()) of components, rendered in case of AjaxRequest caused by this component. Can be single id, comma-separated list of Ids, or EL Expression with array or Collection</entry> - </row> - <row> - <entry>selectedClass</entry> - <entry>Corresponds to the HTML class attribute. Applied to selected node</entry> - </row> - <row> - <entry>type</entry> - <entry>A node type.</entry> - </row> - <row> - <entry>typeMapping</entry> - <entry>Map between a draggable type and an indicator name on zone. it's defined with the pair (drag type:indicator name))</entry> - </row> - </tbody> - </tgroup> - </table> - <sectioninfo> - - <keywordset> - - <keyword>node</keyword> - - <keyword>rich:treeNode</keyword> - - <keyword>HtmlTreeNode</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <table> - - <title>Component identification parameters </title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Name</entry> - - <entry>Value</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>component-type</entry> - - <entry>org.richfaces.TreeNode</entry> - - </row> - - <row> - - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlTreeNode</entry> - - </row> - - <row> - - <entry>component-family</entry> - - <entry>org.richfaces.TreeNode</entry> - - </row> - - <row> - - <entry>renderer-type</entry> - - <entry>org.richfaces.TreeNodeRenderer</entry> - - </row> - - <row> - - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.TreeNodeTag</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - </section> - <section> - - <title>Creating the Component with a Page Tag</title> - - <para>To create it on a page, use the following syntax: </para> - - <programlisting role="XML">... - &lt;rich:tree ... faceNode="simpleNode"&gt; - &lt;rich:treeNode type="simpleNode"&gt; - &lt;!--Tree node data displaying template--&gt; - &lt;/rich:treeNode&gt; - &lt;/rich:tree&gt; -... -</programlisting> - - </section> - <section> - - <title>Dynamical Creation from Java Code</title> - - <programlisting role="JAVA">... -org.richfaces.component.html.HtmlTreeNode myPanel = new org.richfaces.component.html.HtmlTreeNode(); -... -</programlisting> - - </section> - <section> - - <title>Details of Usage</title> - - </section> - <section> - - <title>Look and Feel Customization</title> - - <para>As it has been mentioned above, <property>treeNode</property> defines a template for nodes - rendering in a tree. Thus, during XML document rendering (a web.xml application) as a tree, the - following nodes output (passed via var="data" on a tree) happens:</para> - - <programlisting role="XML"> -&lt;rich:tree ... faceNode="simpleNode" ... value="#{bean.data}" var="data"&gt; - &lt;rich:treeNode type="simpleNode"&gt; - &lt;h:outputText value="context-param:"/&gt; - &lt;h:inputText value="#{data.name}"/&gt; - &lt;/rich:treeNode&gt; -&lt;/rich:tree &gt; -</programlisting> - - <figure> - - <title>Nodes output</title> - - <mediaobject> - - <imageobject> - - <imagedata fileref="images/tree2.gif"/> - - </imageobject> - - </mediaobject> - - </figure> - - <para>Hence, outputText outputs the "context-param" string and then the input is output for - the data.name element of this node.</para> - - <para>Different nodes for rendering could be defined depending on some conditions on the tree level. - Each condition represents some rendering template. To get more information on various <property>treeNodes</property> - definition for nodes, - <ulink url="tree.html">see the tree component chapter</ulink>.</para> - - <para>Switching between expanded/collapsed modes is also managed on the tree level and defined - in <ulink url="tree.html">the corresponding section</ulink>.</para> - - <para>Default nodes of the tree level as well as ones defined with the <property>treeNodes</property> component could - send AJAX requests when selected with the mouse, it's managed with the - <emphasis role="italic"> - <property>"ajaxSubmitSelection"</property> - </emphasis> attribute - (true/false).</para> - - </section> - <section> - - <title>Built-in Drag and Drop</title> - - <para>The main information on Drag and Drop operations is given in - <ulink url="tree.html">the corresponding paragraph</ulink> of - the <property>tree</property> component chapter. It's only necessary to mention that each node could also be a Drag - element as well as a Drop container, i.e. the container and the element have all attributes, - listeners and ways of behavior similar to the ones of the <emphasis role="bold"> - <property>&lt;rich:draggable&gt;</property> - </emphasis> and <emphasis role="bold"> - <property>&lt;rich:dropZone&gt;</property> - </emphasis> components - simultaneously.</para> - </section> - <section> - - <title>Events Handling</title> - - <para>Just as Drag and Drop operations it corresponds to the one described on - <ulink url="tree.html">the tree component level</ulink> for a default Node.</para> - - </section> - <section> - - <title>Look and Feel Customization</title> - - <para>For skinnability implementation the components use a <emphasis role="italic"> - <property>style class redefinition method</property> - </emphasis>.</para> - - <para>Default style classes are mapped on <emphasis role="italic"> - <property>skin parameters</property>.</emphasis> - </para> - - <para>To redefine appearance of all treeNodes at once, there are two ways:</para> - - <itemizedlist> - - <listitem>to redefine corresponding skin parameters</listitem> - - <listitem>to add <emphasis role="italic"> - <property>style classes</property> - </emphasis> used by the treeNode to your page stylesheets</listitem> - - </itemizedlist> - - </section> - <section> - - <title>Skin parameters redefinition:</title> - - <table> - - <title>Default skins for treeNode element</title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Default skins for treeNode element</entry> - - <entry>Properties corresponding to CSS parameter</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>panelTextColor</entry> - - <entry>color</entry> - - </row> - - <row> - - <entry>preferableDataSizeFont </entry> - - <entry>font-size</entry> - - </row> - - <row> - - <entry>preferableDataFamilyFont</entry> - - <entry>font-family</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - <table> - - <title>Skin parameters for selected Node element</title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Skin parameters for selected Node element</entry> - - <entry>Properties corresponding to CSS parameter</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - - </row> - - <row> - - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - - </row> - - <row> - - <entry>headTextColor</entry> - - <entry>color</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - <table> - - <title>Skin parameters for mouseovered Node element</title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Skin parameters for mouseovered Node element</entry> - - <entry>Properties corresponding to CSS parameter</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>selectControlColor</entry> - - <entry>color</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - <para>Hence, to change look and fell of all <property>treeNodes</property> components on an application, change these - parameters values.</para> - - </section> - <section> - - <title>Definition custom style classes:</title> - - <para>The following classes are applied to a node element in three states: default, marked, - mouseovered:</para> - - <itemizedlist> - - <listitem>rich-tree-node</listitem> - - <listitem>rich-tree-node-selected</listitem> - - <listitem>rich-tree-node-highlighted</listitem> - - </itemizedlist> - - <para>Hence, in order to change an appearance of all <property>treeNodes</property> on a page, - declare and customize the above-mentioned classes in your CSS.</para> - - <para>It is also possible to change look and feel of specific <property>treeNodes</property> - with the help of defining for them - <emphasis role="italic"> - <property>"selectedClass"</property> - </emphasis> - and <emphasis role="italic"> - <property>"highlightedClass"</property> - </emphasis> - attributes by their specific classes.</para> - - </section> -</section> \ No newline at end of file Deleted: trunk/docs/userguide/en/modules/tree_table.xml =================================================================== --- trunk/docs/userguide/en/modules/tree_table.xml 2007-05-03 11:01:08 UTC (rev 628) +++ trunk/docs/userguide/en/modules/tree_table.xml 2007-05-03 13:12:30 UTC (rev 629) @@ -1,656 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="tree"><?dbhtml filename="tree.html" ?> - <title>&lt;rich:tree&gt;</title> - <sectioninfo> - - <keywordset> - - <keyword>tree</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <para>A component for a tree-like presentation of data. It includes built-in drag and drop - support for its child elements.</para> - - <figure> - - <title>Expanded tree with child elements</title> - - <mediaobject> - - <imageobject> - - <imagedata fileref="images/tree1.gif"/> - - </imageobject> - - </mediaobject> - - </figure> - - </section> - <section> - - <title>Key Features</title> - - </section> - <table> - <title>rich:tree attributes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Attribute Name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>acceptedTypes</entry> - <entry>List of drag types to be processd by the current drop zone.</entry> - </row> - <row> - <entry>ajaxSubmitSelection</entry> - <entry>If true, an Ajax request to be submit when selecting node</entry> - </row> - <row> - <entry>binding</entry> - <entry>The attribute takes a value-binding expression for a component property of -a backing bean</entry> - </row> - <row> - <entry>changeExpandListener</entry> - <entry>changeExpandListener</entry> - </row> - <row> - <entry>componentState</entry> - <entry>componentState</entry> - </row> - <row> - <entry>dragIndicator</entry> - <entry>dragIndicator</entry> - </row> - <row> - <entry>dragListener</entry> - <entry>dragListener</entry> - </row> - <row> - <entry>dragType</entry> - <entry>Key of a drag object. It's used to define a necessity of processing the current dragged element on the drop zone side</entry> - </row> - <row> - <entry>dragValue</entry> - <entry>Data to be sent to the drop zone after a drop event.</entry> - </row> - <row> - <entry>dropListener</entry> - <entry>dropListener</entry> - </row> - <row> - <entry>dropValue</entry> - <entry>Data to be processed after a drop event.</entry> - </row> - <row> - <entry>highlightedClass</entry> - <entry>Corresponds to the HTML class attribute. Applied to highlighted node</entry> - </row> - <row> - <entry>icon</entry> - <entry>The icon for node</entry> - </row> - <row> - <entry>iconCollapsed</entry> - <entry>The icon for collapsed node</entry> - </row> - <row> - <entry>iconExpanded</entry> - <entry>The icon for expanded node</entry> - </row> - <row> - <entry>iconLeaf</entry> - <entry>iconLeaf</entry> - </row> - <row> - <entry>id</entry> - <entry>Every component may have a unique id that is automatically created if - omitted</entry> - </row> - <row> - <entry>immediate</entry> - <entry>A flag indicating that this component value must be - converted and validated immediately (during an - Apply Request Values phase), rather than waiting until a - Process Validations phase</entry> - </row> - <row> - <entry>nodeFace</entry> - <entry>Node face facet name</entry> - </row> - <row> - <entry>nodeSelectListener</entry> - <entry>nodeSelectListener</entry> - </row> - <row> - <entry>oncollapse</entry> - <entry>An action to be fired when collapsing a node</entry> - </row> - <row> - <entry>ondragend</entry> - <entry>A JavaScript event handler called after a drag operation.</entry> - </row> - <row> - <entry>ondragenter</entry> - <entry>A JavaScript event handler called on enter draggable object to zone.</entry> - </row> - <row> - <entry>ondragexit</entry> - <entry>A JavaScript event handler called after a drag object leaves zone.</entry> - </row> - <row> - <entry>ondragstart</entry> - <entry>A JavaScript event handler called before drag object.</entry> - </row> - <row> - <entry>ondrop</entry> - <entry>It's an event that is called when something is dropped on a drop zone</entry> - </row> - <row> - <entry>ondropend</entry> - <entry>A Javascript handler for event fired on a drop even the drop for a given type is not available</entry> - </row> - <row> - <entry>onexpand</entry> - <entry>An action to be fired when expanding a node</entry> - </row> - <row> - <entry>onselected</entry> - <entry>An action to be fired when selecting a node</entry> - </row> - <row> - <entry>preserveDataInRequest</entry> - <entry>If true, data is preserved in a request</entry> - </row> - <row> - <entry>preserveModel</entry> - <entry>It can be "state", "request", "none". The default is "request"</entry> - </row> - <row> - <entry>rendered</entry> - <entry>If "false", this component is rendered.</entry> - </row> - <row> - <entry>reRender</entry> - <entry>Id[s] (in format of call UIComponent.findComponent()) of components, rendered in case of AjaxRequest caused by this component. Can be single id, comma-separated list of Ids, or EL Expression with array or Collection</entry> - </row> - <row> - <entry>selectedClass</entry> - <entry>Corresponds to the HTML class attribute. Applied to selected node</entry> - </row> - <row> - <entry>showConnectingLines</entry> - <entry>If true, connecting lines are show</entry> - </row> - <row> - <entry>style</entry> - <entry>CSS style(s) is/are to be applied when this component is rendered</entry> - </row> - <row> - <entry>styleClass</entry> - <entry>Corresponds to the HTML class attribute</entry> - </row> - <row> - <entry>switchType</entry> - <entry>Tree switch algorithm: "client", "server", "ajax"</entry> - </row> - <row> - <entry>treeDataLocator</entry> - <entry/> - </row> - <row> - <entry>typeMapping</entry> - <entry>Map between a draggable type and an indicator name on zone. it's defined with the pair (drag type:indicator name))</entry> - </row> - <row> - <entry>value</entry> - <entry>value</entry> - </row> - <row> - <entry>var</entry> - <entry>var</entry> - </row> - </tbody> - </tgroup> - </table> - <sectioninfo> - - <keywordset> - - <keyword>presentation of data</keyword> - - <keyword>rich:tree</keyword> - - <keyword>HtmlTree</keyword> - - </keywordset> - - </sectioninfo> - <section> - - <table> - - <title>Component identification parameters </title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Name</entry> - - <entry>Value</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>component-type</entry> - - <entry>org.richfaces.Tree</entry> - - </row> - - <row> - - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlTree</entry> - - </row> - - <row> - - <entry>component-family</entry> - - <entry>org.richfaces.Tree</entry> - - </row> - - <row> - - <entry>renderer-type</entry> - - <entry>org.richfaces.TreeRenderer</entry> - - </row> - - <row> - - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.TreeTag</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - </section> - <section> - - <title>Creating the Component with a Page Tag</title> - - <para>To create it on a page, use the following syntax: </para> - - <programlisting role="XML">... - &lt;rich:tree&gt; - &lt;!--Set of the Tree nodes--&gt; - &lt;/rich:tree&gt; -... -</programlisting> - - </section> - <section> - - <title>Creating the Component Dynamically Using Java</title> - - <programlisting role="JAVA">... -org.richfaces.component.html.HtmlTree myPanel = new org.richfaces.component.html.HtmlTree(); -... -</programlisting> - - </section> - <section> - - <title>Details of Usage</title> - - <para>As it has been mentioned above the tree component allows to render any tree-like structure - of data.</para> - - <para>A bean property is passed into a tree <property>value</property> attribute. The property keeps the - structure of a org.richfaces.component.TreeNode type. (You may look at this interface description in APIdoc) The default classes for lists building of a TreeNodeImpl type (it - implements a TreeNode interface) for an XML structure XmlNodeData and XmlTreeDataBuilder are - implemented in the tree component. Hence, in order to provide your own class for TreeNode, it's - necessary only to implement this interface, i.e. the <emphasis role="italic"> - <property>"var"</property> - </emphasis> attribute contains - a name providing an access to data defined with value. </para> - - <para>For data output, named <property>tree</property> nodes elements are used. Each element, for - example depending on its definition, could be rendered with markup defined in one of - <property>tree</property> nodes. It's defined with the - <emphasis role="italic"> - <property>"nodeFace"</property> - </emphasis> - attribute that contains treeNode name for elements rendering. </para> - - <para>On the screenshot there are examples of nodes defined with different templates on the - following conditions</para> - - <programlisting role="JAVA">nodeFace="#{data.name != 'param-value' ? 'input' : 'text'}" -</programlisting> - - <figure> - - <title>Different nodes of tree</title> - - - <mediaobject> - - <imageobject> - - <imagedata fileref="images/tree2.gif"/> - - </imageobject> - - </mediaobject> - - </figure> - - <para>Switching on nodes opening/closing (expanded/collapsed) could be implemented in three modes. It could be specified - in the <emphasis role="italic"> - <property>"switchType"</property> - </emphasis> attribute. </para> - - <itemizedlist> - - <listitem>AJAX - request onto the server is used for switching </listitem> - - <listitem>Server - custom requests onto the server are used for switching</listitem> - - <listitem>Client - all data is uploaded onto the server, the switching is implemented with a - client script</listitem> - - </itemizedlist> - - <para>Common selecting allows also to activate AJAX requests with the - <emphasis role="italic"> - <property>"ajaxSubmitSelection"</property> - </emphasis> - attribute (true/false).</para> - - <para>To set a model saving during requests, use the - <emphasis role="italic"> - <property>"preserveModel"</property> - </emphasis>attribute with - state, request (default) and none values. The attribute is used for cashing data between requests - in state or request. The - <emphasis role="italic"> - <property>"treeDataLocator"</property> - </emphasis> attribute - defines a class providing an access to cashed data according to the ids saved in state/request - on recovery or cashing data saving the Id on caching.</para> - - </section> - <section> - - <title>Built-In Drag and Drop</title> - - <para>The tree component functionality provides a built-in support for Drag and Drop operations. - The main usage principles are the same as for Rich Faces Drag and Drop wrapper components. Hence, - to get additional information on the topic, read the corresponding chapters: - <ulink url="dndParam.html"> - <emphasis role="italic"> - <property>"rich:dndParam"</property>,</emphasis> - </ulink> - - <ulink url="dragSupport.html"> - <emphasis role="italic"> - <property>"rich:dragSupport"</property>,</emphasis> - </ulink> - - <ulink url="dragIndicator.html"> - <emphasis role="italic"> - <property>"rich:dragIndicator"</property>,</emphasis> - </ulink> - - <ulink url="dropSupport.html"> - <emphasis role="italic"> - <property>"rich:dropSupport"</property>.</emphasis> - </ulink> - - <property>Tree nodes</property> could be drag or drop elements, so tree has both attributes - groups.</para> - - <table> - - <title>Drag attributes description</title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>dragValue</entry> - - <entry>Element value drag passing into processing after a Drop event.</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>dragIndicator</entry> - - <entry>An indicator component id.</entry> - - </row> - - <row> - - <entry>dragType</entry> - - <entry>A drag zone name used to define whether processing is necessary with a Drop zone or - not.</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - <table> - - <title>Drop attributes description</title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>dropValue</entry> - - <entry>Element value drop passed into processing after Drop events .</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>dropListener</entry> - - <entry>A listener that processes a drop event. </entry> - - </row> - - <row> - - <entry>acceptedTypes</entry> - - <entry>Drag zone names allowed to be processed with a drop zone.</entry> - - </row> - - <row> - - <entry>typeMapping</entry> - - <entry>Drag zones names mapping on the corresponding drop zone parameters.</entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - </section> - <section> - - <title>Events handling</title> - - <para>Listeners classes that process events on server side are defined with the help:</para> - - <itemizedlist> - - <listitem>nodeSelectListener is called during request sending on a node selecting event (if request sending on this - event is defined)</listitem> - - <listitem>dropListener processes Drop event</listitem> - - <listitem>changeExpandListener processes expand/collapse event of a tree node</listitem> - - </itemizedlist> - - <para>Moreover, to add e.g. some JavaScript effects, client events defined on it are used:</para> - - <itemizedlist> - - <listitem>onexpand - expand node event</listitem> - - <listitem>oncollapse - collapse node event</listitem> - - <listitem>ondragexit - element passing out from tree zone event</listitem> - - <listitem>ondragstart - drag start event</listitem> - - <listitem>ondragend - drag end event (drop event)</listitem> - - <listitem>ondragenter - dragged element appearing on tree event</listitem> - - </itemizedlist> - - </section> - <section> - - <title>Look and Feel Customization</title> - - <para>For skinnability implementation the components use a <emphasis role="italic"> - <property>style class redefinition method</property> - </emphasis>.</para> - - <para>Default style classes are mapped on <emphasis role="italic"> - <property>skin parameters</property>.</emphasis> - </para> - - <para>To redefine appearance of all trees at once, there are two ways:</para> - - <itemizedlist> - - <listitem>to redefine corresponding skin parameters</listitem> - - <listitem>to add <emphasis role="italic"> - <property>style classes</property> - </emphasis> used by the tree to your page stylesheets</listitem> - - </itemizedlist> - - </section> - <section> - - <title>Skin parameters redefinition:</title> - - <para>There is only one skin parameter for the <property>tree</property> since - <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> - itself is a wrapper component for <property>tree</property> nodes. Look and feel is - described in details in the <ulink url="treeNode.html">"treeNode" chapter</ulink>.</para> - - <table> - - <title>Skin parameters for wrapper element</title> - - <tgroup cols="2"> - - <thead> - - <row> - - <entry>Skin parameters for wrapper element</entry> - - <entry>Properties corresponding to CSS parameter</entry> - - </row> - - </thead> - - <tbody> - - <row> - - <entry>overAllBackground</entry> - - <entry>background-color </entry> - - </row> - - </tbody> - - </tgroup> - - </table> - - </section> - <section> - - <title>Definition custom style classes:</title> - - <para>The <property>tree</property> also has only one predefined Style Class responsible - for displaying a wrapper element of the <property>tree</property> - <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> - redefining of which will change look and feel of all <property>trees</property> on the page.</para> - - </section> -</section> \ No newline at end of file