FlexでAccordionHeaderにボタンを配置

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しています。

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

Tweet