Moving spark.components.Application's ControlBar to its bottom

Question

How can Application's ControlBar be moved to its bottom in Flex 4.5 ?

The Adobe doc says only:

By default, the ApplicationSkin class defines the control bar area to appear at the top of the content area of the Application container with a grey background. Create a custom skin to change the default appearance of the control bar.

So I look at spark.skins.spark.ApplicationSkin and there is a controlBarGroup (does it hold the ControlBar contents?), but I don't know how to move it from top to the bottom.

Answer 1

First thing you have to do is create a custom skin class. In FlashBuilder (FB) there's an option to create one automatically, but in essence it's just a class like any other.

In FB, right-click somewhere in your project and select 'New > MXML Skin'

Then fill in the wizard form as follows:

Otherwise just create a new .mxml file and copy/paste the code from spark.skins.spark.ApplicationSkin into it.

Then in your application assign the skin class you've just created:

<s:Application ... skinClass="skins.MyApplicationSkin" />

Now let's edit your newly created skin class. This is the part that is of interest to you (I'll cut out some pieces to make it clearer):

<s:Group left="0" right="0" top="0" bottom="0">
    <s:layout>
        <s:VerticalLayout gap="0" horizontalAlign="justify" />
    </s:layout>

    <s:Group id="topGroup" minWidth="0" minHeight="0"
                includeIn="normalWithControlBar, disabledWithControlBar" >

        <!-- some graphic elements here -->

        <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...>
            <s:layout>
                <s:HorizontalLayout ... />
            </s:layout>
        </s:Group>
    </s:Group>

    <s:Group id="contentGroup" width="100%" height="100%" ... />

</s:Group>

Almost there. Now all we need to do, is move that 'topGroup' beneath the 'contentGroup'. 'topGroup' contains some graphics + the controlBarGroup. 'contentGroup' is the area where all components will be inserted that you but in you application .mxml file.

<s:Group left="0" right="0" top="0" bottom="0">
    <s:layout>
        <s:VerticalLayout gap="0" horizontalAlign="justify" />
    </s:layout>

    <s:Group id="contentGroup" width="100%" height="100%" ... />

    <s:Group id="topGroup" minWidth="0" minHeight="0"
                includeIn="normalWithControlBar, disabledWithControlBar" >

        <!-- some graphic elements here -->

        <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...>
            <s:layout>
                <s:HorizontalLayout ... />
            </s:layout>
        </s:Group>
    </s:Group>

</s:Group>