1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
---
title: Tree
order: 26
layout: page
---
[[components.tree]]
= Tree
ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/tree"]
endif::web[]
[[components.tree.overview]]
== Overview
The [classname]#Tree# component allows a natural way to represent data that has hierarchical relationships.
The user can drill down in the hierarchy by expanding items by clicking on the expand arrow, and likewise collapse items.
[classname]#Tree# is a selection component that allows selecting items.
A typical use of the [classname]#Tree# component is for displaying a hierarchical menu, as illustrated in <<figure.components.tree>>, or for displaying file systems or hierarchical datasets.
[[figure.components.tree]]
.A [classname]#Tree# component
image::img/tree-basic.png[width=70%, scaledwidth=100%]
[[components.tree.data]]
== Binding to Data
[classname]#Tree# is used by binding it to a hierarchical data provider. The data provider can be based on in-memory or back end data. For in-memory data, the [classname]#TreeDataProvider# can be used, and for loading data from a back end, you need to implement three methods from the [interfacename]#HierarchicalDataProvider# interface. Usage of both data providers is described in
<<dummy/../../../framework/datamodel/datamodel-hierarchical.asciidoc#datamodel.hierarchical,"Hierarchical Data">>.
The [classname]#TreeData# class can be used to build the hierarchical data structure,
and it can then be passed on to [classname]#TreeDataProvider#. It is simply a hierarchical
collection, that the data provider uses to populate the [classname]#Tree#.
The [methodname]#setItems# method in [classname]#Tree# can be used to set the root level items. Internally
an [classname]#TreeDataProvider# with [classname]#TreeData# is used.
[source, java]
----
// An initial planet tree
Tree<String> tree = new Tree<>();
TreeData<String> treeData = new TreeData<>();
// Couple of childless root items
treeData.addItem(null,"Mercury");
treeData.addItem(null,"Venus");
// Items with hierarchy
treeData.addItem(null,"Earth");
treeData.addItem("Earth","The Moon");
inMemoryDataProvider = new TreeDataProvider<>(treeData);
tree.setDataProvider(inMemoryDataProvider);
tree.expand("Earth"); // Expand programmatically
----
If at any time you want to modify
the in-memory data in the tree, you may do it as follows:
[source, java]
----
// Add Mars with satellites
treeData.addItem(null, "Mars");
treeData.addItem("Mars", "Phobos");
treeData.addItem("Mars", "Deimos");
inMemoryDataProvider.refreshAll();
----
The result was shown in <<figure.components.tree>>.
The caption and the icon of tree items is generated by the [classname]#ItemCaptionGenerator# and the
[classname]#IconGenerator#, set with [methodname]#setItemCaptionGenerator()# and [methodname]#setItemIconGenerator()# respectively.
[[components.tree.selection]]
== Handling Selection and Clicks
[classname]#Tree# supports single selection mode, you can use [methodname]#asSingleSelect()# to access the selection
object, which supports selection listeners and data binding. For more details, see link:<<dummy/../../../framework/datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
The [classname]#Tree# also supports the shortcut method [methodname]#addSelectionListener()#.
[classname]#Tree# also emits [classname]##ItemClickEvent##s when items are clicked.
This way you can handle item clicks also when you want special user interaction specifically on clicks.
[source, Java]
----
tree.addItemClickListener(event ->
Notification.show("Click",
Notification.Type.HUMANIZED_MESSAGE)
);
----
[[components.tree.right.clicks]]
=== Right-clicks
Right-clicks are supported similar way via `addContextClickListener()` method
[source, java]
----
tree.addContextClickListener(event -> Notification.show(
((TreeContextClickEvent<Person>)event).getItem() + " Clicked")
);
----
[[components.tree.expandcollapse]]
== Expanding and Collapsing Nodes
[classname]#Tree# nodes that have children can be expanded and collapsed by either user interaction or through the server-side API:
[source, java]
----
// Expands a child project. If the child project is not yet
// in the visible hierarchy, nothing will be shown.
tree.expand(childProject);
// Expands the root project. If child project now becomes
// visible it is also expanded into view.
tree.expand(rootProject);
// Collapses the child project.
tree.collapse(childProject);
----
To use the server-side API with a backend data provider the [methodname]#hashCode# and [methodname]#equals# methods for the node's type must be implemented so that when the desired node is retrieved from the backend it can be correctly matched with the object passed to either [methodname]#expand# or [methodname]#collapse#.
The [classname]#Tree# component supports listening to the expansion and collapsing of items in its hierarchy.
The expand and collapse listeners can be added as follows:
[source, java]
----
tree.addExpandListener(event -> log("Item expanded: " + event.getExpandedItem()));
tree.addCollapseListener(event -> log("Item collapsed: " + event.getCollapsedItem()));
----
The return types of the methods `getExpandedItem` and `getCollapsedItem` are the same as the type of the [classname]#Tree# the events originated from.
Note that collapse listeners will not be triggered for any expanded subtrees of the collapsed item.
[[components.tree.node.collapsing]]
== Prevent Node Collapsing
[classname]#Tree# supports setting a callback method that can allow or prevent the user from collapsing an expanded node.
It can be set with [methodname]#setItemCollapseAllowedProvider# method, that takes a [interfacename]#ItemCollapseAllowedProvider#.
For nodes that cannot be collapsed, the [literal]#++collapse-disabled++# class name is applied to the expansion element
Avoid doing any heavy operations in the method, since it is called for each item when it is being sent to the client.
Example using a predefined set of persons that can not be collapsed:
[source, java]
----
Set<Person> alwaysExpanded;
personTree.setItemCollapseAllowedProvider(person ->
!alwaysExpanded.contains(person));
----
[[components.treegrid.keyboard]]
== Keyboard Navigation and Focus Handling in TreeGrid
The user can navigate through rows with kbd:[Up] and kbd:[Down], collapse rows with kbd:[Left],
and expand them with kbd:[Right].
[[components.tree.css]]
== CSS Style Rules
[source, css]
----
.v-tree8 {
.v-tree8-scroller, .v-tree8-scroller-horizontal { }
.v-tree8-tablewrapper {
.v-tree8-body {
.v-tree8-row,
.v-tree8-stripe,
.v-tree8-row-focused,
.v-tree8-row-has-data {
.v-tree8-expander, expanded {}
.v-tree8-cell-content {}
}
}
}
}
----
[[components.tree.css.itemstyles]]
=== Generating Item Styles
You can style each tree item individually by generating a style name for them with a [interfacename]#StyleGenerator#, which you assign to a tree with [methodname]#setStyleGenerator()#.
The generator should return a style name for each item or `null`.
[source, Java]
----
// Show all leaf nodes as disabled
tree.setStyleGenerator(item -> {
if (!tree.getDataProvider().hasChildren(item))
return "leaf";
return null;
}
);
----
[source, css]
----
.leaf .v-tree8-cell-content {
background-color:green
}
----
|
