2009/6/5
さて、TabNavigatorのタブ拡張は今回でとりあえずは終了にしようと思います。
まだまだ、「閉じる」場合と「閉じない」場合のタブを混在させたい！とか、いろいろあるのですが・・・
要望次第でその後は考えていこうと思います。
さて、前回、×バツボタンまでは表示できるようにしました。
この×バツボタンを押して、タブを閉じるところまでです。
前回のところまでできてれば、後はその画像にClickのイベントでできじゃないか？
と思った方。残念ながらできません・・・・
私もこれではまってしまいました。
これが理由になっているかわかりませんが、Tabって、Buttonの拡張なんですよね。
Clickのイベントがとれないのって、ClickするためにできているTabの上にClickできるイベントを取得できないということですかね。
とにかく、Clickでイベントを登録しても動かないのです。。。。
そこで、考えたのが、タブ全体に対するMouseDownのイベントです。
これを試すと、どうやらMouseDownのイベントはとれるようです。
では、MouseDownが押された時に、そのマウスの場所が×バツの画像の上の位置だったら、
×バツボタンが押されたことと同じである。ということです。
このメソッドをCustomTabクラスに実装していきます。
override protected function createChildren():void{
// ・・・前回までの実装
this.addEventListener(MouseEvent.MOUSE_DOWN,_mouseDownHandler);
}
のようにまずはマウスが押された時のイベントを登録しましょう。
private function _mouseDownHandler(e:MouseEvent):void{
if(e.localX > closeImage.x && e.localX < ( closeImage.x + closeImage.width)){
if(e.localY > closeImage.y && e.localY < ( closeImage.y + closeImage.height)){
// 実は以下の２行は十分説明できるほど、理解していません。
e.stopImmediatePropagation();
e.preventDefault();
var num:Number = parent.getChildIndex(this);
var closeEvent:ItemClickEvent = new ItemClickEvent("clickTabClose",true,true);
closeEvent.index = num;
dispatchEvent(closeEvent);
}
}
}
上の例のように、マウスの位置と、画像の位置で、画像の上の位置に来たときに、閉じた！イベントを発行します。
先ほども上のほうで書きましたが、TabはButtonクラスの継承ですので、Buttonが押されたことと勘違いされないように、
一応、それ以上イベントが伝播しないようにしております。
しかし、残念ながらまだ私にはここの部分をより深く検証したわけでなく、説明できるほど理解していないので、これが本当にどのように他に影響し得るのか？
などが説明ができませんのであしからず・・・・
さて、発行するイベントは何でもいいのですが、何番目のタブが押されただけは把握したいので、
parent.getChildrenIndex(this);
で取得しています。０（ゼロ）から始まりますのでご注意を。
後は、これをどこでもいいので、取得して閉じるようにすれば問題ありません。
今回は、CustomTabNavigator内で取得し、閉じるようにしましょう。
override protected function createChildren():void{
// ・・・今までの実装がだらだら
this.addEventListener("clickTabClose",clickTabCloseHandler);
}
private function clickTabCloseHandler(e:ItemClickEvent):void{
var child:DisplayObject = this.removeChildAt(e.index);
child = null;
}
ボタンが押されたら強制的に閉じるのであればこれでいいとも思いますが、
実際には変更されていたら？とか、POPUPを出してから？とか・・・
があると思いますので、そこは各自ご実装ください。
Posted in 
