Place spark TabBar on Bottom of ViewStacks (+ rounded corners pointing downwards)

Question

Why is it so hard to do such a simple thing... I figure also it must be a very common thing.
<s:VGroup horizontalAlign="center" horizontalCenter="0" verticalCenter="0" gap="0">
    <mx:ViewStack id="view" width="450" height="300" />
    <!-- NavigatorContent dynamically gets added to view on appComplete-->
    <s:TabBar dataProvider="{view}" skinClass="skins.CustomSparkTabBarSkin" />
</s:VGroup>
The Custom Skin:
<s:Skin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"    
alpha.disabled="0.5"><fx:Metadata>
    <![CDATA[
    [HostComponent("spark.components.TabBar")]
    ]]>
</fx:Metadata>
<fx:Script  fb:purpose="styling" >
    <![CDATA[
    import mx.core.UIComponent;
    /**  Push the cornerRadius style to the item renderers.*/
    override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void {
        const numElements:int = dataGroup.numElements;
        const cornerRadius:int = hostComponent.getStyle("cornerRadius");
        for (var i:int = 0; i < numElements; i++) {
            var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
            if (elt)
                elt.setStyle("cornerRadius", cornerRadius);
        super.updateDisplayList(unscaledWidth, unscaledHeight);
    ]]>           
</fx:Script>
<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>
<!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
<s:DataGroup id="dataGroup" width="100%" height="100%">
Comes out with this component:
I would like to place that TabBar at the Bottom of the viewstack, rounded corners pointing outwardly.
if I add rotation="180" to the TabBar <s:TabBar dataProvider="{view}" skinClass="skins.CustomSparkTabBarSkin" rotation="180"/> will make the matter all the more laughable. I don't understand why is it so hard to create a TabNavigator with the buttons on the bottom?!

Answer 1

Alright, I solved it by using Flash Catalyst... at least its' a simple way...
So what I did was, Skinned it in Photoshop, imported it to Catalyst, and did the ncessary (convert to button, and select the label for it) and imported it into Flash Builder 4.
I added the following component in Main:
<mx:ViewStack id="view" width="450" height="300"  x="33" y="70"/>
<s:TabBar id="tabBar" dataProvider="{view}" skinClass="components.CustomSparkTabBarSkin" y="375" x="32"/>
The component.CustomSparkTabBarSkin
<s:DataGroup id="dataGroup" width="100%" height="100%">
    <s:layout>
        <s:ButtonBarHorizontalLayout gap="4"/>
    </s:layout>
    <s:itemRenderer>
       <fx:Component>
           <s:ButtonBarButton skinClass="components.TabButton" buttonMode="true"/>
       </fx:Component>
    </s:itemRenderer>
The components.TabButton (generated by Flash Catalyst)
<s:Group d:userLabel="Tab Button 1" x="0" y="0">
     <s:BitmapImage smooth="true" source="@Embed('/assets/images/Game Tab Navigator/Buttonec.png')" d:userLabel="Button 99c" x="4" y="0"/>
     <s:RichText alpha="0.95" color="#725b3c" fontFamily="Bebas" fontSize="18" height="20" lineHeight="120%" textAlign="center" d:userLabel="hello" whiteSpaceCollapse="preserve" width="62" x="0" y="24" x.up="0" y.up="14">
          <s:content>
               <s:p>
               <s:span>Hello</s:span>
               <s:span baselineShift="2" fontFamily="Myriad Pro" fontSize="17" fontWeight="bold">¢</s:span>
               </s:p>
        </s:content>
     </s:RichText>
</s:Group>
Now the problem is... When I label my NavigatorContent, and dynamically added to the ViewStack (which is the dataprovider of the TabBar), the TabBar don't show the labels...
Even though it's hardcoded in the example above to show Hello ... Nothing shows.
What am I missing?