Events and Handlers

The first thing to do before listening to events and assigning handlers is to get the desired component. Typically a lot of the widgets are created using xml, one way to access them is using findChild() or findChildAs()

Those methods can be called from any Component, from Root or from an XMLController, the following example shows how how to get specific components in different ways.

class UI
{
	var _root:Root;
	
	public function new() {
		
		Toolkit.theme = new GradientTheme();
		Toolkit.init();
		
		_root = Toolkit.openFullscreen();
		_root.addChild(Toolkit.processXmlResource("assets/ui.xml"); );
		
		// gets first child of root that is a VBox
		var vbox = _root.findChildAs(VBox);
		
		// gets first child of vbox that is a button
		var button = vbox.findChildAs(Button);
		
		// gets vbox child with id "unique_ID_1" and casts it to Button.
		button = vbox.findChild("unique_ID_1", Button);
		
		// recursively finds child with id "unique_ID_1" and casts it to Button.
		button = root.findChild("unique_ID_2", Button, true);
	}

}

and the ui.xml:

<?xml version="1.0" encoding="utf-8" ?>
<vbox >
	<button />
	<button id="unique_ID_1" />
	<button id="unique_ID_2" />
</vbox>

Adding Listeners

Events can be listened from any component by assigning a callback / handler to any UIEvent type for example:

....
	var button = new Button();
	button.onClick = onClickButton();
....

function onClickButton(e:UIEvent) {
}

the syntax used is : "on" + UIEvent type (with first letter uppercase).

The list of all event callbacks that can be assigned:

• onInit
• onResize
• onReady
• onClick
• onMouseDown
• onMouseUp
• onMouseOver
• onMouseOut
• onMouseMove
• onDoubleClick
• onRollOver
• onRollOut
• onChange
• onScroll
• onAdded
• onAddedToStage
• onRemoved
• onRemovedFromStage
• onActivate
• onDeactivate
• onGlyphClick

Once inside the handler, use event.component to retrieve the component that dispatched the event, like so:

function onClickButton(e:UIEvent) {
	var button = cast(e.component, Button);
}

Using addEventListener

Another way to add listeners is to use addEventListener like normally using openfl api and listen for UIEvent events:

....
	var button = new Button();
	button.addEventListener(UIEvent.CLICK, onClickButton);
....

function onClickButton(e:UIEvent) {
}

This allows to add multiple listeners for the same event.

It is also possible to use standard events like MouseEvent.CLICK or Event.REMOVED, the downside is that there is no way to retrieve the component associated to the event.