Home/ Questions/Q 6588773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T17:05:23+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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’

    enter image description here

    Then fill in the wizard form as follows:

    enter image description here

    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>
    • 0