Flexのプログラミングをやっているが、メニューバーについてはずっとどうやって効率よく実現すればいいのか、なかなかわからなかった。XMLで定義ができるが、チェックボックスやラジオボタンも、UIで変更した情報をどうやって取得すればいいかわからなかった。
いろいろ試していたら、どうやらテーブルなどと同じで、データバインディングを使うというのが正解のようだ。メニューの有効化/無効化は、enabledという属性で、チェックボックスやラジオボタンのON/OFFは、toggledという属性で操作・取得できるようだ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init()" > <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.XMLListCollection; import mx.events.MenuEvent; [Bindable] public var menuBarCollection:XMLListCollection; private var menubarXML:XMLList = <> <menuitem label="Menu1" data="top"> <menuitem label="MenuItem 1-A" type="check" data="1A"/> <menuitem label="MenuItem 1-B" data="1B"/> <menuitem label="MenuItem 1-C" data="1C" type="radio" groupName="one"/> <menuitem label="MenuItem 1-D" data="1D" type="radio" groupName="one"/> </menuitem> </>; /** * テスト */ private function init():void { menuBarCollection = new XMLListCollection(menubarXML); } private function menuHandler(e:MenuEvent):void { if (e.item.@data == "1B") { menuBarCollection.children()[0].@enabled = false; trace(menuBarCollection.children()[0].@toggled); trace(menuBarCollection.children()[2].@toggled); trace(menuBarCollection.children()[3].@toggled); } } ]]> </fx:Script> <s:VGroup width="100%" height="100%"> <mx:MenuBar width="100%" labelField="@label" dataProvider="{menuBarCollection}" itemClick="menuHandler(event);" /> </s:VGroup> </s:Application> |
ActionScriptは、Javaに比べてXMLのプログラミングがやりづらいなーって勝手に思っていたけど、実は[ ] や@などの使い方を知っていれば、Javaより簡単に扱えることがわかった。ずっと「なんだこの@は?」って思ってたけど、こういうことだったのか。