Sean Schulte

Twitter: @sirsean

Github: github.com/sirsean

Flex's TabNavigator is a great thing. In normal situations, it's easy enough to use:

<mx:TabNavigator id="tabNavigator">     <vh:ComponentZero id="componentZero" label="Zero" />     <vh:ComponentOne id="componentOne" label="One" />     <vh:ComponentTwo id="componentTwo" label="Two" /> </mx:TabNavigator>

It'll load up ComponentZero first, and there will be three tabs at the top of the TabNavigator that let you switch between them. Awesome. Except sometimes you find yourself in a situation where you want to load the second tab instead of the first, but you want the order to stay the same.

I was in that situation today. At first it seems like you can just do something simple:

private function _onCreationComplete(event:Event):void {     tabNavigator.selectedChild = componentOne; }

That'll jump you over to the second tab almost right away. Problem solved, right? Wrong! When it builds the page, it flashes the first tab for a fraction of a second before it moves you over to the second tab. That doesn't look so great. And in MXML, there's really nothing you can do about it.

The only way I could figure out to get around this is to build out the children of the TabNavigator in ActionScript, building the second tab first, then inserting the first tab in front of it. It's kind of cumbersome and isn't as smooth as just doing it with MXML, but it gets you what you want. If, that is, you want what I want. Which you'd better.

private var componentZero:ComponentZero; private var componentOne:ComponentOne; private var componentTwo:ComponentTwo;

private function _onCreationComplete(event:Event):void {     componentOne = new ComponentOne();     componentOne.label = "One";     tabNavigator.addChild(componentOne);

    componentZero = new ComponentZero();     componentZero.label = "Zero";     tabNavigator.addChildAt(componentZero, 0);

    componentTwo = new ComponentTwo();     componentTwo.label = "Two";     tabNavigator.addChild(componentTwo); }

...

<mx:TabNavigator id="tabNavigator" />

Note that I had to create the second tab first and add it to the TabNavigator, then I had to use addChildAt() to add the tab that I want to appear in front of it.

If you're ever stuck in where I was, hopefully this helps. If you've got a better way to do this, I'm all ears.