Flex 4 Application Skin - Create Footer

Question

Hi,

I'm trying to create a skin for my Application in Flex 4. I started with editing the Application wireframe skin found at /flex4-sdk-folder/frameworks/projects/wireframe/src/spark/skins/wireframe/

I need a skin upon applying should provide a header, content area and a footer. I set the controlBar visible in the normal state so that it serves the purpose of header.

I tried to add a Rect inside the contentGroup, but its not coming up.

My question is - how can I add a footer section to my skin so that when applied, it always show a section at the bottom of my application irrespective of the height of the contents in the contentGroup?

[EDIT]

I'm trying to create a footer similar to the one seen at http://www.adobe.com/devnet/flex/tourdeflex/web/#illustIndex=0;sampleId=0;docIndex=0

I just want to fix this footer irrespective of the content inside the page and should be a part of the Application skin.Even if a scrollbar appears in the application, the footer should just reside at the bottom of browser window.

Please provide your valuable inputs and suggestions.

Answer 1

I usually do something like this to get a header and footer into my app:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout gap="0"/>
    </s:layout>
    <s:Group id="header" width="100%" height="28">
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:fill>
                <s:SolidColor color="0xcccccc"/>
            </s:fill>
        </s:Rect>
        <s:Label horizontalCenter="0" verticalCenter="0" text="I'm a Header"/>
    </s:Group>
    <s:Group id="mainContent" width="100%" height="100%"/>
    <s:Group id="footer" width="100%" height="28">
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:fill>
                <s:SolidColor color="0xcccccc"/>
            </s:fill>
        </s:Rect>
        <s:Label horizontalCenter="0" verticalCenter="0" text="I'm a Footer"/>
    </s:Group>
</s:Application>

Actually I usually get a little fancier and put the three Groups into their own components; Footer, Header and Main. You can take this further by creating skins for the Header and Footer components. To keep the scroll bars in the main content area, you can have your Main component inherit from Scroller instead of Group. Hope that helps.

Answer 2

I don't recommend editing the skin at that shows up at the position. I believe you'll have to recompile the full framework for that skin to show up anywhere; but anyone using the cached framework won't see it.

You can copy that file into your project, though, and edit it from there. Then set the skinClass property of your application tag to your new skin copy.

To add a footer bar to the bottom of your application you can use an ControlBar or ApplicationControlBar with the dock property set to false. After that it is just positioning it.

You could also make your own footer component and position it at the bottom of your app to act like a footer.