class TreeView
package feathers.controls
extends BaseScrollContainer › FeathersControl › MeasureSprite › ValidatingSprite
implements IDataSelector<Dynamic>
Displays a hierarchical tree of items. Supports scrolling, custom item renderers, and custom layouts.
The following example creates a tree, gives it a data provider, tells the item renderer how to interpret the data, and listens for when the selection changes:
var treeView = new TreeView();
treeView.dataProvider = new TreeCollection([
new TreeNode({text: "Node 1"}, [
new TreeNode({text: "Node 1A"}, [
new TreeNode({text: "Node 1A-I"}),
new TreeNode({text: "Node 1A-II"}),
new TreeNode({text: "Node 1A-III"}),
new TreeNode({text: "Node 1A-IV"})
]),
new TreeNode({text: "Node 1B"}),
new TreeNode({text: "Node 1C"})
]),
new TreeNode({text: "Node 2"}, [
new TreeNode({text: "Node 2A"}),
new TreeNode({text: "Node 2B"}),
new TreeNode({text: "Node 2C"})
]),
new TreeNode({text: "Node 3"}),
new TreeNode({text: "Node 4"}, [
new TreeNode({text: "Node 4A"}),
new TreeNode({text: "Node 4B"}),
new TreeNode({text: "Node 4C"}),
new TreeNode({text: "Node 4D"}),
new TreeNode({text: "Node 4E"})
])
]);
treeView.itemToText = (item:TreeNode<Dynamic>) -> {
return item.data.text;
};
treeView.addEventListener(Event.CHANGE, (event:Event) -> {
var treeView = cast(event.currentTarget, TreeView);
trace("TreeView changed: " + treeView.selectedLocation + " " + treeView.selectedItem.text);
});
this.addChild(treeView);1.0.0
.See also:
Static variables
staticfinalread onlyVARIANT_BORDER:String = "border"
A variant used to style the tree view with a border. This variant is used by default on desktop.
The following example uses this variant:
var treeView = new TreeView();
treeView.variant = TreeView.VARIANT_BORDER;1.0.0
.See also:
staticfinalread onlyVARIANT_BORDERLESS:String = "borderless"
A variant used to style the tree view without a border. The variant is used by default on mobile.
The following example uses this variant:
var treeView = new TreeView();
treeView.variant = TreeView.VARIANT_BORDERLESS;1.0.0
.See also:
Constructor
Variables
dataProvider:IHierarchicalCollection<Dynamic>
The collection of data displayed by the tree view.
The following example passes in a data provider and tells the item renderer how to interpret the data:
treeView.dataProvider = new TreeCollection([
new TreeNode({text: "Node 1"}, [
new TreeNode({text: "Node 1A"}, [
new TreeNode({text: "Node 1A-I"}),
new TreeNode({text: "Node 1A-II"}),
new TreeNode({text: "Node 1A-III"}),
new TreeNode({text: "Node 1A-IV"})
]),
new TreeNode({text: "Node 1B"}),
new TreeNode({text: "Node 1C"})
]),
new TreeNode({text: "Node 2"}, [
new TreeNode({text: "Node 2A"}),
new TreeNode({text: "Node 2B"}),
new TreeNode({text: "Node 2C"})
]),
new TreeNode({text: "Node 3"}),
new TreeNode({text: "Node 4"}, [
new TreeNode({text: "Node 4A"}),
new TreeNode({text: "Node 4B"}),
new TreeNode({text: "Node 4C"}),
new TreeNode({text: "Node 4D"}),
new TreeNode({text: "Node 4E"})
])
]);
treeView.itemToText = (item:Dynamic) -> {
return item.text;
};1.0.0
.itemRendererRecycler:DisplayObjectRecycler<Dynamic, TreeViewItemState, DisplayObject>
Manages item renderers used by the tree view.
In the following example, the tree view uses a custom item renderer class:
treeView.itemRendererRecycler = DisplayObjectRecycler.withClass(CustomItemRenderer);1.0.0
.layout:ILayout
The layout algorithm used to position and size the tree view's items.
By default, if no layout is provided by the time that the tree view initializes, a default layout that displays items vertically will be created.
The following example tells the tree view to use a horizontal layout:
var layout = new HorizontalListLayout();
layout.gap = 20.0;
layout.padding = 20.0;
treeView.layout = layout;1.0.0
.pointerSelectionEnabled:Bool = true
Indicates if selection is changed with MouseEvent.CLICK or
TouchEvent.TOUCH_TAP when the item renderer does not implement the
IToggle interface. If set to false, all item renderers must control
their own selection manually (not only ones that implement IToggle).
The following example disables pointer selection:
treeView.pointerSelectionEnabled = false;1.0.0
.selectable:Bool
Determines if items in the tree view may be selected. By default only a single item may be selected at any given time. In other words, if item A is already selected, and the user selects item B, item A will be deselected automatically.
The following example disables selection of items in the tree view:
treeView.selectable = false;See also:
selectedLocation:Array<Int>
The currently selected location. Returns null if no location is
selected.
The following example selects a specific location:
treeView.selectedLocation = [2, 0];The following example clears the currently selected location:
treeView.selectedLocation = null;The following example listens for when the selection changes, and it prints the new selected location to the debug console:
var treeView = new TreeView();
function changeHandler(event:Event):Void
{
var treeView = cast(event.currentTarget, TreeView);
trace("selection change: " + treeView.selectedLocation);
}
treeView.addEventListener(Event.CHANGE, changeHandler);1.0.0
.virtualLayout:Bool
Indicates if the tree view's layout is allowed to virtualize items or not.
The following example disables virtual layouts:
treeView.virtualLayout = false;1.0.0
.Methods
isBranchOpen(branch:Dynamic):Bool
Indicates if a branch is currently opened or closed. If the object is
not a branch, or does not exist in the data provider, returns false.
1.0.0
.itemRendererToItem(itemRenderer:DisplayObject):Dynamic
Returns the current item from the data provider that is rendered by a specific item renderer.
1.0.0
.itemToItemRenderer(item:Dynamic):DisplayObject
Returns the current item renderer used to render a specific item from
the data provider. May return null if an item doesn't currently have
an item renderer.
Note: Most tree views use "virtual" layouts, which means that only the currently-visible subset of items will have an item renderer. As the tree view scrolls, the items with item renderers will change, and item renderers may even be re-used to display different items.
1.0.0
.dynamicitemToText(data:Dynamic):String
Converts an item to text to display within tree view. By default, the
toString() method is called to convert an item to text. This method
may be replaced to provide custom text.
For example, consider the following item:
{ text: "Example Item" }If the TreeView should display the text "Example Item", a custom
implementation of itemToText() might look like this:
treeView.itemToText = (item:Dynamic) -> {
return item.text;
};1.0.0
.scrollToLocation(location:Array<Int>, ?animationDuration:Float):Void
Scrolls the list view so that the specified item renderer is completely visible. If the item renderer is already completely visible, does not update the scroll position.
A custom animation duration may be specified. To update the scroll
position without animation, pass a value of 0.0 for the duration.
@since 1.0.0