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