R – Move Button into grid space of a TabNavigator’s tabs in Flex Builder

actionscript-3flex3mxml

I have a layout question for Tab Navigators in Adobe Flex 3.

Is it possible to insert a button that invades the grid space of the tabs?

I have a tab navigator component and I am dynamically adding sub components to tab navigator and I want squeeze a button inside the tab space. I don't want the button to be another tab. And I don't want to use a TabBar for the tabs.

This graphic illustrates the problem.

This is the current layout I have

Current Layout

This is a mockup (photoshopped) of the layout I want. I basically want to shave some pixels off the layout.

Desired Layout

Is there a way to push the button down or manually override its layout position in MXXML or actionscript?

Best Answer

I would think if you put the elements in a Canvas (which allows you to lay out elements absolutely) rather than a VBox as it appears you are using now, you could force the Home button to display the way you want it to, ie:

<mx:Canvas>
   <mx:Button top="5" right="5" />
   <mx:TabNavigator top="5" left="5" right="5" />
</mx:Canvas>

Related Solutions

R – Flex: Everything goes white when I switch TabNavigator tabs

Setting the historyManagementEnabled property of the TabNavigator to false works for me.

R – Place an ‘addChild’ button into grid space of TabNavigator

This class will do the trick except for scrolling when there are too many tabs.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400">
    <mx:HBox width="100%">
        <mx:TabBar dataProvider="{viewstack}"/>
        <mx:Button label="+" width="35" click="addTab()"/>
    </mx:HBox>
    <mx:ViewStack height="100%" width="100%" id="viewstack"/>
    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
            import mx.containers.Panel;
            //add a new container
            private function addTab():void
            {
                var l:Label = new Label();
                l.text = "Panel " + (viewstack.numChildren + 1);
                var p:Panel = new Panel();
                p.label = l.text;
                p.addChild(l);
                viewstack.addChild(p);
                viewstack.selectedChild = p;
            }
        ]]>
    </mx:Script>
</mx:VBox>

Best Answer

Related Solutions

R – Flex: Everything goes white when I switch TabNavigator tabs

R – Place an ‘addChild’ button into grid space of TabNavigator

Related Topic