The <rich:treeNode> component is designed for creating sets of tree elements within a <rich:tree> component.
Possibility to assign different icon images for each node within a tree
Drag and Drop support
Look-and-Feel customization
Table 6.471. rich : treeNode 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 |
ajaxSingle | if "true", submits ONLY one field/link, instead of all form controls |
ajaxSubmitSelection | An algorithm of AJAX request submission. "inherit", "true", "false" values are possible |
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 |
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 |
dropListener | MethodBinding representing an action listener method that will be notified after drop operation |
dropValue | Data to be processed after a drop event |
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 |
limitToList | If "true", updates on client side ONLY elements from this 'reRender' property. If "false" (default) updates all rendered by ajax region components |
nodeClass | Name of node CSS class |
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 |
oncontextmenu | JavaScript handler to be called on right click. Returning false prevents default browser context menu from being displayed |
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 object |
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 |
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 |
selectedClass | Corresponds to the HTML class attribute. Applied to selected node |
status | ID (in format of call UIComponent.findComponent()) of Request status component |
timeout | timeout in ms. |
type | A node type |
typeMapping | Map between a draggable type and an indicator name on zone. it's defined with the pair (drag type:indicator name)) |
Table 6.472. Component identification parameters
Name | Value |
---|---|
component-type | org.richfaces.TreeNode |
component-class | org.richfaces.component.html.HtmlTreeNode |
component-family | org.richfaces.TreeNode |
renderer-type | org.richfaces.TreeNodeRenderer |
tag-class | org.richfaces.taglib.TreeNodeTag |
Here is a simple example as it can be used on a page:
Example:
...
<rich:tree ... faceNode="simpleNode">
<rich:treeNode type="simpleNode">
<!--Tree node data displaying template-->
</rich:treeNode>
</rich:tree>
...
Example:
import org.richfaces.component.html.HtmlTreeNode;
...
HtmlTreeNode myPanel = new HtmlTreeNode();
...
The "icon" , "iconCollapsed" , "iconExpanded" , "iconLeaf" attributes define icons for the component. Also you can define icons using facets with the same names. If the facets are defined, the corresponding attributes are ignored and facets contents are used as icons. The width of a rendered facet area is 16px.
...
<rich:tree ...>
...
<rich:treeNode ...>
<f:facet name="icon">
<hutputText value="A"/>
</f:facet>
<f:facet name="iconCollapsed">
<hutputText value="B"/>
</f:facet>
<f:facet name="iconExpanded">
<hutputText value="C"/>
</f:facet>
<f:facet name="iconLeaf">
<hutputText value="D"/>
</f:facet>
</rich:treeNode>
...
</rich:tree>
...
As it has been mentioned above, <rich:treeNode> 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:
Example:
...
<rich:tree ... faceNode="simpleNode" ... value="#{bean.data}" var="data">
<rich:treeNode type="simpleNode">
<h:outputText value="context-param:"/>
<h:inputText value="#{data.name}"/>
</rich:treeNode>
</rich:tree >
...
Hence, <h:outputText /> tag outputs the "context-param" string and then the <h:inputText/> outputs the data.name element of this node.
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 treeNodesAdaptorAdaptor definition for nodes, see the tree component chapter.
Switching between expanded/collapsed modes is also managed on the tree level and defined in the corresponding section.
Default nodes of the tree level as well as the ones defined with the treeNodesAdaptorAdaptor component could send Ajax requests when selected with the mouse, it's managed with the "ajaxSubmitSelection" attribute (true/false).
Information about the "process" attribute usage you can find here.
The main information on Drag and Drop operations is given in the corresponding paragraph of the tree 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 <rich:draggable> and <rich:dropZone> components simultaneously.
Just as Drag and Drop operations it corresponds to the one described on the tree component level for a default Node.
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:treeNode> components at once:
Redefine the corresponding skin parameters
Add to your style sheets style classes used by a <rich:treeNode> component
Table 6.473. Skin parameters for a node element
Skin parameters | CSS properties |
---|---|
panelTextColor | color |
preferableDataSizeFont | font-size |
preferableDataFamilyFont | font-family |
Table 6.474. Skin parameters for a selected element
Skin parameters | CSS properties |
---|---|
headerBackgroundColor | border-color |
panelTextColor | color |
selectControlColor | color |
Table 6.475. Skin parameters for a mouseovered element
Skin parameters | CSS properties |
---|---|
selectControlColor | color |
On the screenshot there are classes names that define styles for component elements.
Table 6.476. Classes names that define a node element
Class name | Description |
---|---|
rich-tree-node | Defines styles for a tree node |
rich-tree-node-handleicon | Defines styles for a tree node handleicon |
rich-tree-node-children | Defines styles for all tree node subnodes |
rich-tree-node-text | Defines styles for a tree node text |
rich-tree-node-icon | Defines styles for a tree node icon |
rich-tree-node-icon-leaf | Defines styles for a tree node icon leaf |
Table 6.477. Classes names that define states for a node element
Class name | Description |
---|---|
rich-tree-node-selected | Defines styles for a selected tree node |
rich-tree-node-highlighted | Defines styles for a highlighted tree node |
rich-tree-node-handleicon-collapsed | Defines styles for a collapsed tree node handleicon |
rich-tree-node-handleicon-expanded | Defines styles for a expanded tree node handleicon |
In order to redefine the style for all <rich:treeNode> components on a page using CSS, it's enough to create classes with the same names and define the necessary properties in them.
To change the style of particular <rich:treeNode> components define your own style classes in the corresponding <rich:treeNode> attributes.
It is also possible to change look and feel of specific <rich:treeNode> with the help of defining for them "selectedClass" and "highlightedClass" attributes by their specific classes.
How to Expand/Collapse Tree Nodes from code see here.