HaxeUI [0.0.1]

yoplalala

  • *
  • Posts: 1491
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;">
    <style>
        #scroll1 .scrollview-contents {
            width: 100%;
        }

        #scroll2 .scrollview-contents {
            height: 100%;
        }
    </style>
    <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%" />
            </scrollview>
            <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>
                <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" />
                </vbox>
            </tabview>
        </vbox>
        <listview id="scroll2" width="30%" height="100%" native="true" >
            <data>
                <item value="3A"/>
                <item value="4F"/>
                <item value="CCSp3"/>
<item value="3Lz+3t"/>
            </data>
        </listview>
       
    </hbox>
</vbox>







Blocks

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



Example
( 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)

Example
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

Dependencies
- 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

TODO
[ ] 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 ?

BUGS AND PROBLEMS FOUND
- 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 »


designpeg

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

mdotedot

  • *
  • Posts: 1500
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.