haxeui-html5
haxeui-html5
is the pure HTML5 backend for HaxeUI. It has no other framework dependency except haxeui-core
itself and outputs a DOM tree.
Installation
-
haxeui-html5
has a dependency tohaxeui-core
, and so that too must be installed.
haxelib install haxeui-core
haxelib install haxeui-html5
Usage
The simplest method to create a new HTML5 application that is HaxeUI ready is to use one of the haxeui-templates. These templates will allow you to start a new project rapidly with HaxeUI support baked in.
If however you already have an existing application, then incorporating HaxeUI into that application is straightforward:
Haxe build.hxml
If you are using a command line build (via a .hxml
file) then add these two lines:
-lib haxeui-core
-lib haxeui-html5
If you are using an IDE, like Flash Develop, add these lines via the project settings window.
Note: Currently you must also include haxeui-core
explicitly during the alpha, eventually haxelib.json
files will exist to take care of this dependency automatically.
Toolkit initialisation and usage
Initialising the toolkit requires you to add this single line somewhere before you start to actually use HaxeUI in your application:
Toolkit.init();
Once the toolkit is initialised you can add components using the methods specified here.
HTML5 specifics
As well as using the generic Screen.instance.addComponent
, it is also possible to add components directly to any other DOM node: the haxeui-html5
backend exposes a special element
property for this purpose. Eg:
js.Browser.document.getElementById("myContainer").appendChild(main.element);
Initialisation options
The configuration options that may be passed to Tookit.init()
are as follows:
Toolkit.init({
container: js.Browser.document.getElementById("myContainer") // where 'Screen' will place components
// defaults to the document body
});
Native components
HTML5 supports various native versions of components, and therefore so does HaxeUI. There are a few different ways to do this:
Using a theme (applies to all relevant components)
Toolkit.theme = "native"; // will try to use native components where possible
Using haxe code (applies to single component)
var button:Button = new Button();
button.native = true; // this component alone will be native
Using an inline style (applies to single component)
<button text="Native" style="native:true;" />
Using CSS (applies to groups of components)
.button, #myNativeButton, .myNativeStyle {
native: true;
}
Addtional resources
- component-explorer - Browse HaxeUI components
- playground - Write and test HaxeUI layouts in your browser
- component-examples - Various componet examples
- haxeui-api - The HaxeUI api docs.
- haxeui-guides - Set of guides to working with HaxeUI and backends.