HAXEUI Alpha Only For Stencyl 3.5Haxeui 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 StencylFor 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 xmlI 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
<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>
BlocksCreating Components The attributes must be some dynamic attributes.
Make Component From XmlImportant you must type the whole string. You cannot put the string in an attribute. It is used as compile time.
Make Component From StringMaking Components DynamicallyShowing ComponentsAdding to screenYou can add components/ containers to the screen. It is better to add components to containers and containers to screen.
Adding to other components containersExample( In fact containers are also components)
Find Child/Ancestor ComponentUseful to find a child/Ancestor by id ( don't forget to use place ids always useful)
ExampleYou 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 Linkshaxeui api =
http://haxeui.org/api/haxe/ui/components/Button.htmlDependencies - hscript
https://github.com/HaxeFoundation/hscript- haxeui-core
https://github.com/haxeui/haxeui-coreTips 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).