タブの実体を調べる

タブの実体と、TabNavigatorを調べるためにそのソースを調べていくことにします。
ソースはflexをインストールした場所で
framework/src/mx/containers/TabNavigator.as
のような感じであるので、見てみてください。

画面の構成を調べるには・・・

画面の構成を調べるのにたいていは createChildren() という関数内を調べていきます。

if (!tabBar)
{
tabBar = new TabBar();
tabBar.name = "tabBar";

のような記述があります。
この関数内は非常に短いのでわかりやすいと思います。

つまり、TabNavigatorのタブの場所だということがわかります。
TabBarは単独でも使用できるので、そちらの詳細が知りたい方は、Flexのドキュメントで調べることができると思います。

さて、タブを拡張するには、TabBarの中身を見なければわからないということで、この中身を見ていきましょう。
同様に、TabBar.as 内の createChildren() を探していくと・・・ ない。。。。。

んー、では、親クラスを見ていかなければ・・・ということで、このクラスの関係を改めて見てみると・・・
TabBar → ToggleButtonBar → ButtonBar → NavBar → Box → Container → UIComponent
さすがにUIComponent以降は、Flexではあまり関係がないので、ここまでで記述はしません。

さて、最初にcreateChildren()がある場所を探していくと・・・・

ありました!
NavBarクラスになってありました。

override protected function createChildren():void
{
super.createChildren();

if (dataProviderChanged)
{
createNavChildren();
dataProviderChanged = false;
}
}

でも、結局中身は createNavChildren() だとわかりました。
このメソッドをしらべると、privateメソッドのようです。

中身を調べていくと・・・・・

ありました。何やら怪しい記述が

navItem = Button(createNavItem(label, icon));

おー、タブって、結局ボタン関連か・・・ということがわかってきましたね。
でも、中身は何やら craeteNavItem というメソッドで作成しているらしい。

このcreateNavItemはTabBarの中でどうなっているか調べる必要がありそうです。

override protected function createNavItem(
label:String,
icon:Class = null):IFlexDisplayObject
{
var navItem:IFlexDisplayObject = super.createNavItem(label, icon);

DisplayObject(navItem).addEventListener(
MouseEvent.MOUSE_DOWN, tab_mouseDownHandler);

DisplayObject(navItem).addEventListener(
MouseEvent.DOUBLE_CLICK, tab_doubleClickHandler);

return navItem;
}

うん。大したことをやっているわけではなさそうだな。
これを書き換えれば、タブの部分を変更できそうだという感触がついてきました。

でも肝心のButtonのインスタンスを作成しているところが見つかりません。

これは、createNavItemをまた、親クラスをたどってみつけていくしかありませんね。

で、ButtonBarに見つかりました。

override protected function createNavItem(
label:String,
icon:Class = null):IFlexDisplayObject
{
var newButton:Button = Button(navItemFactory.newInstance());

// Set tabEnabled to false so individual buttons don't get focus.

んー、どうやら、navItemFactoryというClassオブジェクトから作成しているようです。

お、これは拡張できそうですね。
TabBar に戻ってみると、

public function TabBar()
{
super();

buttonHeightProp = "tabHeight";
buttonStyleNameProp = "tabStyleName";
firstButtonStyleNameProp = "firstTabStyleName";
lastButtonStyleNameProp = "lastTabStyleName";
buttonWidthProp = "tabWidth";
navItemFactory = new ClassFactory(Tab);
selectedButtonTextStyleNameProp = "selectedTabTextStyleName";
}

とコンストラクタで、Tabクラスを指定しているじゃないですか。

つまり、ここを書き換えれば独自のTabが作成できるということだということがわかりました。

ここまででわかった拡張するためのまとめ

1.Tabを継承し新しいクラスを定義する。
2.TabBarを継承し新しいクラスを定義する。
 このクラスでは、コンストラクタで

navItemFactory = new ClassFactory([1で作成したクラス]);

を定義する。
3.TabNavigatorを継承し、createChildren()ないでTabBarではなく、2で作成したクラスのオブジェクトを使用する。

ということです。
では、次回は各クラスを作成していくことにします。

お仕事のご依頼・相談を承ります
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら

Leave a Reply

お仕事のご依頼・相談
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら
ソフトウェア&ライブラリ




ライブラリ
airxmail(en)
AIR版メール送受信ライブラリ
airxzip
AIR版ZIP圧縮・解凍ライブラリ
執筆書籍
本、雑誌等

WEB記事:CodeZine
執筆記事はこちら
カレンダー
2009年3月
    4月 »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

カスタム検索
RSS
Add to Google < !–adsense–>
アーカイブ
カテゴリ
にほんブログ村 IT技術ブログへ