63. Introduction to HaxeUI

2014-11-03

HaxeUI is an OpenFL-based UI library.

You can use it in any OpenFL project to quickly add complex interface components to your application or game. All components are completely skinnable.

In this tutorial I'll show you how to install the library and create a simple application with a button.

Accomplishing this is actually not as obvious as it sounds, because HaxeUI components are not added directly to the display list using addChild(), but employ a Toolkit system which lets you create a number of "root" containers (usually just one) for drawing and managing all the UI controls.

To download HaxeUI, you can use haxelib.

haxelib install haxeui

Create an OpenFL project using the default template and add haxeui to the used libraries in application.xml:

<haxelib name="haxeui" />

Go to the init() function and initialize HaxeUI by calling a static init() function of the Toolkit class:

Toolkit.init();

As I said above, you don't add UI controls to the display list - they are supposed to be added to a root, which is a core component (that I will cover in detail later) that is created asynchronously by the HaxeUI toolkit system.

Usually, one root is enough for most applications. It is created using the static openFullscreen() method of the Toolkit class, and receives a function as the parameter, which is called asynchronously to create all the UI components.

Example:

Toolkit.openFullscreen(function(root:Root) {



});

Adding UI controls is very straight forward.

Without further ado, here's an example with a button and a click listener, which changes the button's label when it's clicked:

Toolkit.openFullscreen(function(root:Root) {

	var b:Button = new Button();

	b.text = "Test button";

	b.x = 10;

	b.y = 10;

	root.addChild(b);

	

	b.addEventListener(UIEvent.CLICK, function(evt:UIEvent) {

		evt.component.text = "Clicked";

	});

});

You can see that I used the root object, which is passed as a parameter of the function, to add the button using the addChild() method.

You can build your interface just like that - by adding components to the root programmatically.

Another way is to store UI layouts in XML files. I'll cover that in the next tutorial.