The component is designed for hierarchical data presentation and is applied for building a tree structure with a drag-and-drop capability.
Highly customizable look-and-feel
Built-in drag and drop capability, than enable relocating tree nodes within the tree
Built-in Ajax processing
Possibility to define a visual representation by node type
Support of several root elements in a tree
Table 6.465. rich : tree attributes
Attribute Name | Description |
---|---|
acceptCursors | List of comma separated cursors that indicates when acceptable draggable over dropzone |
acceptedTypes | A list of drag zones types, which elements are accepted by a drop zone |
adviseNodeOpened | MethodBinding pointing at a method accepting an org.richfaces.component.UITree with return of java.lang.Boolean type. If returned value is: java.lang.Boolean. TRUE, a particular treeNode is expanded; java.lang.Boolean.FALSE, a particular treeNode is collapsed; null, a particular treeNode saves the current state |
adviseNodeSelected | MethodBinding pointing at a method accepting an org.richfaces.component.UITree with return of java.lang.Boolean type. If returned value is: java.lang.Boolean. TRUE, a particular treeNode is selected; java.lang.Boolean.FALSE, a particular treeNode is unselected; null, a particular treeNode saves the current state |
ajaxSingle | if "true", submits ONLY one field/link, instead of all form controls |
ajaxSubmitSelection | If "true", an Ajax request to be submit when selecting node. Default value is "false". |
binding | The attribute takes a value-binding expression for a component property of a backing bean |
bypassUpdates | If "true", after process validations phase it skips updates of model beans on a force render response. It can be used for validating components input |
changeExpandListener | Listener called on expand/collapse event on the node |
componentState | It defines EL-binding for a component state for saving or redefinition |
cursorTypeMapping | Mapping between drop types and acceptable cursors |
data | Serialized (on default with JSON) data passed on the client by a developer on AJAX request. It's accessible via "data.foo" syntax |
dragIndicator | Id of a component that is used as drag pointer during the drag operation |
dragListener | MethodBinding representing an action listener method that will be notified after drag operation |
dragType | A drag zone type that is used for zone definition, which elements can be accepted by a drop zone |
dragValue | Data to be sent to the drop zone after a drop event. Default value is "getRowKey()". |
dropListener | MethodBinding representing an action listener method that will be notified after drop operation |
dropValue | Data to be processed after a drop event. Default value is "getRowKey()". |
eventsQueue | Name of requests queue to avoid send next request before complete other from same event. Can be used to reduce number of requests of frequently events (key press, mouse move etc.) |
focus | id of element to set focus after request completed on client side |
grabbingCursors | List of comma separated cursors that indicates when you has grabbed something |
grabCursors | List of comma separated cursors that indicates when you can grab and drag an object |
highlightedClass | Corresponds to the HTML class attribute. Applied to highlighted node |
icon | The icon for node |
iconCollapsed | The icon for collapsed node |
iconExpanded | The icon for expanded node |
iconLeaf | An icon for component leaves |
id | Every component may have a unique id that is automatically created if omitted |
ignoreDupResponses | Attribute allows to ignore an Ajax Response produced by a request if the newest 'similar' request is in a queue already. ignoreDupResponses="true" does not cancel the request while it is processed on the server, but just allows to avoid unnecessary updates on the client side if the response isn't actual now |
immediate | 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 |
limitToList | If "true", updates on client side ONLY elements from this 'reRender' property. If "false" (default) updates all rendered by ajax region components |
nodeFace | Node face facet name |
nodeSelectListener | MethodBinding representing an action listener method that will be notified after selection of node. |
onbeforedomupdate | JavaScript code for call before DOM has been updated on client side |
onclick | HTML: a script expression; a pointer button is clicked |
oncollapse | HTML: script expression to invoke on node collapsing |
oncomplete | JavaScript code for call after request completed on client side |
ondblclick | HTML: a script expression; a pointer button is double-clicked |
ondragend | A JavaScript event handler called after a drag operation |
ondragenter | A JavaScript event handler called on enter draggable object to zone |
ondragexit | A JavaScript event handler called after a drag object leaves zone |
ondragstart | A JavaScript event handler called before drag operation |
ondrop | It's an event that is called when something is dropped on a drop zone |
ondropend | A JavaScript handler for event fired on a drop even the drop for a given type is not available |
ondropout | A JavaScript event handler called after a out operation |
ondropover | A JavaScript event handler called after a drop operation |
onexpand | HTML: script expression to invoke on node expansion |
onkeydown | HTML: a script expression; a key is pressed down |
onkeypress | HTML: a script expression; a key is pressed and released |
onkeyup | HTML: a script expression; a key is released |
onmousedown | HTML: script expression; a pointer button is pressed down |
onmousemove | HTML: a script expression; a pointer is moved within |
onmouseout | HTML: a script expression; a pointer is moved away |
onmouseover | HTML: a script expression; a pointer is moved onto |
onmouseup | HTML: script expression; a pointer button is released |
onselected | HTML: script expression to invoke on node selection |
preserveDataInRequest | If "true", data is preserved in a request. Default value is "true". |
preserveModel | Possible values are "state", "request", "none". Default value is "request" |
process | Id['s] (in format of call UIComponent.findComponent()) of components, processed at the phases 2-5 in case of AjaxRequest caused by this component. Can be single id, comma-separated list of Id's, or EL Expression with array or Collection |
rejectCursors | List of comma separated cursors that indicates when rejectable draggable over dropzone |
rendered | If "false", this component is not rendered |
requestDelay | Attribute defines the time (in ms.) that the request will be wait in the queue before it is ready to send. When the delay time is over, the request will be sent to the server or removed if the newest 'similar' request is in a queue already |
reRender | 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 Id's, or EL Expression with array or Collection |
rowKeyVar | The attribute provides access to a row key in a Request scope |
selectedClass | Corresponds to the HTML class attribute. Applied to selected node |
showConnectingLines | If "true", connecting lines are show |
stateAdvisor | ValueBinding pointing at instance of class implementing org.richfaces.component.state.TreeStateAdvisor interface. |
stateVar | The attribute provides access to a component state on the client side |
status | ID (in format of call UIComponent.findComponent()) of Request status component |
style | CSS style(s) is/are to be applied when this component is rendered |
styleClass | Corresponds to the HTML class attribute |
switchType | Tree switch algorithm: "client", "server", "ajax" |
timeout | Response waiting time on a particular request. If a response is not received during this time, the request is aborted |
toggleOnClick | If "false" do not toggle node state on click. If "true", than node will be toggles on click on ether node content, or node icon. Default value is "false". |
treeNodeVar | The attribute provides access to a TreeNode instance in a Request scope |
typeMapping | Map between a draggable type and an indicator name on zone. it's defined with the pair (drag type:indicator name)) |
value | The current value for this component |
var | Attribute contains a name providing an access to data defined with value |
Table 6.466. 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 |
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:
Example:
...
<rich:tree>
<rich:recursiveTreeNodesAdaptor roots="#{fileSystemBean.sourceRoots}" var="item" nodes="#{item.nodes}" />
</rich:tree>
...
The second way requires defining some attributes, as it's shown in the example:
Example:
...
<rich:tree value="#{library.data}" var="item" >
<rich:treeNode icon="/images/tree/singer.png" >
<h:outputText value="#{item.name}" />
</rich:treeNode>
...
</rich:tree>
...
Example:
import org.richfaces.component.html.HtmlTree;
...
HtmlTree myTree = new HtmlTree();
...
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 property. The property keeps a structure of objects that implements "TreeNode" interface.
<rich:treeNode> has a property "data" (see org.richfaces.model.TreeNode). Data contained in the property 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 implementation, which is defined with a default class "TreeNodeImpl" (org.richfaces.model.TreeNodeImpl).
There is a "XmlTreeDataBuilder" class (org.richfaces.component.xml.XmlTreeDataBuilder) that allows transforming XML into structures of objects containing "XmlNodeData" (org.richfaces.component.xml.XmlNodeData) instances as data, 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 contained in this node (with a value of the "var" attribute). The node behavior is defined by the components nested into the <rich:treeNode> (e.g. links or buttons). For these 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.
...
<h:form>
<rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}">
<rich:treeNode type="artist" iconLeaf="/images/tree/singer.png" icon="/images/tree/singer.png">
<h:outputText value="#{item.name}" />
</rich:treeNode>
<rich:treeNode type="album" iconLeaf="/images/tree/disc.png" icon="/images/tree/disc.png">
<h:outputText value="#{item.title}" />
</rich:treeNode>
<rich:treeNode type="song" iconLeaf="/images/tree/song.png" icon="/images/tree/song.png">
<h:outputText value="#{item.title}" />
</rich:treeNode>
</rich:tree>
</h:form>
...
This is a result:
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 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 representation. 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". 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:
nodeFace="#{data.name != 'param-value' ? 'artist' : 'album'}"
There are some essential points in a "nodeFace" attribute usage: you need to define 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 used for representation when "nodeFace" attribute is null.
Default node has the following interior presentation:
Example:
...
<h:outputText value="#{varAttributeName}">
...
"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 to 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 above) it's possible to represent albums that are available for sale and albums that are not available. Please study the example below:
Example:
...
<h:form>
<rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}">
...
<rich:treeNode type="album" iconLeaf="/images/tree/album.gif" icon="/images/tree/album.gif"
rendered="#{item.exist}">
<h:outputText value="#{item.name}" />
</rich:treeNode>
<rich:treeNode type="album" iconLeaf="/images/tree/album_absent.gif" icon="/images/tree/album_absent.gif"
rendered="#{not item.exist}">
<h:outputText value="#{item.name}" />
</rich:treeNode>
...
</rich:tree>
</h:form>
...
This is a result of the code:
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 album 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 server and it can cause a short delay.
Server - regular form of submission request is used.
Client – all operations are performed totally on the client; no interaction with a server is involved. Full 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. If the facets are defined, the corresponding attributes are ignored and facets' content is used as icons. By default the width of a rendered facet area is 16px.
Example:
...
<rich:tree value="#{library.data}" var="item">
...
<f:facet name="icon">
<h:graphicImage value="/images/tree/singer.png "/>
</f:facet>
<f:facet name="iconCollapsed">
<h:graphicImage value="/images/tree/singer.png " />
</f:facet>
<f:facet name="iconExpanded">
<h:graphicImage value="/images/tree/singer.png " />
</f:facet>
<f:facet name="iconLeaf">
<h:graphicImage value="/images/tree/song.png " />
</f:facet>
...
</rich:tree>
...
The <rich: tree> component can be used together with <rich: treeNodeAdaptor> . In this case there is no need to 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 defining common attributes such as "ajaxSubmitSelection" etc.
Information about the "process" attribute usage you can find here.
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 components. 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 can include the following groups of attributes.
Table 6.467. Drag group
Attribute Name | Description |
---|---|
dragValue | Element value drag passed into processing after a Drop event |
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 |
Table 6.468. Drop group
Attribute Name | Description |
---|---|
dropValue | Element value drop passed into processing after Drop events |
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:
...
<h:form>
<rich:tree dragIndicator=":treeDragIndicator" dropListener="#{libraryAjaxTree.processDrop}" style="width:300px" value="#{libraryAjaxTree.data}" var="item" nodeFace="#{item.type}">
<rich:treeNode type="artist" acceptedTypes="album" iconLeaf="/images/tree/group.png" icon="/images/tree/group.png">
<h:outputText value="#{item.name}" />
</rich:treeNode>
<rich:treeNode type="album" dragType="album" acceptedTypes="song" iconLeaf="/images/tree/cd.png" icon="/images/tree/cd.png">
<h:outputText value="#{item.title}" />
<rich:dndParam name="label" type="drag" value="Album: #{item.title}" />
</rich:treeNode>
<rich:treeNode type="song" dragType="song" iconLeaf="/images/tree/music.png" icon="/images/tree/music.png">
<h:outputText value="#{item.title}" />
<rich:dndParam name="label" type="drag" value="Song: #{item.title}" />
</rich:treeNode>
</rich:tree>
</h:form>
...
In the shown example a song from one album can be dragged into another because attribute "acceptedTypes" ="song" defined in the second treeNode with "type" ="album". Its value is equal to the value of the "type" attribute defined in the third treeNode (see picture below). An album can be also dragged into treeNode with "type" ="artist" property.
Listeners classes that process events on the server side are defined with the help of:
changeExpandListener processes expand/collapse event of a treeNode
dropListener processes a Drop event
dragListener processes a Drag event
nodeSelectListener is called during request sending on a node selecting event (if request sending on this event is defined)
Listener methods can be defined using the following attributes or using nested tags.
Client event attributes are:
onexpand is a script expression to invoke when a node is expanded
oncollapse is a script expression to invoke when a node is collapsed
ondragexit is a script expression to invoke when an element passing out from a tree zone
ondragstart is a script expression to invoke when dragging starts
ondragend is a script expression to invoke when dragging ends (a drop event)
ondragenter is a script expression to invoke when a dragged element appears on a tree
They can be used to add some JavaScript effects.
Standart HTML event attributes like "onclick" , "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.
For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.
There are two ways to redefine the appearance of all <rich:tree> components at once:
Redefine the corresponding skin parameters
Add to your style sheets style classes used by a <rich:tree> component
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.
Table 6.469. Skin parameters for a wrapper element
Skin parameters | CSS properties |
---|---|
overAllBackground | background-color |
Table 6.470. Classes names that define a component appearance
Class name | Description |
---|---|
rich-tree | Defines styles for a wrapper <div> element of a tree |
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 below:
Example:
...
.rich-tree{
font-weight:bold;
}
...
This is a result:
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 this case you should create own style classes and use them in corresponding <rich:tree> styleClass attributes. An example is placed below:
Example:
...
.myClass{
font-weight:bold;
}
...
The "highlightedClass" attribute for <rich:tree> is defined as it’s shown in the example below:
Example:
...
<rich:tree ... styleClass="myClass"/>
...
This is a result:
As it's shown on the picture above, font weight of highlighted text node of a tree was changed to bold.