In theory this should be straight-forward, with the only hiccup being creating the TabNavigator dynamically using ActionScript 3 to avoid repetitive coding in Flex. But what I kept running into was that the single character letter on each tab was cut off, as in the following picture:
I tried several things that didn't work: sizing the Application, sizing the individual tabs, sizing the TabNavigator - none of these things worked. I finally found the trick, from the Flex 3 documentation on TabNavigators:
Sizing the children of a TabNavigator container
The default width and height of a TabNavigator container is the width and height of the first child. A TabNavigator container does not change size every time you change the active child.
You can use the following techniques to control the size of a TabNavigator container so that it displays all the components inside its children:
* Set explicit width and height properties for all children to the same fixed values.
* Set percentage-based width and height properties for all children to the same fixed values.
* Set explicit or percentage-based width and height properties for the TabNavigator container.
The method that you use is based on your application and the content of your TabNavigator container.
Applying the first bullet point solved my problem. The tabs now look like this:
The code that did the trick is:
for (var letter:int = 0; letter <26;letter++)
{
var box:VBox = new VBox();
tabNav.addChildAt(box, letter);
box.label = String.fromCharCode(letter+65);
box.width = 1248;
box.height=1000;
}
