FlexでAccordionHeaderにつけたボタンに押した感を出す

FlexでAccordionHeaderにボタンを配置の続きで、
AccordionHeaderにつけたボタンに押した感を出すやり方。

やり方としては2段階にわけて、
まずはボタンの上にマウスが来たら指マークにして、
その後その部分をダブルクリックしたら、イベントをさらに発生させる
ようにします。

こんなかんじ

とりあえず前提としてAccodionにイベントを埋め込んでおく

//Accordionはこうかいておいてイベントリッスンさせる

各イベント

//マウスカーソルがボタンの上にきたら指マークに変更
private function dispatchMouseMove(e:MouseEvent):void {
    var accHeader:AccordionHeader = new AccordionHeader();
    var button:Button = new Button();

    //AccordionHeaderをすべてチェックする
    for (var i:int = 0;i < myAccordionHeader.numChildren;i++) {
        accHeader = myAccordionHeader.getHeaderAt(i) as AccordionHeader;
        button = accHeader.getChildAt(0) as Button;
        //ボタンの上にマウスがあるかをチェックする
        if (button.getRect(this).useHandCursor(e.stageX,e.stageY)) {
            //マウスがボタンの上にいたら useHandCursorをtrueにする
            accHeader.buttonMode = true;
            accHeader.useHandCursor = true;
        } else {
            accHeader.useHandCursor = false;
        }
    }
}

まあ経験が浅いので上記のやり方くらいしか思いつかなかったんですが、
AccordionHeaderのボタンの位置とマウスカーソルの位置をチェックして、
contains() でチェックしていくというやり方です。
指カーソルに変更するのは、別のやり方もあると思いますが、
とりあえずAccordionHeaderのプロパティを書き換えるだけでも上手くいきます。

で、次に指カーソル状態でダブルクリックをチェックします。

//ボタンの上でダブルクリックされたらイベント発動
private function dispatchDblClick(e:MouseEvent):void {
    var accHeader:AccordionHeader = new AccordionHeader();
    var button:Button = new Button();

    //AccordionHeaderをすべてチェックする
    for (var i:int = 0;i < myAccordionHeader.numChildren;i++) {
        accHeader = myAccordionHeader.getHeaderAt(i) as AccordionHeader;
        button = accHeader.getChildAt(0) as Button;
        if (button.getRect(this).contains(e.stageX,e.stageY)) {
            accHeader.addEventListener(MouseEvent.CLICK,myDoubleClickEvent);
            accHeader.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
        }
    }
}

こっちも同じようにAccordionHeaderのボタンの位置と
マウスカーソルの位置をチェックして、
contains() でチェックしていくというやり方です。

一応実装してみた

一応このAccordionはTinyTodoというアプリで実装してみたので、
よかったら見てみてください。
Air製Todo管理ツール

Tweet