haxeui-core icon indicating copy to clipboard operation
haxeui-core copied to clipboard

Adding support for Tree in Listview

Open elnabo opened this issue 8 years ago • 0 comments

Add the possibility to put trees, which can be folded, in a ListView.

Tested on haxeui-html5 and haxeui-hxwidget (using Button instead of Label in the renderer see #137).

I'll try to add a screenshot later.

  • [x] Screenshot http://imgur.com/NeIgDeA
  • [ ] Fix code climate

Example

class Main {

	public static function main() {

		Toolkit.theme = "native";
		var app = new HaxeUIApp();
		app.ready(function() {

			var main:Component = ComponentMacros.buildComponent("assets/ui/main.xml");
			var listview:ListView = main.findComponent("list");

			var subTransformer:IItemTransformer<String> = cast new NativeTypeTransformer();
	
			var dataSource = new ArrayDataSource<{label:String, data:DataSource<String>}>();
			var subDataSource = new ArrayDataSource<String>(subTransformer);
			subDataSource.add("1");
			subDataSource.add("2");
			dataSource.add({label:"a", data:subDataSource});

			subDataSource = new ArrayDataSource<String>(subTransformer);
			subDataSource.add("3");
			dataSource.add({label:"b", data:subDataSource});

			listview.itemRendererFunction = function(data:Dynamic) {
				return new ClassFactory<ItemRenderer>(
					cast Type.resolveClass("haxe.ui.core.TreeItemRenderer"),
					["data" => data]
				);
			}
			listview.dataSource = dataSource;
			app.addComponent(main);
			app.start();

		});
	}
}
<?xml version="1.0" encoding="utf-8"?>
<hbox id="main" width="100%" height="100%">
<style source="../css/main.css" />
    <listview id="list" width="30%" height="100%"/>

    <textarea id="chapter" width="70%" height="100%"/>
</hbox>

elnabo avatar Jun 07 '17 20:06 elnabo