How to align children in a HBox?

[hopewise]

I tried to set horizontalAlign of hBox instance to "right" or "center" but didn't work .. so how would I achieve this?

Also, I was trying to set height of hBox instance to a certain value, but after several attempts, I found that I have to set autoSize to false, what I recommend is to automatically set autoSize to false when any setter of height or width is called .. this will make more sense ..

Thank you

[savak1990]

Maybe, I'm doing something wrong, but I faced the same problem too. I'm trying to set VBox's horizontalAlign to center or right, but nothing changes. What is a proper way to set vbox with widgets centrally aligned?

Thanks in advance.

[ianharrigan]

Hi,

You need to set the alignment of the child, not the parent container. Eg:

<vbox width="200" autoSize="false">
    <button text="1" />
    <button text="2" horizontalAlign="center" />
    <button text="3" horizontalAlign="right" />
</vbox>

(http://haxeui.org/try.jsp?layoutId=4gp744e)

You can also do the same from code, or set up css rules of you dont want to manually do it by hand, eg:

#myVBox Button {
    horizontalAlign: center;
}

Hope that helps!

Ian

[savak1990]

Thanks, Ian. I thought haxeui has something to align parent container in the middle of the screen without setting up coordinates manually. I didn't know, how this coordinates would work for platforms with different resolutions. But looks like we need to develop for one resolution and then just make resizing for others by using Toolkit.scaleFactor for example.

P.S. By the way, Why do you have one variable for scaling. Maybe it would be good to have scaleFactorX and scaleFactorY, so that user can set this factors independently.

[ianharrigan]

I was thinking about exposing scaleX/Y eventually, but as for the framework scalefactor (ie, autoScaling, and things that are applied to each root/stage) i think a single scale factor is fine. I mean you would never (imo) want to scale different from x/y, other wise it would looked skewed and strange. However, if you did want that look then you could use scaleX/Y (once they are exposed and allowed in styles, etc).

As for you other question, you can defo do that, eg:

<?xml version="1.0" encoding="utf-8" ?>
<box width="100%" height="100%" autoSize="false" style="borderSize:1">
    <vbox width="50%" horizontalAlign="center" verticalAlign="center">
        <button text="Button 1" width="100%" />
        <button text="Button 2" width="100%" />
        <button text="Button 3" width="100%" />
        <button text="Button 4" width="100%" />
        <button text="Button 5" width="100%" />
    </vbox>
</box>

(Working example here: http://haxeui.org/try.jsp?layoutId=oan8b4b)

Hope that helps!

Cheers, Ian

[savak1990]

About exposing scaleX/Y. Yes, definitly the functionality with one scale factor will be more usable (maybe 90%), but I think there are 10% of people who want to scale them separately and since it is a framework it should support it. And also it's quite easy to do this. But it's just my IMHO.

Thanks a lot for this example and quick response. It works for me now.

Best Regards, Viacheslav.

[ianharrigan]

Sure,

When i expose the scaleX/Y properties via code and css then you will be able to access both, but for the autoscale system i think its easier (and more useful) to just have a single property. Internally the scale factor (when used globally via Toolkit.scaleFactor) uses X/Y, ie:

root.sprite.scaleX = root.sprite.scaleY = Toolkit.scaleFactor;

But as you said, other might want to scale a specific component differently, so ill expose those properties. I personally cant think of any reason why you would ever want to, but as you said, its a framework, so just because i dont think its useful doesnt me someone else might

Cheers, Ian

[savak1990]

For example developer may allow scaleFactorX/Y in range 0.9 to 1.1 in order to fit some similar resolutions. Such small scaleFactors may not look skewed or strange but it allows to fit exactly the whole screen on a bench of devices.

Regards, Viacheslav.