70. ListView in HaxeUI

2014-11-20

HaxeUI's ListView control is a list of selectable items, similar in appearance and name to the ListView control in Android.

The list can be created and populated using an XML layout, or programmatically.

Like many HaxeUI components, ListView is scrollable (with the scrollbar appearance depending on the chosen theme).

Let's create a simple ListView populated by a few different items. I'm going to use an XML layout to do that, you might want to read my XML layout tutorial first.

Here's the layout:

<?xml version="1.0" encoding="utf-8" ?>

<listview width="150" height="150" id="myList">

	<array>

		Apple,

		Orange,

		Pear,

		Banana,

		Grapes,

		Pineapple,

		Plum,

		Peach

	</array>

</listview>

You can see that the items are listed in an "array" node, separated by commas.

Here the layout with the ListView is added to the stage:

Toolkit.theme = new GradientTheme();

Toolkit.init();



Toolkit.openFullscreen(function(root:Root) {

	var view:IDisplayObject = Toolkit.processXmlResource("layouts/mainLayout.xml");

	root.addChild(view);

});

We can add items to the data provider dynamically. Here's an example:

Toolkit.theme = new GradientTheme();

Toolkit.init();



Toolkit.openFullscreen(function(root:Root) {

	var view:IDisplayObject = Toolkit.processXmlResource("layouts/mainLayout.xml");

	root.addChild(view);

	

	var list:ListView = root.findChild("myList", ListView, true);

	

	list.dataSource.add({text:"Horse radish"});

});

This control uses a dataSource object to render its items. You can access it to manipulate the list data.

You can also listen to item selection events by adding an onChange event listener:

Toolkit.theme = new GradientTheme();

Toolkit.init();



Toolkit.openFullscreen(function(root:Root) {

	var view:IDisplayObject = Toolkit.processXmlResource("layouts/mainLayout.xml");

	root.addChild(view);

	

	var list:ListView = root.findChild("myList", ListView, true);

	

	list.dataSource.add({text:"Horse radish"});

	

	list.onChange = function(e:UIEvent) {

		trace(list.selectedIndex);

	}

});

The selectedIndex property is used to get the index of the item that was just clicked.