Flex TabNavigators

I'm creating a TabNavigator to contain the list of words for my new Jotto game. I'm creating the tabs on the fly and loading up the words from a dictionary of approximately 4000 five-letter words. My goal is to have 26 tabs, one for each letter of the alphabet, and then on each tab list all the words for that letter. This will allow the user to browse and choose a word for the computer to guess.

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;

}