Flex Pasta

mx:TabNavigator requires a Container

There is no compile or run time error, but executing the following code will not work.  I knew this going in but wanted to try it just to see what happened:

<mx:TabNavigator>
      <mx:Text text=”Tab 1“/>
 </mx:TabNavigator>  

The reason it doesn’t work is because a tab navigator requires its children to be of type container.   There is a simple fix, one that requires more work

<mx:TabNavigator>
<mx:Box label=”Tab 1“>
<mx:Text text=”Everything else“/>
</mx:Box>
</mx:TabNavigator>  

I don’t want to wrap a box around all ten of my tabs!  One solution is to do the following:

1. Create a new Actionscript class called BoxText.as which extends Box.
2. Make a bindable property text:String in the Box.
3. Add an event listener for FlexEvent.CREATION_COMPLETE.
4. When creation complete occurs, simply add the text to the box.

Here is the output for BoxText.as:

package
{
import mx.containers.Box;
import mx.controls.Text;
import mx.events.FlexEvent;

public class BoxText extends Box
{
public function BoxText()
{
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete);
}

private function creationComplete(event:FlexEvent):void
{
_text.text = text;
this.addChild(_text);
}

[Bindable]
public var text:String;
public var _text:Text;

}
}

Now I just use my component in the TabNavigator. It saves time and clutter!

<mx:TabNavigator>
<local:BoxText label=”Booyah” text=”My Text to show in the Tab“/>
</mx:TabNavigator>