Tree

Overview

Since 3.2

The ace:tree component is used for the display of hierarchical data. The data can be supplied to the tree as a List of a javax.swing.tree.TreeNode implementer or as an instance of a NodeDataModel. For lazy loading cases an abstract implementation of NodeDataModel, LazyNodeDataModel should be implemented and supplied.

See the ICEfaces Showcase Live Demo of this component, complete with source code.

Getting Started

<ace:tree id="tree"
          expansion="true"
          selection="true"
          reordering="true"
          value="#{treeBean.treeRoots}"
          stateCreationCallback="#{treeBean.contractProvinceInit}"
          var="node"
          stateMap="#{treeBean.stateMap}"
          stateVar="nState"
          type="#{node.type}">
        <ace:node type="country">
            Country: <h:outputText value="#{node.name}" />
        </ace:node>
        <ace:node type="province">
            Province: <h:outputText value="#{node.name}" />
        </ace:node>
        // Default node type
        <ace:node>
            City: <h:outputText value="#{node.name}" />
        </ace:node>
</ace:tree>

Attributes

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

expansion: Enable the expansion of nodes via clicks to the expansion icons.

selection: Enable the selection & deselection of nodes via clicks to the node body.

reordering: Enable the reordering of nodes by click-dragging the nodes.

value: The node data of the tree, a List of TreeNode objects or a NodeDataModel.

stateCreationCallback: Enables use of a NodeStateCreationCallback, which lazily initializes the component NodeStates based on a given node data object.

var: Specifies the request-scope attribute which will expose the current node data object.

stateMap: Define a NodeStateMap ValueExpression to access the store of ace:tree node data object state information. The state map provides an API for looking up the state of a particular node object, as well as reverse look-ups to get node objects with a particular state.

stateVar: Specifies the request-scope attribute which will expose the NodeState object the current node data object.

type: Defines a ValueExpression for a String that will evaluate per-node data object to determine which ace:node template will be rendered by matching that String against the type property of the ace:node components.

Client Behaviour Events

Name	Description
select	Fired when a node is clicked & selected.
deselect	Fired when a node is clicked & deselected.
expand	Fired when a node expansion switch is clicked to reveal subnodes.
contract	Fired when a node expansion switch is clicked to hide subnodes.
reorder	Fired when an item is dropped into a new position.

CSS Classes

The following markup represents the basic HTML structure of the component and the CSS classes it uses.

<!-- Root container -->
<span class="if-tree if-node-sub ui-widget-content ui-corner-all ui-sortable">
	<table class="if-node-cnt">
		<tbody>
			<!-- 1st level node -->
			<tr class="if-node-tr">
				<td class="if-node-sw">
					<div class="if-node-ln">
						<img />
						<span class="ui-icon ui-icon-minus"></span>
					</div>
				</td>
				<td class="if-node">
					<div class="if-node-wrp">
						Item label
					</div>
				</td>
			</tr>
			<tr class="if-node-tr">
				<td class="if-node-td">
					<div class="if-node-ln">
						<img />
					</div>
				</td>
				<td class="if-node-sub ui-sortable">
					<table class="if-node-cnt">
						<tbody>
							<!-- 2nd level node -->
							<tr class="if-node-tr">
								<td class="if-node-sw">
									<div class="if-node-ln">
										<img />
										<span class="ui-icon ui-icon-minus"></span>
									</div>
								</td>
								<td class="if-node">
									<div class="if-node-wrp">
										Item label
									</div>
								</td>
							</tr>
							<tr class="if-node-tr">
								<td class="if-node-td">
									<div class="if-node-ln">
										<img />
									</div>
								</td>
								<td class="if-node-sub ui-sortable">
									<table class="if-node-cnt">
										<tbody>
											<!-- 3rd level node -->
											<tr class="if-node-tr">
												<td class="if-node-sw">
													<div class="if-node-ln">
														<img />
													</div>
												</td>
												<td class="if-node">
													<div class="if-node-wrp">
														Item label
													</div>
												</td>
											</tr>
											<tr class="if-node-tr">
												<td class="if-node-td">
													<div class="if-node-ln">
														<img />
													</div>
												</td>
												<td class="if-node-sub"></td>
											</tr>
										</tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<table class="if-node-cnt">
						<tbody>
							<!-- 1st level node -->
							<tr class="if-node-tr">
								<td class="if-node-sw">
									<div class="if-node-ln">
										<img />
										<span class="ui-icon ui-icon-plus"></span>
									</div>
								</td>
								<td class="if-node">
									<div class="if-node-wrp">
										Item label
									</div>
								</td>
							</tr>
							<tr class="if-node-tr">
								<td class="if-node-td">
									<div class="if-node-ln">
										<img />
									</div>
								</td>
								<td class="if-node-sub ui-sortable"></td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
		</tbody>
	</table>
</span>