Build Macro

The mxhx.macros.MXHXComponent.build() macro allows part of a Haxe class to be generated from the contents of a .mxhx file. The .mxhx file will contain declarations of the GUI, while the .hx class file will contain methods and fields for the class that can reference elements by id from the MXHX side.

Consider the following two files, MyComponent.hx and MyComponent.mxhx.

// MyComponent.hx
import feathers.controls.LayoutGroup;

@:build(mxhx.macros.MXHXComponent.build())
class MyComponent extends LayoutGroup {
  public function new() {
    super();
  }
}

<!-- MyComponent.mxhx -->
<?xml version="1.0" encoding="utf-8"?>
<f:LayoutGroup xmlns:mx="https://ns.mxhx.dev/2024/basic"
  xmlns:f="https://ns.feathersui.com/mxhx">
  <f:Button id="myButton" text="Click Me"/>
</f:LayoutGroup>

Add @:build(mxhx.macros.MXHXComponent.build()) metadata to your Haxe class declaration to use an .mxhx file to generate part of the class.

By default, the .hx and .mxhx files should have the same name, except for the file extension. If your Haxe class is named MyComponent.hx, the corresponding MXHX file should be named MyComponent.mxhx.

The Haxe class must extend the same class as the root tag used in the .mxhx file. The example above uses Feathers UI's <f:LayoutGroup> as the root tag, which represents the class feathers.controls.LayoutGroup.

In MyComponent.mxhx file, a <f:Button> component is declared with the id set to myButton. This will automatically generate a field on MyComponent class with the name myButton.

Inside MyComponent.hx, this new myButton field may be referenced to add event listeners, or change properties on the Button component.

// MyComponent.hx
import feathers.controls.LayoutGroup;

@:build(mxhx.macros.MXHXComponent.build())
class MyComponent extends LayoutGroup {
  public function new() {
    super();
    button.addEventListener(TriggerEvent.TRIGGER, onButtonTrigger);
  }

  private function onButtonTrigger(event:TriggerEvent):Void {
    trace("triggered the button!");
  }
}