haxeui-flixel

haxeui-flixel is the Flixel backend for HaxeUI.

Installation

haxeui-flixel relies on haxeui-core as well as Flixel. At the moment, haxeui-flixel is intended to be used with dev versions of Flixel. To install:

haxelib git flixel https://github.com/HaxeFlixel/flixel
haxelib install haxeui-core
haxelib install haxeui-flixel

Also note that as of right now, Flixel has dependencies but can only run on OpenFL 3.6.1 and Lime 2.9.1.

Usage

After installing Lime, OpenFL, Flixel, haxeui-core, and haxeui-flixel, the latter three should be included in project.xml. In the future, including haxeui-flixel will also handle the dependencies automatically.

<haxelib name="flixel" />
<haxelib name="haxeui-core" />
<haxelib name="haxeui-flixel" />

Toolkit initialization and usage

Before you start using HaxeUI in your project, you must first initialize the Toolkit. You can specify a FlxGroup to act as the container for the UI.

var myContainer = new FlxGroup();
Toolkit.init( { container : myContainer } );
add(myContainer);

You can also do:

Toolkit.init( { } ); // defaults to FlxG.state
Toolkit.init( { container : this } ); // "this" FlxState, or whatever else "this" is referring to (has to extend FlxGroup)
Toolkit.init( { container : myFlxSpriteGroup.group } ); // FlxSpriteGroup as the container

Once the toolkit is initialized, you can add components using the methods specified here.

You can configure haxeui-flixel to use a spritesheet (FlxAtlasFrames) as a source for assets. The initialization becomes:

var myContainer = new FlxGroup();
var myAtlas = FlxAtlasFrames.fromTexturePackerSource(...);
Toolkit.init( { container : myContainer, spritesheet : myAtlas } );
// etc

Then you can access the sprites within the spritesheet as if they were normal assets. For instance, a sprite named "mySprite" in your spritesheet can be accessed like <button icon="mySprite" /> in your HaxeUI XML layout.

Alternatively, you can set up HaxeUI using HaxeUIApp. This defaults to using the current state as the container. The setup is the same for every HaxeUI backend:

var app = new HaxeUIApp();
app.ready(
	function() {
		var main = ComponentMacros.buildComponent("assets/xml/test.xml"); // whatever your XML layout path is
		app.addComponent(main);
		app.start();
	}
);

Some examples are here.

Addtional resources

• haxeui-api - The HaxeUI api docs.
• haxeui-guides - Set of guides to working with HaxeUI and backends.
• haxeui-demo - Demo application written using HaxeUI.
• haxeui-templates - Set of templates for IDE's to allow quick project creation.
• haxeui-bdd - A behaviour driven development engine written specifically for HaxeUI (uses haxe-bdd which is a gherkin/cucumber inspired project).
• WWX2016 presentation - A presentation given at WWX2016 regarding HaxeUI.