HaxeUI [0.0.1]


  • Posts: 1502
HAXEUI Alpha Only For Stencyl 3.5

Haxeui is still in alpha so this extension is even more in alpha ^^. I still haven't made all the necessary blocks .
This extension have plenty of potential, some of which I haven't explorer at all ( creating new styles, etc ...)
I have tried plenty of things , but there are so many to tests . Don't hesitate to post how you use so we can learn from you.
and the bugs you find ( I won't be able most of them) but then we can have a list of components that work everywhere.

Integration With Stencyl

For now, you can only add components to the screen. ( Theoritically, you can add :them to actors,  but mouse events won't work so it's useless.  Hopefully I'll find some workaournd) which will be over everything

  • Components will automatically clean when the changes scenes
  • When you change screen size , components will automatically adapt
Using some xml
I totally recommend to use as much as possible xml for the layout. like this is the extension change, or haxe-ui changes , it will stay compatible ( remember haxe-ui  is still in alpha too)

Don't hesitate to use http://www.haxeui.org/builder or http://www.haxeui.org/demos/explorer/ to better understand. You will notice he 'll subdivise  in in a xml file for the layout, a css file for the style and hscript file for the code.

Some example or working xml, where everything is mixed
Code: [Select]
<vbox id="main" width="100%" height="100%" style="padding:10px;">
        #scroll1 .scrollview-contents {
            width: 100%;

        #scroll2 .scrollview-contents {
            height: 100%;
    <hbox width="100%" height="100%">
        <vbox width="70%" height="100%">
            <scrollview id="scroll1" width="100%" height="50%">
                <button text="Button 1" id="button1" width="100%" />
                <button text="Button 2" width="100%" onClick="trace('hello world')"/>
                <button text="Button 3" width="100%" />
                <button text="Button 4" width="100%" />
                <button text="Button 5" width="100%" />
                <button text="Button 6" width="100%" />
                <button text="Button 7" width="100%" />
                <button text="Button 8" width="100%" />
                <button text="Button 9" width="100%" />
                <button text="Button 10" width="100%" />
            <tabview  width="100%" height="50%">
                <vbox text="Positive Bullets" width="100%" height="100%">
                    <button text="very good height and distance" width="100%" toggle="true" />
                    <button text="good take off and landing" width="100%" toggle="true" />
                    <button text="effortless throughout (including rhythm in a combination or sequence)" width="100%" toggle="true"/>
                    <button text="steps into a jump, unexpected or creative entry" width="100%" toggle="true"/> 
                    <button text="very good body position from take -off to landing" width="100%" toggle="true"/> 
                    <button text="element matches the music" width="100%" toggle="true"/>                                   
                <vbox text="Negative Bullets" width="100%">
                    <button text="very good height and distance" width="100%" toggle="true" />
                    <button text="good take off and landing" width="100%" toggle="true" />
                    <label text="very good height and distance" width="100%" native="true" />
        <listview id="scroll2" width="30%" height="100%" native="true" >
                <item value="3A"/>
                <item value="4F"/>
                <item value="CCSp3"/>
<item value="3Lz+3t"/>


Creating Components

The attributes must be some dynamic attributes.

Make Component From Xml
Important you must type the whole string. You cannot put the string in an attribute. It is used as compile time.

Make Component From String

Making Components Dynamically

Showing Components

Adding to screen
You can add components/ containers to the screen.  It is better to add components to containers and containers to screen.

Adding to other components containers

( In fact containers are also components)

Find Child/Ancestor Component
Useful to find a child/Ancestor by id  ( don't forget to use place ids always useful)

You have imported an xml. And now you want to modify some attributes

Here, when you click on the button, it will trace the message.

Useful Links
haxeui api = http://haxeui.org/api/haxe/ui/components/Button.html

- hscript  https://github.com/HaxeFoundation/hscript
- haxeui-core  https://github.com/haxeui/haxeui-core

Tips and tricks
- try to use xml, it is better for predicting the result and not to forget anything
- use width and heght in percentage, as otherwise it will be pixels and behave the same with everythy screen

[ ] having the choice between adding a component forever or just to the scene
[ ] being able to add components to actors
[ ] making some options between components that scale to the screen size and some that stay the same ?

- In Flash, works well but there's an error with permissions
- Vertical sliders dont work well ( the filling is inversed).

« Last Edit: November 01, 2018, 04:30:38 am by yoplalala »


  • *
  • Posts: 671
This will be amazing! Will it work on all platforms?


  • Posts: 1551
This might be a lot of work, but very interesting if it was able to address:
* input on mobile with native keyboard actions (insert/select/copy/cut/paste)
* input/tab order of forms
*  controllable listboxes
* and maybe most important:  scaling on different devices
Hanging out in the Chat:  http://www.stencyl.com/chat/

Proud member of the League of Idiotic Stencylers! Doing things in Stencyl that probably shouldn't be done.


  • Posts: 1502
I'm making a program with haxeui.
I've started using blocks but now it mostly uses code.
It's interesting because I now know which blocks I need to make. ( there are just 2 or 3 things I hacen't put in blocks yet).
In fact in reality you mostly use some xml and a little code to make eveything dynamic.

You can see the program I made here https://play.google.com/store/apps/details?id=net.shallowmallow.rateTheSkate

(ps: don't click on the button at the bottom : score next element, score skater, etc or it will crash)
There's only one custom component.

- input on mobile with native keyboard actions (insert/select/copy/cut/paste)
Don't know yet :)
- input/tab order of forms
Just tested . Tab works quite well to select every button, etc but it doesn't seem you can press enter. There must be an option somewhere.
- controllable listboxes
this iq quite easy to do
- and maybe most important:  scaling on different devices
this works quite well now, but I think there was a bug in the version I uploaded which I corrected later

« Last Edit: December 27, 2018, 02:48:39 am by yoplalala »