Interesting to @ianharrigan
This works
<vbox>
<hbox style="padding: 5px;border: 1px dashed #ff0000;" width="100" height="200" >
<label text="room 1 test" verticalAlign="center"/>
</hbox>
</vbox>
but this doesn’t
<hbox style="padding: 5px;border: 1px dashed #ff0000;" width="100" height="200" >
<label text="room 1 test" verticalAlign="center"/>
</hbox>
So this is just an “issue” with the builder (well, also haxeui). The MainView.hx extends from VBox, so even when you use as the root node haxeui cant change the “extends” so the root component is vbox regardles. Basically the root component of the xml must match. Eg, this is fine now (i just made MainView extend HBox)
Thank you ! This help , but why is there a free space between components in Hbox ?
For example here : Builder - HaxeUI
On Openfl html5 target the space is larger
My understanding is that two images should touch each other and have no space between them.
By default containers (hbox, vbox, grid, etc) have a spacing of 5px, this is because generally (not always) you want things to be spaced, and for general usage its nicer to have a sensible default spacing. You can, of course, just remove this if you dont want it: Builder - HaxeUI
Is there a bug with a backgroundImage of the button when the button is a part of an ItemRender ?
I set the background image and if the button is outside the ItemRender it works . In the other case, it is refreshed only after holding down the mouse. Here’s a video:
https://youtube.com/shorts/By_3CbMS1VM
Is it already possible to style states of the button via code ( :down , :hover ) ?
My user case is the following one :
For example I have one large image for a button and I want to create one big button and one very small. For that reason I should calculate the scale and rescale the bitmapdata for each of them. After that I should create two identical css style , so to be possible to set with StyleLookupMap.instance.set
If I have 20-30 buttons, that doesn’t seem like a good solution.
It will be much easier to create one custom class ( extending Button) and set scale and background image there.
However, it’s not possible to set states ( :hover :down) from the code which is a problem.
Yes you can use :down and :hover.
Here is the css used by haxeui haxeui-core/buttons.css at master · haxeui/haxeui-core · GitHub
By default you can use :hover : down :active :disabled.
If you want them to use them by code you can just do component.addClass(“:down”) for example .
Why do you want to set states from the code ( I mean , if it is in’t a bug , haven’t Tested it, could you make an example in the builder ?) If you extend a button, it will know when to apply :down and :hover, no need to apply them yourself
Let’s say I want to create 40 buttons for my app and to set for each of them different background image for :hover and :down state.
So for that , if want to use css style should do this:
.mybutton1:hover {
background-image: lookup('mybutton1-hover-image');
}
.mybutton1:down {
background-image: lookup('mybutton1-down-image');
}
.mybutton2:hover {
background-image: lookup('mybutton2-hover-image');
}
.mybutton2:down {
background-image: lookup('mybutton2-down-image');
}
.mybutton3:hover {
background-image: lookup('mybutton3-hover-image');
}
.mybutton3:down {
background-image: lookup('mybutton3-down-image');
}
.......
.mybutton40:hover {
background-image: lookup('mybutton40-hover-image');
}
.mybutton40:down {
background-image: lookup('mybutton40-down-image');
}
and of course set bitmatdata ( after loaded the image ) with this code for each button StyleLookupMap.instance.set('mybutton1-hover-image', bitmap); and StyleLookupMap.instance.set('mybutton1-down-image', bitmap); …
As I mention those are different images.
I want to make something like that
class MyButton extends Button {
.....
// call that functon with loaded bitmap data
private function loadedBackgroundImage(backgroundBD:BitmapData, hoverBD:BitmapData, downBD:BitmapData):Void
{
this.customStyle.backgroundImage = backgroundBD;
this.customStyle.state.hover.....<backgroundImage> = hoverBD; // something similiar
this.customStyle.state.down.....<backgroundImage> = downBD;
}
}
The code above will eliminate need to create 40 css ddecalration .mybutton3:down , .mybutton3:hover and so on.
I could not see how component.addClass(":down") will resolve that problem.
About the problem with background image in ItemRender, I still try to find solution. I’ll try to publish a simple example in the next dayss
So, using .customStyle you cant set different states, the customStyle and style are literally what the component looks like “now”, in fact, it doesnt really know anything about “states” (psudeo-classes), the component just goes addClass(":hover") and that builds a new style.
I think you have a couple of options:
Ill knock up examples of each at some point to a) show you and b) make sure they work
Cheers,
Ian
FYI, little bit of a “heads up”, at some point .customStyle is going to change to .style and the original .style is going to change to .computedStyle. It current names are misleading 
I’ll need some time to rethink the things. My understanding for addClass(...) was it add already defined style ( form .css file). So if no button:hover style is defined, nothing happens.
About the two options :
StyleLookupMap.instance.set(...) the old button image was overwritten with the new one (I also rescale each image to the current width/height of the button).About the ItemRender - I load background images asynchronously, but the data in the item render is added earlier and for that the background image is not visible.
So there are two solutions.
For 3) there are some components that support this type of auto refresh - Image component is one example of this. But apparently the background image is not part of the auto refresh.