TabNavigatorでListを表示する

ActionScript Flex

私のような初心者が何も考えずに、TabNavigatorを使用してListを表示しようとするとこのようになります。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onload();">
        <mx:Script>
        <![CDATA[
                import mx.controls.Alert;
                private function onload():void {
                        one.dataProvider = silver;
                        two.dataProvider = gold;
                }
        ]]>
        </mx:Script>

        <mx:ArrayCollection id="silver">
                <mx:Object label="田中"/>
                <mx:Object label="山田"/>
                <mx:Object label="斉藤"/>
        </mx:ArrayCollection>
        <mx:ArrayCollection id="gold">
                <mx:Object label="本田"/>
                <mx:Object label="西条"/>
                <mx:Object label="榎本"/>
        </mx:ArrayCollection>

        <mx:TabNavigator width="100%" height="100%">
                <mx:VBox label="1つ目のタブ" width="100%" height="100%">
                        <mx:List id="one" width="100%" height="100%"/>
                </mx:VBox>
                <mx:VBox label="2つ目のタブ" width="100%" height="100%">
                        <mx:List id="two" width="100%" height="100%"/>
                </mx:VBox>
        </mx:TabNavigator>
</mx:Application>

二つ目のタブを表示してみてください。onloadメソッドで、two.dataProvider = gold;としているのにも関わらず、表示されません。TabNavigationのリファレンスを見ると次のように書いてあります。

コンテナに creationPolicy が指定されていない場合、そのコンテナは親の creationPolicy を継承します。アプリケーションに creationPolicy が指定されていない場合、デフォルトは ContainerCreationPolicy.AUTO になります。

creationPolicy が ContainerCreationPolicy.AUTO の場合、必要になるまでコンテナの一部またはすべての子孫の作成が遅延されます (遅延インスタンス化)。このポリシーを使用した場合、最初に作成される UIComponent が少なくなるため、起動時間が最短になります。ただし、ユーザーがアプリケーションの別の部分にはじめて移動するとき、ナビゲーションの遅延が生じます。 Accordion、TabNavigator、ViewStack などのナビゲータコンテナは、すべての子をただちに作成することによって ContainerCreationPolicy.AUTO ポリシーを実装しますが、ある子がそのナビゲータコンテナの選択された子になるまでは、その子のより深い子孫を作成しません。

とあります。つまり、creationPolicyプロパティを指定していないので、最初にdataProviderを指定したときにはまだtwoのコンポーネントは作成されていないんですね。ですので、dataProviderを最初に指定してもクリアされてしまうのでしょう。これを解消するためにcreationPolicyを設定しましょう。今回の使用方法だと、autoが良さそうです。ということで、このプロパティを指定すると問題なく表示されます。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onload();">
        <mx:Script>
        <![CDATA[
                import mx.controls.Alert;
                private function onload():void {
                        one.dataProvider = silver;
                        two.dataProvider = gold;
                }
        ]]>
        </mx:Script>

        <mx:ArrayCollection id="silver">
                <mx:Object label="田中"/>
                <mx:Object label="山田"/>
                <mx:Object label="斉藤"/>
        </mx:ArrayCollection>
        <mx:ArrayCollection id="gold">
                <mx:Object label="本田"/>
                <mx:Object label="西条"/>
                <mx:Object label="榎本"/>
        </mx:ArrayCollection>

        <mx:TabNavigator creationPolicy="all" width="100%" height="100%">
                <mx:VBox label="1つ目のタブ" width="100%" height="100%">
                        <mx:List id="one" width="100%" height="100%"/>
                </mx:VBox>
                <mx:VBox label="2つ目のタブ" width="100%" height="100%">
                        <mx:List id="two" width="100%" height="100%"/>
                </mx:VBox>
        </mx:TabNavigator>
</mx:Application>