つれずれなるままの開発日記(最近はFlexばかり..)

Archive for 2009/6/1

前回、Part1では３つのクラスを継承してクラスを再定義すればいいというとこまで、中身を見ていきました。

もっと早くPart2を書こうとは思ったのですが、自分の方のクラスが閉じる場合やら、閉じない場合やら、
その他、いろいろと機能をつけてしまい、シンプルなものとはかけ離れてしまいました。
それで、とりあえず最初に戻って、白紙状態のものを再度作成することにしました。

ということで・・・・

改めて、その３つのクラスは

1. mx.containers.TabNavigator
2. mx.controls.TabBar
3. mx.controls.tabBarClasses.Tab　（タブの本体）

です。これらを再定義したクラス名を以下の通りとします。

1. CustomTabNavigator
2. CustomTabBar
3. CustomTab　（タブ本体です）

さて、今回のPart2ではとりあえず、拡張するための土台部分を作成します。
要は、これら拡張クラスを作成しますが、全くTabNavigatorと同じ動きをさせます。

さて、話はもどって、まずは３つのクラスを作成します。

最初は、もっともコアなCustomTabクラスです。こちらは、のちのちもっとも変更されるクラスですが、
このクラスが呼ばれるための仕組みを理解するということで、このクラスには最初何もありません。

package com.coltware.cise.ui {
  import mx.controls.tabBarClasses.Tab;
  public class CustomTab extends Tab{
    public function CustomTab() {
      super();
    }
  }
}

これで、Tabと全く同じ動きをするクラスの完成です。
次に、このクラスを呼ぶクラスである、CustomTabBarクラスを作成することにしましょう。

package com.coltware.cise.ui {
  import mx.controls.TabBar;
  import mx.core.mx_internal;
  import mx.core.ClassFactory;
  use namespace mx_internal;
  public class CustomTabBar extends TabBar{
    public function CustomTabBar() {
      super();
      navItemFactory = new ClassFactory(CustomTab);
    }
  }
}

前のクラスよりは、ちょっと手が入っています。
前回の記事でもこの部分については述べたと思います。

さて、CustomTabBarからCustomTabが呼ばれるところまでできたので、後は、CustomTabNavigatorから、
CustomeTabBarを呼ぶようにします。

package com.coltware.cise.ui {
    import mx.containers.TabNavigator;
    import mx.styles.StyleProxy;

    public class CustomTabNavigator extends TabNavigator{
        public function CustomTabNavigator() {
            super();
        }

        override protected function createChildren():void{

            // ここで親のcreateChildrenを呼んではいけない
            //super.createChildren(); 

            if(!tabBar){
                var _tabBar:CustomTabBar = new CustomTabBar();
                tabBar = _tabBar;
                tabBar.name = "tabBar";
                tabBar.focusEnabled = false;
                tabBar.styleName = new StyleProxy(this, tabBarStyleFilters);
                rawChildren.addChild(tabBar);
            }

            //  ここで親のcreateChildrenを呼ぶ
            super.createChildren();
        }
    }
}

ここは、createChildrenを再定義します。
ここでは、基本的にはTabNavigatorのcreateChildrenの中身を見て、該当の部分(new TabBar()している部分）をCustomTabBarにしてしまえばいいのですが、
super.createChildren()を最初に呼ぶのではなく、最後に呼んでください。
これで、TabNavigatorの if(!tabBar) の部分内の処理を実行しなくなります。

これで、準備完了です。
次回は、Tabの中身を実装し、閉じるボタンを作成していきます。（予定）