In Mobile-Flex how to place components at each border of a VerticalLayout?

Question

In mobile-flex I want to place one button at the left and another button at the right of the screen , something like in this image :

At the moment here is how I created the screen without the button at the right :

<?xml version="1.0" encoding="utf-8"?>
    <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:exp="http://flex.apache.org/experimental/ns"
            title="Liste" creationComplete="creationCompleteHandler(event)">
        <s:layout>
            <s:VerticalLayout gap="5" horizontalAlign="left" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
        </s:layout>
        <fx:Script>
            <![CDATA[
                import model.Db;

                import mx.collections.ArrayCollection;
                import mx.events.FlexEvent;

                private const dataProvider:ArrayCollection = new ArrayCollection();

                protected function creationCompleteHandler(event:FlexEvent):void
                {
                    var src:Array = [];
                    var db:Db = new Db();
                    var enreg:String = db.getDbSo("enreg");
                    var tabEnreg:Array = enreg.split("\n");

                    for (var i:int = 0; i <tabEnreg.length; i++)
                    {
                        var cols:Array = String(tabEnreg[i]).split(";");
                        src.push({col1: cols[0], col2: cols[1]});
                    }
                    dataProvider.source = src;
                }

            ]]>
        </fx:Script>
        <fx:Declarations>
            <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
        </fx:Declarations>
        <s:Button id="btn_add" label="Ajouter" click="navigator.pushView(AjoutView)" />
        <exp:MobileGrid id="dgm" dataProvider="{dataProvider}" width="100%" height="95%" >
            <exp:columns>
                <exp:MobileGridColumn dataField="col1" headerText="Colonne 1" width="50%"/>
                <exp:MobileGridColumn dataField="col2" headerText="Colonne 2" width="50%"/>
            </exp:columns>
        </exp:MobileGrid>
    </s:View>

So I want to add another button at the right of the screen at the same horizontal level of the button "btn_add".

So how to add the other right button in this case ? Or should I think another layout for that ?

Answer 1

You need to use nested Group in your layout. Some thing like this:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
    <s:layout>
        <s:VerticalLayout gap="5" horizontalAlign="left" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
    </s:layout>

    <s:Group width="100%">
        <s:Button id="button1" right="0"/>
        <s:Button id="button2" left="0"/>
    </s:Group>
</s:View>

Answer 2

To expand on Babibu's answer, you could also use a nested HGroup:

<?xml version="1.0" encoding="utf-8"?>

<s:HGroup width="100%">
    <s:Button id="button1" />
    <s:Spacer width="100%" />
    <s:Button id="button2" />
</s:HGroup>