68. HaxeUI roots

2014-11-14

In this tutorial we'll take a look at root management in HaxeUI.

According to the official HaxeUI wiki, a root is a "core component that HaxeUI uses for the drawing and layout of UI components".

Until now, we've only been using one root in all of the examples and we created it using Toolkit's openFullscreen() method. Each root is created asynchronously and acts as a separate entity. We can create new ones using the openPopup() method and position them differently on the screen.

This may come in handy when the HaxeUI interface does not need to take up the whole screen, but just a portion of it.

Using the openPopup() method we can create several roots with self-contained interfaces. The method accepts a Dynamic object as the first parameter, which lets you customize the positioning, size and styling of the root.

Toolkit.theme = new GradientTheme();

Toolkit.init();



Toolkit.openPopup( { x:20, y:20, width:130, height:130 }, function(root:Root) {

	var divider:Divider = new Divider();

	divider.text = "Root 1";

	root.addChild(divider);

	

	var button:Button = new Button();

	button.text = "Test button";

	button.x = 10;

	button.y = 35;

	root.addChild(button);

} );



Toolkit.openPopup( { x:170, y:20, width:130, height:130 }, function(root:Root) {

	var divider:Divider = new Divider();

	divider.text = "Root 2";

	root.addChild(divider);

	

	var button:Button = new Button();

	button.text = "Test button";

	button.x = 10;

	button.y = 35;

	root.addChild(button);

} );



Toolkit.openPopup( { x:20, y:170, width:280, height:130 }, function(root:Root) {

	var divider:Divider = new Divider();

	divider.text = "Root 3";

	root.addChild(divider);

	

	var button:Button = new Button();

	button.text = "Test button";

	button.x = 10;

	button.y = 35;

	root.addChild(button);

} );

You may also find the percentWidth and percentHeight properties useful when designing UIs for resizable windows.

A root can be accessed and removed through a RootManager instance.

Here's an example where the RootManager's destroyRoot() method is used to close a root by clicking a button inside of it:

Toolkit.openPopup( { x:20, y:320, width:100, height:100 }, function(root:Root) {

	var divider:Divider = new Divider();

	divider.text = "Root 4";

	root.addChild(divider);

	

	var button:Button = new Button();

	button.text = "Close";

	button.x = 10;

	button.y = 35;

	root.addChild(button);

	button.onClick = function (e:UIEvent) {

		RootManager.instance.destroyRoot(root);

	}

} );

You can also destroy all roots using the destroyAllRoots() method of the RootManager instance.