Need help with container display / states

Question

Greetings!
I am trying to use states to change the contents of a canvas
which is the second of two within a tab navigator. Buttons trigger
functions to change the state and change the selectedIndex of the
navigator to the second tab.
The functions work fine if you first view the second tab. If
you click the buttons before viewing the second tab, the whole
thing blows up. Heres a link to app:
http://test.arsandbox.com/player.cfm
Any insight would be appreciated!
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="initApp();">
<mx:Script><![CDATA[
private function initApp():void {
private function displayDirectory():void {
switchTab();
currentState = "stateDirectory";
private function displayWriter(selectedWriter:String):void {
currentState = "stateWriter";
switchTab();
private function displaySong(selectedSong:String):void {
currentState = "stateSong";
switchTab();
private function switchTab():void {
ContentTabs.selectedIndex = 1;
]]></mx:Script>
<mx:states>
<mx:State name="stateDirectory">
<mx:SetProperty target="{directoryBox}" name="visible"
value="true"/>
<mx:SetProperty target="{writerBox}" name="visible"
value="false"/>
<mx:SetProperty target="{songBox}" name="visible"
value="false"/>
</mx:State>
<mx:State name="stateWriter">
<mx:SetProperty target="{directoryBox}" name="visible"
value="false"/>
<mx:SetProperty target="{writerBox}" name="visible"
value="true"/>
<mx:SetProperty target="{songBox}" name="visible"
value="false"/>
</mx:State>
<mx:State name="stateSong">
<mx:SetProperty target="{directoryBox}" name="visible"
value="false"/>
<mx:SetProperty target="{writerBox}" name="visible"
value="false"/>
<mx:SetProperty target="{songBox}" name="visible"
value="true"/>
</mx:State>
</mx:states>
<mx:Panel id="MainPanel" width="100%" height="100%"
layout="horizontal" title="Example" horizontalAlign="center"
verticalAlign="middle" backgroundColor="0xB3C0C6">
<mx:DividedBox direction="horizontal" width="100%"
height="100%">
<mx:VBox width="250" height="100%"
backgroundColor="#ffffff">
<mx:Button label="Directory"
click="displayDirectory();"/>
<mx:Button label="Writer"
click="displayWriter('1');"/>
<mx:Button label="Song" click="displaySong('1');"/>
</mx:VBox>
<mx:TabNavigator id="ContentTabs" width="100%"
height="100%" visible="true">
<mx:Canvas label="Homepage" width="100%" height="100%"
horizontalScrollPolicy="off">
</mx:Canvas>
<mx:Canvas label="Writers" width="100%" height="100%"
horizontalScrollPolicy="off">
<mx:VBox id="directoryBox" width="100%" height="100%"
visible="true" top="0" left="0">
<mx:Label text="Directory Box"/>
</mx:VBox>
<mx:VBox id="writerBox" width="100%" height="100%"
visible="false" top="0" left="0">
<mx:Label text="Writer Box"/>
</mx:VBox>
<mx:VBox id="songBox" width="100%" height="100%"
visible="false" top="0" left="0">
<mx:Label text="Song Box"/>
</mx:VBox>
</mx:Canvas>
</mx:TabNavigator>
</mx:DividedBox>
</mx:Panel>
</mx:Application>

Answer 1

The items in the second tab aren't actually created or
instantiated until they are first viewed. This is a performance
setting built into Flex. You can however over-ride the setting and
force all the tab contents to render immediately when the tab
navigator is created. To do this, you define the creationPolicy on
the TabNavigator and set the value to "all". Warning, this will
hurt performance if the tab navigator has a lot of large child
items.