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.
Styling in HaxeUI
There are several ways to style components in HaxeUI.
Fortunately, HaxeUI tries to follow the convenient CSS + HTML pattern so if you're familiar with those, you'll have no problem grasping this concept quickly.
You can style controls in code by accessing and setting values to the properties of their "style" property directly. This is the most obvious but the least convenient way to change the appearance of a component, so let's jump right into the CSS approach.
You can create CSS descriptions using the static StyleManager class, add them to the layout XML in a "style" node, or store them in a separate CSS file and load that.
Popups in HaxeUI
Popup windows can be used for various purposes, sometimes just requiring the user's confirmation of an action, other times telling them to wait until a process is done.
HaxeUI offers a very easy way to create and customize popups. There are 5 popup types that we can create - simple popups, list popups, busy popups, calendar popups and custom popups.
All popup activities are managed using the PopupManager class.
Let's start by creating a simple "busy" popup, which tells the user to wait, and disappears after 5 seconds.
IDs and Event listeners in HaxeUI
In the previous tutorial I showed how to use XML layouts to create interfaces using HaxeUI.
The controls we added through XML don't do much on their own, but their functionality can be added as soon as we get actual access to the elements we've created. This is done similarly to HTML - through the use of IDs.
Let's create a new layout which has a VBox container with multiple children, two of which have IDs set.
You can update the existing code from previous tutorial. Update the mainLayout.xml file to look like this:
Using XML layouts in HaxeUI
In the previous tutorial I explained how to install HaxeUI and display its components programmatically.
Adding UI elements using code allows for dynamic layout manipulation, but is not always convenient. It is much easier to store layouts separately from code in XML files, and HaxeUI has the ability to do so.
Before we delve into layout creation, I should mention UI themes. HaxeUI has several built-in themes that you can use to change the appearance of all the controls in your application.