Neo Inspiration

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管理ツール

FlexでAccordionHeaderにボタンを配置

SeoScouterのブクマのタグがFlexになっていて、
いや。。これAjaxなんだよな。。。
と思いつつ、ついでにFlexも勉強するかなーってことで、始めてみたら・・
面白い！！！

ということで土日からがっつりやってます。

今ちょうど、Todo管理ツールが欲しかったので、
それを作成することに。
まあもうほとんどできたので、
あとはテストで自分で使ってみるだけなんですが。

こんなかんじ。

アコーディオン形式にしようとおもって、
アコーディオンで作り始めたら、このヘッダーの部分に
クリッカブルなボタン入れたり、それをマウスオーバーで指ポインタにしたり
とか　そういうのが結構大変だったので、
随時メモっていきます。

—-

で、ボタンの配置は
そのまま accordion.***=ボタン
みたいにはかけなくて、（iconなら入れれますが）
mxmlで配置したaccordionを
ActionScriptでAccordionHeaderをextendしたクラスを書いて、
super()してaddchildする方法（AccordionHeaderが出力される際に必ず処理される）と、

一旦配置したaccodionのchildを accordion.getHeaderAt(i) as AccordionHeader
みたいなかんじで、順番に取得して、AccordionHeaderとして
そこに addchildする（こっちなら特定のだけボタンを配置できる）
方法の2個ができるのがわかって、マウスオーバーとかもしたかったので、
すぐ実装が理解できた下の方で実装しました。

こんなかんじ。

//アコーディオンを配置
<mx:Accordion id="accMain" openDuration="300"
 doubleClickEnabled="true" doubleClick="dispatchDblClick(event)"
 mouseMove="dispatchMouseMove(event)" />

<mx:Script>
<![CDATA[
pricate function initAccordion():void {
    //アコーディオンのchildの数だけforをまわして、buttonをつけていく
    for ( var i:int = 0; i < accMain.numChildren; i++ ) {
        var button:Button = new Button();
            button.width = 20;
            button.height = 20;
            button.styleName = "button";
        (accMain.getHeaderAt(i) as AccordionHeader).addChild(button);
    }
}
]]>
</mx:Script>

アコーディオンのパーツをどこかで書き出した後、initAccodion()で
アコーディオンのchildをすべて取得して、それぞれにaddChildしています。

ただ、これだと、ヘッダーにかぶさって？
かわかりませんが、ボタンが押した感じがしないので、
マウスオーバーで指さしマークにしたいとおもいますが、
長くなるので、わけます。