layoutcenteringapache-royale

How to center childs in a layout on Apache Royale?


I search for a easy and efficient way to center all childs in a container using basic package. (Because mixing basic and jewel layouts leads to some unwanted sides effects)

Must I use CSS, beads ? If both are usable what is difference and can I have code sample of each ?

For exemple could you tell me how to modify this code to center the text label:

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">


    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>



    <js:initialView>
        <js:View>
            <js:beads>
                <js:VerticalLayout/>
            </js:beads>
            <js:Label text="How to center me on horizontal axis ?"/>
        </js:View>
    </js:initialView>

</js:Application>

Thanks to yishayw, as I'm not familiar with how to add css, I find how to do it and put the full working code here. I would expect that js|View would trigger the style but looking on css with browser I saw that style name for first "view" is "royale"

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">

<fx:Style>
        @namespace j "library://ns.apache.org/royale/jewel";
        @namespace js "library://ns.apache.org/royale/basic";

    .royale {
        align-items :center;
    }

    js|Label {
        color: #ff0000;
    }
 </fx:Style>   

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>



    <js:initialView>
        <js:View >
            <js:beads>
                <js:VerticalFlexLayout />
            </js:beads>
            <js:Label text="How to center me on horizontal axis ?"/>
        </js:View>
    </js:initialView>

</js:Application>

Regards


Solution

  • Try using VerticalFlexLayout and adding align-items: center to the style of the container.