From richfaces-svn-commits at lists.jboss.org Tue Aug 12 04:21:52 2008 Content-Type: multipart/mixed; boundary="===============1113367545580133930==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r10040 - trunk/docs/userguide/en/src/main/docbook/included. Date: Tue, 12 Aug 2008 04:21:51 -0400 Message-ID: --===============1113367545580133930== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: atsebro Date: 2008-08-12 04:21:51 -0400 (Tue, 12 Aug 2008) New Revision: 10040 Modified: trunk/docs/userguide/en/src/main/docbook/included/tree.xml Log: RF-3819: Documenting. Tree built-in drag-and-drop. Modified: trunk/docs/userguide/en/src/main/docbook/included/tree.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/tree.xml 2008-08-12 0= 8:14:47 UTC (rev 10039) +++ trunk/docs/userguide/en/src/main/docbook/included/tree.xml 2008-08-12 0= 8:21:51 UTC (rev 10040) @@ -1,76 +1,76 @@
- - - presentation of data - rich:tree - HtmlTree - - + + + presentation of data + rich:tree + HtmlTree + + = - - Component identification parameters - - - - Name - Value - - - - - component-type - org.richfaces.Tree - - - component-class - org.richfaces.component.html.HtmlTree - - - component-family - org.richfaces.Tree - - - renderer-type - org.richfaces.TreeRenderer - - - tag-class - org.richfaces.taglib.TreeTag - - - -
+ + Component identification parameters + + + + Name + Value + + + + + component-type + org.richfaces.Tre= e + + + component-class + org.richfaces.com= ponent.html.HtmlTree + + + component-family<= /entry> + org.richfaces.Tre= e + + + renderer-type + org.richfaces.Tre= eRenderer + + + tag-class + org.richfaces.tag= lib.TreeTag + + + +
= -
- Creating the Component with a Page Tag - There are two ways to set up a tree: 1) with - <rich:recursiveTreeNodesAdaptor> - or - <rich:treeNodesAdaptor> - 2) and without them. The first method allows to omit - "value" - and - "var" - attributes definition as follows: +
+ Creating the Component with a Page Tag + There are two ways to set up a tree: 1) with + <rich:recursiveTreeNo= desAdaptor> + or + <rich:treeNodesAdapto= r> + 2) and without them. The first m= ethod allows to omit + "value" + and + "var" + attributes definition as follows= : = - - Example: - + + Example: + = - ...]]> = - The second way requires defining some attributes, as - it's shown in the example: + The second way requires defining some attribute= s, as it's shown + in the example: = - - Example: - - + Example: + + @@ -78,19 +78,19 @@ ... ...]]> -
-
- Creating the Component Dynamically Using Java +
+
+ Creating the Component Dynamically Using Java</= title> = - <para> - <emphasis role=3D"bold">Example:</emphasis> - </para> - <programlisting role=3D"JAVA"><![CDATA[import org.richfaces.component.= html.HtmlTree; + <para> + <emphasis role=3D"bold">Example:</emphasis> + </para> + <programlisting role=3D"JAVA"><![CDATA[import org.rich= faces.component.html.HtmlTree; ... HtmlTree myTree =3D new HtmlTree(); ...]]></programlisting> - </section> - <!--section> + </section> + <!--section> <title>Details of Usage As it has been mentioned above the= <rich:tree> @@ -309,71 +309,76 @@ = = -
- Details of Usage - As it has been mentioned above the= - <rich:tree> - component allows rendering any tree-like data model. - The component interacts with data model via - "TreeNode" interface (org.richfaces.model.TreeNode) that is used for tree nodes= representation. The - "value" - attribute of the - <rich:tree> - component contains a nodes structure defined in a bean p= roperty. The property - keeps a structure of objects that implements "TreeNode&qu= ot; - interface. - - <rich:treeNode> - has a property - "data" (see org.richfaces.model.TreeNode). Data contained in the prop= erty is placed in a - request scope variable, which name is defined with - "var" - attribute for the - <rich:tree> - component. - You can develop and use your own pattern of the - "TreeNode" interface or use a default imple= mentation, - which is defined with a default class "TreeNodeImpl"= - (org.richfaces.model.TreeNodeImpl). - There is a "XmlTreeDataBuilder" class (org.richfaces.component.xml.XmlTreeDataBuilder) that allo= ws transforming XML into - structures of objects containing "XmlNodeData" (org.richfaces.component.xml.XmlNodeData) instances as dat= a, which could be - represented by the - <rich:tree> - component. - It's possible to define a visual representation of a node = data model (to define a - node icon) and its behavior in correspondence with the data containe= d in this node (with a value of - the - "var" - attribute). The node behavior is defined by the compone= nts nested into the - <rich:treeNode> - (e.g. links or buttons). For these purposes you should u= se - "nodeFace" - attribute. For each tree node a value of - "nodeFace" - attribute is evaluated and - <rich:treeNode> - with a value of - "type" - attribute equal to a value of - "nodeFace" - is used for node representation. See an example below.<= /para> +
+ Details of Usage + As it has been mentioned = above the + <rich:tree> + component allows rendering any t= ree-like data model. + The component interacts with data model via + "TreeNode" = interface (org.richfaces.model.TreeNode) that is used for tree + nodes representation. The + "value" + attribute of the + <rich:tree> + component contains a nodes struc= ture defined in a bean + property. The property keeps a structure of = objects that implements + "TreeNode" = interface. + + <rich:treeNode> + has a property + "data" (see <= ulink + url=3D"http://labs.jboss.com/file-= access/default/members/jbossrichfaces/freezone/docs/apidoc_framework/org/ri= chfaces/model/TreeNode.html" + >org.richfaces.model.TreeNode). Data contained in + the property is placed in a request scope va= riable, which name is + defined with + "var" + attribute for the + <rich:tree> + component. + You can develop and use your own pattern of the + "TreeNode" = interface or use a + default implementation, which is defined wit= h a default class + "TreeNodeImpl" (org.richfaces.model.TreeNodeImpl<= /ulink>). + There is a "XmlTreeDataBuilder"<= /code> class + (org.richfaces.component.xml.XmlTr= eeDataBuilder) + that allows transforming XML into structures= of objects containing + "XmlNodeData" (org.richfaces.component.xml.XmlNo= deData) instances + as data, which could be represented by the <= emphasis role=3D"bold"> + <rich:tree> + component. + It's possible to define a visual representa= tion of a node data + model (to define a node icon) and its behavi= or in correspondence with + the data contained in this node (with a valu= e of the + "var" + attribute). The node behavior is= defined by the components + nested into the + <rich:treeNode> + (e.g. links or buttons). For the= se purposes you should use + "nodeFace" + attribute. For each tree node a = value of + "nodeFace" + attribute is evaluated and + <rich:treeNode> + with a value of + "type" + attribute equal to a value of + "nodeFace" + is used for node representation.= See an example below. = - - Example: - + + Example: + = - = @@ -388,111 +393,132 @@ ...]]> - This is a result: -
- The <emphasis> - <property>"nodeFace"</property> - </emphasis> attribute usage - - - - - -
- In the example above, when each node of data model is processed,= data contained in the "data" property - of - "TreeNode" interface is assigned to a= request scope variable, which name is defined with - "var" - attribute. The value of the - "nodeFace" - attribute is evaluated in correspondence with the data a= ssigned to the - "var" - attribute. The corresponding <= property><rich:treeNode> component (with a valu= e of - "type" - attribute equal to a value of - "nodeFace" - ) is used for the node representation. For example, duri= ng data model processing, an object with a name "Chris - Rea" was inserted in the - "var" - attribute. Then the value of - "nodeFace" - attribute was evaluated as "artist". Thus, for the node - representation the - <rich:treeNode> - with - "type" - equal to "artist" was used. - You can also assign an EL-expression as value of the - "nodeFace" - attribute. See an example below: - - Example: - - This is a result: +
+ The <emphasis> + <property>"nodeFace= "</property> + </emphasis> attribute usage + + + + + +
+ In the example above, when each node of data mod= el is processed, data + contained in the "data" property of + "TreeNode" interface + is assigned to a request scope variable, whi= ch name is defined with + "var" + attribute. The value of the + "nodeFace" + attribute is evaluated in corres= pondence with the data + assigned to the + "var" + attribute. The corresponding + <rich:treeNode> + component (with a value of + "type" + attribute equal to a value of + "nodeFace" + ) is used for the node representa= tion. For example, during + data model processing, an object with a name= "Chris + Rea" was inserted in the + "var" + attribute. Then the value of + "nodeFace" + attribute was evaluated as + "artist". T= hus, for the node + representation the + <rich:treeNode> + with + "type" + equal to "artist" was used. + You can also assign an EL-expression as value of= the + "nodeFace" + attribute. See an example below:= + + Example: + + - There are some essential points in a - "nodeFace" - attribute usage: you need to define notions for typeless and a default nodes. - + There are some essential points in a + "nodeFace" + attribute usage: you need to def= ine notions for + typeless and a + default nodes. = - The typeless node is the first - <rich:treeNode> - component (from all children nodes nested to the - <rich:tree> - component) with not defined - "type" - attribute and defined - "rendered" - attribute. The typeless node is use= d for representation when - "nodeFace" - attribute is null. - Default node has the following interior pre= sentation: - - Example: - - The typeless node is the fi= rst + <rich:treeNode> + component (from all children nod= es nested to the + <rich:tree> + component) with not defined + "type" + attribute and defined + "rendered" + attribute. The typeles= s node is used + for representation when + "nodeFace" + attribute is null. + Default node has the follow= ing interior presentation: + + Example: + + ...]]> - - "varAttributeName" is a value for - "var" - attribute. - Default node is used in the following cases= : - - - "nodeFace" - attribute is defined, but its value isn't equal t= o any - "type" - attribute value from all children nodes; - - "nodeFace" - attribute is defined and its value is equal to a value= of some - "type" - attribute from all children nodes, but the value of - "rendered" - attribute for this node is - "false". - - There is also one thing that has to be remembered using - "type" - and - "rendered" - attributes: it's possible to define several - <rich:treeNode> - components with equal values of - "type" - attribute and different values of - "rendered" - attribute. It provides a possibility to define different= representation styles for the - same node types. In the example with artists and their albums (see <= link linkend=3D"example" - >above) it's possible to represent albums that are ava= ilable for sale and - albums that are not available. Please study the example below: - - Example: - + + + "varAttributeName&q= uot; + is a value for + "var" + attribute. + Default node is used in the= following cases: + + + + "nodeFace= " + attribute is= defined, but its value + isn't equal to any = + "type&quo= t; + attribute va= lue from all children + nodes; + + + + "nodeFace= " + attribute is= defined and its value is + equal to a value of some= + "type&quo= t; + attribute fr= om all children nodes, but + the value of + "rendered= " + attribute fo= r this node is + "false&qu= ot;. + + + There is also one thing that has to be remembere= d using + "type" + and + "rendered" + attributes: it's possible t= o define several + + <rich:treeNode> + components with equal values of = + "type" + attribute and different values o= f + "rendered" + attribute. It provides a possibi= lity to define different + representation styles for the same node type= s. In the example with + artists and their albums (see above) + it's possible to represent albums that = are available for sale + and albums that are not available. Please st= udy the example below: + + Example: + = - = ... @@ -508,64 +534,78 @@ ...]]> - This is a result of the code: -
- The <emphasis> - <property>"type"</property> - </emphasis> and the <emphasis> - <property>"rendered"</property> - </emphasis> attributes usage - - - - - -
- In the example the - <rich:treeNode> - components has equal values of the - "type" - attribute. Depending on value of the - "rendered" - attribute the corresponding - <rich:treeNode> - component is selected for node representation. If an alb= um is available for sale - the value of the - "rendered" - for the first - <rich:treeNode> - component is "true", for the second one is - "false". Thus, the first - <rich:treeNode> - is selected for node representation. - Tree node can be run in tree modes. Modes can be specified with= - "switchType" - attribute for - <rich:tree> - component. - - Ajax (default value) - Ajax submission = is used performing the functionality. = -Note, that for collapse/expand operations an Ajax request is sent to the s= erver and it can cause a short delay. - Server - regular form of submission req= uest is used. - Client =E2=80=93 all operations are per= formed totally on the client; no interaction with a server is involved. Ful= l page content is reloaded after every action. - - The - "icon" - , - "iconCollapsed" - , - "iconExpanded" - , - "iconLeaf" - attributes set the icons' images for the component. = You can also define icons using facets with the same names. = + This is a result of the code: +
+ The <emphasis> + <property>"type&quo= t;</property> + </emphasis> and the <emphasis> + <property>"rendered= "</property> + </emphasis> attributes usage</titl= e> + <mediaobject> + <imageobject> + <imagedata fileref=3D"im= ages/tree4.png"/> + </imageobject> + </mediaobject> + </figure> + <para>In the example the <emphasis role=3D"bold"> + <property><rich:treeNode></p= roperty> + </emphasis> components has equal values of t= he <emphasis> + <property>"type"</proper= ty> + </emphasis> attribute. Depending on value of= the <emphasis> + <property>"rendered"</pr= operty> + </emphasis> attribute the corresponding <emp= hasis role=3D"bold"> + <property><rich:treeNode></p= roperty> + </emphasis> component is selected for node r= epresentation. If an album + is available for sale the value of the <emph= asis> + <property>"rendered"</pr= operty> + </emphasis> for the first <emphasis> + <property><rich:treeNode></p= roperty> + </emphasis> component is "true", f= or the second one + is "false". Thus, the first <empha= sis role=3D"bold"> + <property><rich:treeNode></p= roperty> + </emphasis> is selected for node representat= ion. </para> + <para>Tree node can be run in tree modes. Modes can be= specified with <emphasis> + <property>"switchType"</= property> + </emphasis> attribute for<emphasis role=3D"b= old"> + <property><rich:tree></prope= rty> + </emphasis> component.</para> + <itemizedlist> + <listitem> + <para><code>Ajax</code> (default v= alue) - Ajax submission is + used performing the func= tionality. Note, that for + collapse/expand operatio= ns an Ajax request is sent + to the server and it can= cause a short + delay.</para> + </listitem> + <listitem> + <para><code>Server</code> - regula= r form of submission + request is used.</para> + </listitem> + <listitem> + <para><code>Client</code> =E2=80= =93 all operations are performed + totally on the client; n= o interaction with a + server is involved. Full= page content is reloaded + after every action.</par= a> + </listitem> + </itemizedlist> + <para> The <emphasis> + <property>"icon"</proper= ty> + </emphasis>, <emphasis> + <property>"iconCollapsed"= ;</property> + </emphasis>, <emphasis> + <property>"iconExpanded"= </property> + </emphasis>, <emphasis> + <property>"iconLeaf"</pr= operty> + </emphasis> attributes set the icons' i= mages for the + component. You can also define icons using f= acets with the same names. + If the facets are defined, the corresponding= attributes are ignored + and facets' content is used as icons. B= y default the width of + a rendered facet area is 16px. </para> + <para> + <emphasis role=3D"bold">Example:</emphasis> + </para> = -If the facets are defined, the corresponding attributes are ignored and - facets' content is used as icons. By default the width of a ren= dered facet area is 16px. </para> - <para> - <emphasis role=3D"bold">Example:</emphasis> - </para> - = - <programlisting role=3D"XML"><![CDATA[... + <programlisting role=3D"XML"><![CDATA[... <rich:tree value=3D"#{library.data}" var=3D"item"> ... <f:facet name=3D"icon"> @@ -583,333 +623,408 @@ ... </rich:tree> ...]]></programlisting> - = - <para> The <emphasis role=3D"bold"> - <property><rich: tree></property> - </emphasis> component can be used together with <emphasis role=3D"bold= "> - <property><rich: treeNodeAdaptor></property> - </emphasis>. In this case there is no need to specify the attributes <= emphasis> - <property>"value"</property> - </emphasis> and <emphasis> - <property>"var"</property> - </emphasis>. Besides, visual representation shouldn't be defined = right in the - <property>tree</property>. In this case a <emphasis role=3D"bold"><p= roperty><rich: tree></property></emphasis> tag is applied mainly for = defining common - attributes such as <emphasis> - <property>"ajaxSubmitSelection"</property> - </emphasis> etc. </para> - <para> - Information about the <emphasis><property>"process"</prope= rty></emphasis> attribute usage you can find <link linkend=3D"process">here= </link>. - </para> - <tip> - <title>Tip: - - "rowKeyConverter" s= upport for the <rich:tree> is pending! - - -
= -
- Built-In Drag and Drop - The - <rich: tree> - component functionality provides a built-in support for = Drag and Drop operations. - The main usage principles are similar to RichFaces DnD wrapper compo= nents. Hence, to get - additional information on the issue, read the corresponding chapters= :"rich:dndParam", "rich:dragSupport", "rich:dragIndicator", "rich:dropSupport". Since treeNodescan be assigned as = - Drag, Drop or Drag-and-Drop elements, a tree ca= n include the following - groups of attributes. - - Drag group - - - - Attribute Name - Description - - - - - dragValue - Element value drag passed into processing after a Drop = event - + The + <rich: tree> + component can be used together w= ith + <rich: treeNodeAdapto= r> + . In this case there is no need t= o specify the attributes + "value" + and + "var" + . Besides, visual representation = shouldn't be + defined right in the tree. In this case a + + <rich: tree> + tag is applied mainly for defini= ng common attributes such + as + "ajaxSubmitSelectio= n" + etc. + Information about the + "process" + attribute usage you can find here. + + Tip: + + + "rowKeyCo= nverter" + support for the + <rich:tree&= gt; + is pending! + + = - - - - dragListener - A listener that processes a Drag event - - - dragIndicator - Id of a component that is used as a drag pointer during= the drag operation - - - dragType - Defines a drag zone type that is used for definition of= a dragged element, which - can be accepted by a drop zone - - - -
- - Drop group - - - - Attribute Name - Description - - - - - dropValue - Element value drop passed into processing after Drop ev= ents - - - - dropListener - A listener that processes a Drop event. - - - acceptedTypes - Drag zone names are allowed to be processed with a Drop= zone - - - typeMapping - Drag zones names mapping on the corresponding drop zone= parameters - - - -
- - Please see an example below. - - - Example: - - - + Built-In Drag and Drop + Words "built-in" in this context mean, = + that <r= ich:tree> component has its own attributes, that p= rovide drag-and-drop capability. = + These attributes can be divided into two gro= ups: those ones which provide drag and those which pro= vide drop operations (see the tables below). + + = + + Drag group + + + + Attribu= te Name + Descrip= tion + + + + + dragVal= ue + Element= value drag passed into processing after a Drop event + + + dragLis= tener + A liste= ner that processes a Drag event + + + dragInd= icator + Id of a= component that is used as a drag pointer during the drag + oper= ation + + + dragTyp= e + Defines= a drag zone type that is used for definition of a dragged element, which + can = be accepted by a drop zone + + + +
+ = + + Drop group + + + + Attribu= te Name + Descrip= tion + + + + + dropVal= ue + Element= value drop passed into processing after Drop events + = = + + dropLis= tener + A liste= ner that processes a Drop event. + + + accepte= dTypes + Drag zo= ne names are allowed to be processed with a Drop zone + + + typeMap= ping + Drag zo= nes names mapping on the corresponding drop zone parameters + + + +
+ = + Consider drag-and-drop insi= de a tree. = + All zones, which are assumed to be dragged, = must be marked. = + In terms of <rich:tree> these zones completely correspond= to tree nodes. = + So, all dragging nodes should be marked with= "dragType" attribute, = which value must be the same as value for node=E2=80=99s "type" attribute. = + Then, to mark zone(-s), where the dragging n= ode could be dropped, pass the type of dragging node to the "acceptedTypes" attribute of the drop = zone. = + It would be good to itemize, that each tree = node in the <rich:tree><= /emphasis> component=E2=80=99s structure has its own key. = + Depending on how the component is used, thes= e keys can be generated by the component itself or can be taken from the co= mponent=E2=80=99s data model. = + Keys help to identify each node in a tree; k= ey is what exactly being passing from one node to another in drag= -and-drop operations. = + Finally, the method binding, that will proce= ss drag-and-drop operation, should be pointed via "dropListener" attribute of= the <rich:tree>. + + + Chapters "6.40 &l= t;dragIndicator>" and "6.39 = <dndParam>" describes how to apply visual element, that s= how some additional information (e.g. dragging item name) while operating w= ith drag-and-drop. + + + Page code, that describes a tree with built = in drag-and-drop in the way it is considered, is shown= below. + + = + + Example: + + = + = - - - - - - - - - - - - + + + + + + + + + + + + -...]]> - +...]]> + = + This code renders following tree: + = +
+ DnD operations + + + + + +
+ = +
+ = +
+ Events handling + Listeners classes that process events on the ser= ver side are defined with + the help of: + + + changeExpandListen= er processes + expand/collapse event of= a + treeNode + + + dropListener processes a Drop + event + + + dragListener processes a Drag + event + + + nodeSelectListener= is called + during request sending o= n a node selecting event + (if request sending on t= his event is + defined) + + = - + Listener methods can be defined using the following attributes or us= ing nested tags. + Client event attributes are: + + + + "onexpand= " + is a script = expression to invoke when + a node is expanded + + + + "oncollap= se" + is a script = expression to invoke when + a node is collapsed + + + + "ondragex= it" + is a script = expression to invoke when + an element passing out f= rom a tree zone + + + + "ondragst= art" + is a script = expression to invoke when + dragging starts + + + + "ondragen= d" + is a script = expression to invoke when + dragging ends (a drop ev= ent) + + + + "ondragen= ter" + is a script e= xpression to invoke when a + dragged element appears = on a tree + + = -In the shown example a song from one album can be dragged into another bec= ause attribute = - acceptedTypes=3D"song" defined in the second treeNode - with type=3D"album". Its value is equal to the val= ue of the - "type"attribute defined = in the third treeNode (see picture below). An album = can be also - dragged into treeNode with type=3D"a= rtist" property. + They can be used to add some JavaScript effects.= = - + Standart HTML event attributes like + "onclick" + , + "onmousedown"<= /property> + , + "onmouseover"<= /property> + etc. can be also used. Event han= dlers of a + <rich:tree> + component capture events occured= on any + tree part. But event ha= ndlers of + treeNode capt= ure events occured on + treeNode only= , except for children + events. +
= -
- DnD operations - - - - - -
+
+ Look-and-Feel Customization = -
-
- Events handling - Listeners classes that process events on the server side are def= ined with the help of: - - changeExpandListener processes = expand/collapse event of a treeNode - dropListener processes a Drop e= vent - dragListener processes a Drag e= vent - nodeSelectListener is called du= ring request sending on a node selecting event (if request sending on this = event is defined) - + For skinnability implementation, the components = use a + style class redefinition= method. + Default style classes are mapped= on + skin parameters. + = - Listener methods can be defined using the following - attributes or using nested tags. - Client event attributes are: - - "onexpand"<= /emphasis> is a script expression to invoke when a node is expanded<= /listitem> - "oncollapse" is a script expression to invoke when a node is collapsed - "ondragexit" is a script expression to invoke when an element passing out f= rom a tree zone - "ondragstart" is a script expression to invoke when dragging starts<= /listitem> - "ondragend"= is a script expression to invoke when dragging ends (a drop eve= nt) - "ondragenter"is a script expression to invoke when a dragged element appear= s on a tree - + There are two ways to redefine the appearance of= all + <rich:tree> + components at once: = - They can be used to add some JavaScript effects. + + + Redefine the corresponding s= kin parameters + = - Standart HTML event attributes like"on= click", - "onmousedown" - , - "onmouseover" - etc. can be also used. Event handlers of a - <rich:tree> - component capture events occured on any tree part. But event - handlers of treeNode capture events occured on - treeNode only, except for children events. -
+ + Add to your style sheets + style classes<= /property> + used by a + <rich:tree&= gt; + component + + +
= -
- Look-and-Feel Customization +
+ Skin Parameters Redefinition: + There is only one skin parameter for + <rich:tree> + . As it's a wrapper componen= t for + <rich:treeNode> + components, look and feel custom= ization is described in + the corresponding = section. + + Skin parameters for a wrapper element= + + + + Skin parameters + CSS properties + + + + + overAllBackground= + background-color = + + + +
+
+
+ Definition of Custom Style Classes = - For skinnability implementation, the components use a - style class redefinition method. - Default style classes are mapped on - skin parameters. - + + Classes names that define a component= appearance + + + + Class name + Description + + + + + rich-tree + Defines styles fo= r a wrapper + <div> element of + a tree + + + +
= - There are two ways to redefine the appearance of all - <rich:tree> - components at once: + In order to redefine styles for all + <rich:tree> + components on a page using CSS, = it's enough to + create classes with the same names (possible= classes could be found in + the table above) and define necessary + properties in them. An example is placed bel= ow: = - - - Redefine the corresponding skin parameters - + + Example: + + = - - Add to your style sheets - style classes - used by a - <rich:tree> - component - - -
+ This is a result: = -
- Skin Parameters Redefinition: - There is only one skin parameter for - <rich:tree> - . As it's a wrapper component for - <rich:treeNode> - components, look and feel customization is described in = the corresponding section. - - Skin parameters for a wrapper element - - - - Skin parameters - CSS properties - - - - - overAllBackground - background-color - - - -
-
-
- Definition of Custom Style Classes - = - - Classes names that define a component appearance - - - - Class name - Description - - - - - rich-tree - Defines styles for a wrapper <div> element of a t= ree - - - -
+
+ Redefinition styles with predefined c= lasses + + + + + +
= - In order to redefine styles for all - <rich:tree> - components on a page using CSS, it's enough to create= classes with the - same names (possible classes could be found in the table above) and define necessary properties in them. An ex= ample is placed below: - = - - Example: - - = - = - This is a result: - = -
- Redefinition styles with predefined classes - - - - - -
- = - In the example a tree font weight was changed to bold. - Also it's possible to change styles of a particular <rich:tree> component. In thi= s case you should create own style classes and use them in corresponding <rich:tree> style= Class attributes. An example is placed below: - = - - Example: - - In the example a tree font weight was changed to= bold. + Also it's possible to change styles of a pa= rticular + <rich:tree> + component. In this case you shou= ld create own style + classes and use them in corresponding + <rich:tree> + + styleClass attributes. = An example is placed + below: + + + Example: + + = - The "highlightedClass"<= /emphasis> attribute for <rich:tree> is defined as it= 's shown in the example below: - = - - Example: - - -]]> = - = - This is a result: - = -
- Redefinition styles with own classes and styleClass attribute= s - - - - - -
= - = - As it's shown on the picture above, font weight of highligh= ted text node of a tree was changed to bold. = = -
- = -
- Relevant Resources Links - - Here - you can see the example of - <rich:tree> - usage and sources for the given example. - How to Expand/Collapse Tree Nodes from code, see here. -
+...]]> + The + "highlightedClass&q= uot; + attribute for + <rich:tree> + is defined as it's shown in= the example below: = + + Example: + + +]]> + + This is a result: + +
+ Redefinition styles with own classes = and styleClass attributes + + + + + +
+ + As it's shown on the picture above, font we= ight of highlighted + text node of a tree was= changed to bold. +
+ +
+ Relevant Resources Links + + Here you can see the exam= ple of + <rich:tree> + usage and sources for the given = example. + How to Expand/Collapse Tree Nodes from code, see= here. +
+
--===============1113367545580133930==--