class PopUpTreeView
package com.feathersui.controls
extends FeathersControl
implements IStageFocusDelegate, IDataSelector<Dynamic>
Displays a Button that may be triggered to display a TreeView as a
pop-up. The tree view may be customized to display in different ways, such
as a drop-down, inside a Callout, or as a modal overlay.
The following example creates a pop-up tree, gives it a data provider, tells the item renderer how to interpret the data, and listens for when the selection changes:
var popUpTreeView = new PopUpTreeView();
var collection = new ArrayHierarchicalCollection([
{
text: "Node 1",
children: [
{
text: "Node 1A",
children: [
{text: "Node 1A-I"},
{text: "Node 1A-II"},
{text: "Node 1A-III"},
{text: "Node 1A-IV"}
]
},
{text: "Node 1B"},
{text: "Node 1C"}
]
},
{
text: "Node 2",
children: [
{text: "Node 2A"},
{text: "Node 2B"},
{text: "Node 2C"}
]
},
{text: "Node 3"},
{
text: "Node 4",
children: [
{text: "Node 4A"},
{text: "Node 4B"},
{text: "Node 4C"},
{text: "Node 4D"},
{text: "Node 4E"}
]
}
]);
collection.itemToChildren = (item:Dynamic) -> {
return item.children;
};
popUpTreeView.dataProvider = collection;
popUpTreeView.itemToText = (item:Dynamic) -> {
return item.text;
};
popUpTreeView.addEventListener(Event.CHANGE, (event:Event) -> {
var popUpTreeView = cast(event.currentTarget, TreeView);
trace("PopUpTreeView changed: " + popUpTreeView.selectedLocation + " " + popUpTreeView.selectedItem.text);
});
this.addChild(popUpTreeView);Events:
openfl.events.Event.CHANGE | Dispatched when either
|
|---|---|
openfl.events.Event.OPEN | Dispatched when the pop-up tree view is opened. |
openfl.events.Event.CLOSE | Dispatched when the pop-up tree view is closed. |
feathers.events.TreeViewEvent.ITEM_TRIGGER | Dispatched when the user taps or clicks an item renderer in the pop-up tree view. The pointer must remain within the bounds of the item renderer on release, and the tree view cannot scroll before release, or the gesture will be ignored. |
feathersui-data-containers-pack 1.0.0
.See also:
feathers.controls.TreeView
Static variables
staticfinalread onlyCHILD_VARIANT_BUTTON:String = "popUpTreeView_button"
The variant used to style the Button child component in a theme.
To override this default variant, set the
PopUpTreeView.customButtonVariant property.
feathersui-data-containers-pack 1.0.0
.See also:
feathers.style.IVariantStyleObject.variant
staticfinalread onlyCHILD_VARIANT_TREE_VIEW:String = "popUpTreeView_treeView"
The variant used to style the TreeView child component in a theme.
To override this default variant, set the
PopUpTreeView.customTreeViewVariant property.
feathersui-data-containers-pack 1.0.0
.See also:
feathers.style.IVariantStyleObject.variant
Constructor
new(?dataProvider:IHierarchicalCollection<Dynamic>, ?changeListener:Event ‑> Void)
Creates a new PopUpTreeView object.
feathersui-data-containers-pack 1.0.0
.Variables
buttonFactory:AbstractDisplayObjectFactory<Dynamic, Button>
Creates the button, which must be of type feathers.controls.Button.
In the following example, a custom button factory is provided:
popUpTreeView.buttonFactory = () ->
{
return new Button();
};feathersui-data-containers-pack 1.0.0
.See also:
feathers.controls.Button
customButtonVariant:String
A custom variant to set on the button, instead of
PopUpTreeView.CHILD_VARIANT_BUTTON.
The customButtonVariant will be not be used if the result of
buttonFactory already has a variant set.
feathersui-data-containers-pack 1.0.0
.See also:
feathers.style.IVariantStyleObject.variant
customTreeViewVariant:String
A custom variant to set on the pop-up tree view, instead of
PopUpTreeView.CHILD_VARIANT_TREE_VIEW.
The customTreeViewVariant will be not be used if the result of
treeViewFactory already has a variant set.
feathersui-data-containers-pack 1.0.0
.See also:
feathers.style.IVariantStyleObject.variant
dataProvider:IHierarchicalCollection<Dynamic>
The collection of data displayed by the tree view.
Items in the collection must be class instances or anonymous structures. Do not add primitive values (such as strings, booleans, or numeric values) directly to the collection.
Additionally, all items in the collection must be unique object instances. Do not add the same instance to the collection more than once because a runtime exception will be thrown.
The following example passes in a data provider and tells the item renderer how to interpret the data:
var collection = new ArrayHierarchicalCollection([
{
text: "Node 1",
children: [
{
text: "Node 1A",
children: [
{text: "Node 1A-I"},
{text: "Node 1A-II"},
{text: "Node 1A-III"},
{text: "Node 1A-IV"}
]
},
{text: "Node 1B"},
{text: "Node 1C"}
]
},
{
text: "Node 2",
children: [
{text: "Node 2A"},
{text: "Node 2B"},
{text: "Node 2C"}
]
},
{text: "Node 3"},
{
text: "Node 4",
children: [
{text: "Node 4A"},
{text: "Node 4B"},
{text: "Node 4C"},
{text: "Node 4D"},
{text: "Node 4E"}
]
}
]);
collection.itemToChildren = (item:Dynamic) -> {
return item.children;
};
popUpTreeView.dataProvider = collection;
popUpTreeView.itemToText = (item:Dynamic) -> {
return item.text;
};feathersui-data-containers-pack 1.0.0
.itemRendererRecycler:AbstractDisplayObjectRecycler<Dynamic, TreeViewItemState, DisplayObject>
Manages item renderers used by the pop-up tree view.
In the following example, the pop-up tree view uses a custom item renderer class:
popUpTreeView.itemRendererRecycler = DisplayObjectRecycler.withClass(CustomItemRenderer);feathersui-data-containers-pack 1.0.0
.See also:
feathers.controls.dataRenderers.HierarchicalItemRendererfeathers.controls.dataRenderers.LayoutGroupItemRenderer
read onlyopen:Bool
Indicates if the tree view pop-up is open or closed.
feathersui-data-containers-pack 1.0.0
.See also:
popUpAdapter:IPopUpAdapter
Manages how the tree view is displayed when it is opened and closed.
In the following example, a custom pop-up adapter is provided:
popUpTreeView.popUpAdapter = new DropDownPopUpAdapter();feathersui-data-containers-pack 1.0.0
.prompt:String
The text displayed by the button when no item is selected.
The following example sets the pop-up tree view's prompt:
popUpTreeView.prompt = "Select an item";feathersui-data-containers-pack 1.0.0
.selectedItem:Dynamic
feathersui-data-containers-pack 1.0.0
.See also:
feathers.core.IDataSelector.selectedItem
selectedLocation:Array<Int>
The currently selected location. Returns null if no location is
selected.
The following example selects a specific location:
popUpTreeView.selectedLocation = [2, 0];
The following example clears the currently selected location:
popUpTreeView.selectedLocation = null;
The following example listens for when the selection changes, and it prints the new selected location to the debug console:
var popUpTreeView = new PopUpTreeView();
function changeHandler(event:Event):Void
{
var popUpTreeView = cast(event.currentTarget, PopUpTreeView);
trace("selection change: " + popUpTreeView.selectedLocation);
}
popUpTreeView.addEventListener(Event.CHANGE, changeHandler);feathersui-data-containers-pack 1.0.0
.treeViewFactory:AbstractDisplayObjectFactory<Dynamic, TreeView>
Creates the tree view that is displayed as a pop-up. The tree view must
be of type feathers.controls.TreeView.
In the following example, a custom tree view factory is provided:
popUpTreeView.treeViewFactory = () ->
{
return new TreeView();
};feathersui-data-containers-pack 1.0.0
.See also:
feathers.controls.TreeView
Methods
closeTreeView():Void
Closes the pop-up tree, if it is open.
The following example closes the pop-up tree:
if(popUpTreeView.open)
{
popUpTreeView.closeTreeView();
}
When the pop-up tree closes, the component will dispatch an event of
type Event.CLOSE.
feathersui-data-containers-pack 1.0.0
.See also:
dynamicitemToEnabled(data:Dynamic):Bool
Determines if an item should be enabled or disabled. By default, all
items are enabled, unless the PopUpTreeView is disabled. This method
may be replaced to provide a custom value for enabled.
For example, consider the following item:
{ text: "Example Item", disable: true }
If the PopUpTreeView should disable an item if the disable field is
true, a custom implementation of itemToEnabled() might look like
this:
popUpTreeView.itemToEnabled = (item:Dynamic) -> {
return !item.disable;
};feathersui-data-containers-pack 1.0.0
.dynamicitemToText(data:Dynamic):String
Converts an item to text to display within the Button, if the item is
selected. 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 Button should display the text "Example Item", a custom
implementation of itemToText() might look like this:
popUpTreeView.itemToText = (item:Dynamic) -> {
return item.text;
};feathersui-data-containers-pack 1.0.0
.openTreeView():Void
Opens the pop-up tree, if it is not already open.
The following example opens the pop-up tree:
if(!popUpTreeView.open)
{
popUpTreeView.openTreeView();
}
When the pop-up tree opens, the component will dispatch an event of type
Event.OPEN.
feathersui-data-containers-pack 1.0.0
.See also: