-
Notifications
You must be signed in to change notification settings - Fork 47
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>
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);
}
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.
- Getting Started
- Hello World Example
- Using Multiple Roots
- XML Based UIs
- Styling
- Using Themes
- Using Popups
- Using Layouts
- Using Controllers
- Dynamic Values
- Events and Handlers
- Custom Components
- Custom Layouts
- Buttons
- Calendars
- Checkboxes
- Images
- Menus
- Optionboxes
- Progressbars
- Scrollbars
- Sliderbars
- Spacers
- Tabbars
- Text Fields
- Text Inputs