Archive for 2009/3/27
2009/3/27
タブの実体を調べる
タブの実体と、TabNavigatorを調べるためにそのソースを調べていくことにします。
ソースはflexをインストールした場所で
framework/src/mx/containers/TabNavigator.as
のような感じであるので、見てみてください。
画面の構成を調べるには・・・
画面の構成を調べるのにたいていは createChildren() という関数内を調べていきます。
[AS]
if (!tabBar)
{
tabBar = new TabBar();
tabBar.name = “tabBar”;
[/AS]
のような記述があります。
この関数内は非常に短いのでわかりやすいと思います。
つまり、TabNavigatorのタブの場所だということがわかります。
TabBarは単独でも使用できるので、そちらの詳細が知りたい方は、Flexのドキュメントで調べることができると思います。
さて、タブを拡張するには、TabBarの中身を見なければわからないということで、この中身を見ていきましょう。
同様に、TabBar.as 内の createChildren() を探していくと・・・ ない。。。。。
んー、では、親クラスを見ていかなければ・・・ということで、このクラスの関係を改めて見てみると・・・
TabBar → ToggleButtonBar → ButtonBar → NavBar → Box → Container → UIComponent
さすがにUIComponent以降は、Flexではあまり関係がないので、ここまでで記述はしません。
さて、最初にcreateChildren()がある場所を探していくと・・・・
ありました！
NavBarクラスになってありました。
[AS]
override protected function createChildren():void
{
super.createChildren();
if (dataProviderChanged)
{
createNavChildren();
dataProviderChanged = false;
}
}
[/AS]
でも、結局中身は createNavChildren() だとわかりました。
このメソッドをしらべると、privateメソッドのようです。
中身を調べていくと・・・・・
ありました。何やら怪しい記述が
[AS]
navItem = Button(createNavItem(label, icon));
[/AS]
おー、タブって、結局ボタン関連か・・・ということがわかってきましたね。
でも、中身は何やら craeteNavItem というメソッドで作成しているらしい。
このcreateNavItemはTabBarの中でどうなっているか調べる必要がありそうです。
[AS]
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;
}
[/AS]
うん。大したことをやっているわけではなさそうだな。
これを書き換えれば、タブの部分を変更できそうだという感触がついてきました。
でも肝心のButtonのインスタンスを作成しているところが見つかりません。
これは、createNavItemをまた、親クラスをたどってみつけていくしかありませんね。
で、ButtonBarに見つかりました。
[AS]
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.
[/AS]
んー、どうやら、navItemFactoryというClassオブジェクトから作成しているようです。
お、これは拡張できそうですね。
TabBar に戻ってみると、
[AS]
public function TabBar()
{
super();
buttonHeightProp = “tabHeight”;
buttonStyleNameProp = “tabStyleName”;
firstButtonStyleNameProp = “firstTabStyleName”;
lastButtonStyleNameProp = “lastTabStyleName”;
buttonWidthProp = “tabWidth”;
navItemFactory = new ClassFactory(Tab);
selectedButtonTextStyleNameProp = “selectedTabTextStyleName”;
}
[/AS]
とコンストラクタで、Tabクラスを指定しているじゃないですか。
つまり、ここを書き換えれば独自のTabが作成できるということだということがわかりました。
ここまででわかった拡張するためのまとめ
1.Tabを継承し新しいクラスを定義する。
2.TabBarを継承し新しいクラスを定義する。
このクラスでは、コンストラクタで
[AS]
navItemFactory = new ClassFactory([1で作成したクラス]);
[/AS]
を定義する。
3.TabNavigatorを継承し、createChildren()ないでTabBarではなく、２で作成したクラスのオブジェクトを使用する。
ということです。
では、次回は各クラスを作成していくことにします。
Posted in 
