Eclipseプラグイン開発では「さあいよいよドラッグアンドドロップに挑戦してみるかー」という感じだったのですが、Flexではすごい簡単でした。 ポイントは
ってことですね。dragEnter,dragDropそれぞれのActionScript?は以下のようにしてみました。 <mx:Script> <![CDATA[ // ドラッグしてウィジェットに入ったときに呼ばれるメソッド。 function doDragEnter(event):Void { // allow drop event.handled=true; <- ドロップしていいよ // event.targetはドロップされる側のウィジェット。 // set action to copy // event.action=DragManager.COPY; } // ドロップしたときに呼ばれるメソッド。 function doDragDrop(event):Void { /* event.dragSource.dataForFormat("items") returns an array of dragged data items */ var items = event.dragSource.dataForFormat("items"); // for convenience, set var for drop target var dest = event.target; // event.targetはドロップされる側のウィジェット。 // copy the item target's dataProvider dest.addItem(items[0]); // ドロップされるDataGridにDragSorceで選択したモノを追加。 datagrid.removeItemAt(datagrid.selectedIndex);//逆に元のDataGridから削除。 } ]]> </mx:Script> ドラッグ中 ドロップ後 ソースは結局以下の通り: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <!-- Objectの配列の定義 --> <mx:Model id="myArrayOfObjects" source="hogeData.xml"/> <!-- Objectの配列の定義 以上 --> <mx:Script> <![CDATA[ // ドラッグしてウィジェットに入ったときに呼ばれるメソッド。 function doDragEnter(event):Void { // allow drop event.handled=true; <- ドロップしていいよ // event.targetはドロップされる側のウィジェット。 // set action to copy // event.action=DragManager.COPY; } // ドロップしたときに呼ばれるメソッド。 function doDragDrop(event):Void { /* event.dragSource.dataForFormat("items") returns an array of dragged data items */ var items = event.dragSource.dataForFormat("items"); // for convenience, set var for drop target var dest = event.target; // event.targetはドロップされる側のウィジェット。 // copy the item target's dataProvider dest.addItem(items[0]); // ドロップされるDataGridにDragSorceで選択したモノを追加。 datagrid.removeItemAt(datagrid.selectedIndex);//逆に元のDataGridから削除。 } ]]> </mx:Script> <mx:HBox> <mx:Panel title="DataGrid"> <mx:HBox> <mx:DataGrid id="datagrid" dataProvider="{myArrayOfObjects.hogeModel}" dragEnabled="true"> <!-- さっきの配列をBind --> <mx:columns> <mx:Array> <mx:DataGridColumn headerText="Label" columnName="label" /> <mx:DataGridColumn headerText="Volume" columnName="volume" /> <mx:DataGridColumn headerText="Revenue" columnName="revenue" /> </mx:Array> </mx:columns> </mx:DataGrid> <mx:DataGrid id="datagrid1" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)"> <!-- さっきの配列をBind --> <mx:columns> <mx:Array> <mx:DataGridColumn headerText="Label" columnName="label" /> <mx:DataGridColumn headerText="Volume" columnName="volume" /> <mx:DataGridColumn headerText="Revenue" columnName="revenue" /> </mx:Array> </mx:columns> </mx:DataGrid> </mx:HBox> <mx:ControlBar> <mx:Label text="You chose:{datagrid.selectedItem.label}"/> </mx:ControlBar> </mx:Panel> </mx:HBox> </mx:Application> いやあ、Flex、やばいです。データモデルに対するウィジェットの感応度が高いというか、最初からわかってて作ってるというか。いままでEclipseRCPがリッチクライアントの最右翼と思ってたんですけど、Flexもかなりきてますね。 ちなみに、DataGrid?からアイテムを削除したり、追加したりどうやんのかなあ、選択しているアイテムのIndexはどう取得するのかなあとか、いわゆるJavaDoc?的なモノはすでに日本語化されているモノがあります。このドキュメントの整備度(?)も、きてます。。マクロメディ(つうかAdobe)ア、Flexは本気だな。。 Flex ActionScript および MXML API リファレンスガイド(DataGrid) この記事は 現在のアクセス:24705 |