Renders a Button that, when triggered, opens a series of cascading ListView components, displayed as pop-ups. Each ListView displays a single branch from a hierarchical data collection, and the user drills down into the data by triggering an item from each list view.

Only the leaves of the data provider may be selected. Branches are not allowed to be selected by the CascadeListView. Triggering a branch merely opens the next ListView with its children.

The following example creates a cascading list view, gives it a data provider, tells the item renderer how to interpret the data, and listens for when the selection changes:

var cascadeListView = new CascadeListView();

var collection = new ArrayHierarchicalCollection([
	{
		text: "Canada",
		children: [
			{
				text: "Ontario",
				children: [
					{text: "Ottawa"},
					{text: "Toronto"},
				]
			},
			{
				text: "Quebec",
				children: [
					{text: "Montreal"},
					{text: "Quebec City"},
				]
			}
		]
	},
	{
		text: "United Kingdom",
		children: [
			{text: "Bristol"},
			{text: "London"},
			{text: "Manchester"},
			{text: "Newcastle"},
		]
	},
	{
		text: "United States",
		children: [
			{
				text: "California",
				children: [
					{text: "Los Angeles"},
					{text: "Sacramento"},
					{text: "San Diego"},
					{text: "San Francisco"},
				]
			},
			{
				text: "New York",
				children: [
					{text: "Albany"},
					{text: "Buffalo"},
					{text: "New York City"},
					{text: "Rochester"},
				]
			},
			{
				text: "Texas",
				children: [
					{text: "Austin"},
					{text: "Dallas"},
					{text: "El Paso"},
					{text: "Houston"},
				]
			},
		]
	}
]);
collection.itemToChildren = (item:Dynamic) -> {
	return item.children;
};
cascadeListView.dataProvider = collection;

cascadeListView.itemToText = (item:Dynamic) -> {
	return item.text;
};

cascadeListView.prompt = "Select a City";

cascadeListView.addEventListener(Event.CHANGE, (event:Event) -> {
	var cascadeListView = cast(event.currentTarget, CascadeListView);
	trace("CascadeListView changed: " + cascadeListView.selectedLocation + " " + cascadeListView.selectedItem.text);
});

this.addChild(cascadeListView);

Events:

openfl.events.Event.CHANGE

Dispatched when either CascadeListView.selectedItem or CascadeListView.selectedLocation changes.

openfl.events.Event.OPEN

Dispatched when the pop-up list views are opened.

openfl.events.Event.CLOSE

Dispatched when the pop-up list views are closed.

feathers.events.ListViewEvent.ITEM_TRIGGER

Dispatched when the user taps or clicks an item renderer in the pop-up list view. The pointer must remain within the bounds of the item renderer on release, and the list view cannot scroll before release, or the gesture will be ignored.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

Static variables

@:value("cascadeListView_button")staticfinalread onlyCHILD_VARIANT_BUTTON:String = "cascadeListView_button"

The variant used to style the Button child component in a theme.

To override this default variant, set the CascadeListView.customButtonVariant property.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

@:value("cascadeListView_listView")staticfinalread onlyCHILD_VARIANT_LIST_VIEW:String = "cascadeListView_listView"

The variant used to style the cascading ListView child components in a theme.

To override this default variant, set the CascadeListView.customListViewVariant property.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

Constructor

new(?dataProvider:IHierarchicalCollection<Dynamic>, ?changeListener:Event ‑> Void)

Creates a new CascadeListView object.

Available since

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:

cascadeListView.buttonFactory = () ->
{
	return new Button();
};
Available since

feathersui-data-containers-pack 1.0.0

.

See also:

  • feathers.controls.Button

@:style@:flash.propertycustomButtonVariant:String

A custom variant to set on the button, instead of CascadeListView.CHILD_VARIANT_BUTTON.

The customButtonVariant will be not be used if the result of buttonFactory already has a variant set.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

@:style@:flash.propertycustomListViewVariant:String

A custom variant to set on the cascading list views, instead of CascadeListView.CHILD_VARIANT_LIST_VIEW.

The customListViewVariant will be not be used if the result of listViewFactory already has a variant set.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

@:bindable("dataChange")dataProvider:IHierarchicalCollection<Dynamic>

The collection of data displayed by the cascading list 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;
};
cascadeListView.dataProvider = collection;

cascadeListView.itemToText = (item:Dynamic) -> {
	return item.text;
};
Available since

feathersui-data-containers-pack 1.0.0

.

itemRendererRecycler:AbstractDisplayObjectRecycler<Dynamic, ListViewItemState, DisplayObject>

Manages item renderers used by the cascading list view.

In the following example, the cascading list uses a custom item renderer class:

cascadeListView.itemRendererRecycler = DisplayObjectRecycler.withClass(CustomItemRenderer);
Available since

feathersui-data-containers-pack 1.0.0

.

See also:

  • feathers.controls.dataRenderers.ItemRenderer

  • feathers.controls.dataRenderers.LayoutGroupItemRenderer

listViewFactory:AbstractDisplayObjectFactory<Dynamic, ListView>

Creates the cascading list views that are displayed as pop-ups. The list views must be of type feathers.controls.ListView.

In the following example, a custom list view factory is provided:

cascadeListView.listViewFactory = () ->
{
	return new ListView();
};
Available since

feathersui-data-containers-pack 1.0.0

.

See also:

  • feathers.controls.ListView

read onlyopen:Bool

Indicates if the cascading list view pop-ups are open or closed.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

@:style@:flash.propertypopUpAdapter:IPopUpAdapter

Manages how the cascading list views are displayed when it is opened and closed.

In the following example, a custom pop-up adapter is provided:

cascadeListView.popUpAdapter = new DropDownPopUpAdapter();
Available since

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 button's prompt:

cascadegListView.prompt = "Select an item";
Available since

feathersui-data-containers-pack 1.0.0

.

@:bindable("change")selectedItem:Dynamic

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

  • feathers.core.IDataSelector.selectedItem

@:bindable("change")selectedLocation:Array<Int>

The currently selected location. Returns null if no location is selected.

The following example selects a specific location:

cascadeListView.selectedLocation = [2, 0];

The following example clears the currently selected location:

cascadeListView.selectedLocation = null;

The following example listens for when the selection changes, and it prints the new selected location to the debug console:

var cascadeListView = new CascadeListView();
function changeHandler(event:Event):Void
{
	var cascadeListView = cast(event.currentTarget, CascadeListView);
	trace("selection change: " + cascadeListView.selectedLocation);
}
cascadeListView.addEventListener(Event.CHANGE, changeHandler);
Available since

feathersui-data-containers-pack 1.0.0

.

Methods

closeListView():Void

Closes the pop-up lists, if they are open.

The following example closes the pop-up lists:

if(cascadeListView.open)
{
	cascadeListView.closeListView();
}

When the pop-up lists close, the component will dispatch an event of type Event.CLOSE.

Available since

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 CascadeListView 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 CascadeListView should disable an item if the disable field is true, a custom implementation of itemToEnabled() might look like this:

cascadeListView.itemToEnabled = (item:Dynamic) -> {
	return !item.disable;
};
Available since

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:

cascadeListView.itemToText = (item:Dynamic) -> {
	return item.text;
};
Available since

feathersui-data-containers-pack 1.0.0

.

openListView():Void

Opens the pop-up lists, if they are not already open.

The following example opens the pop-up lists:

if(!cascadeListView.open)
{
	cascadeListView.openListView();
}

When the pop-up lists open, the component will dispatch an event of type Event.OPEN.

Available since

feathersui-data-containers-pack 1.0.0

.

See also: