Flex/ドラッグアンドドロップを実装する

Eclipseプラグイン開発では「さあいよいよドラッグアンドドロップに挑戦してみるかー」という感じだったのですが、Flexではすごい簡単でした。

ポイントは

• ドラッグ側で、

  <mx:DataGrid id="datagrid" dataProvider="{myArrayOfObjects.hogeModel}"  dragEnabled="true">

  などとドラッグ可能であることを宣言する
• ドロップ側で

  <mx:DataGrid id="datagrid1" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)">

  などとドラッグで入ってきたとき(dragEnter)、ドロップされたとき(dragDrop)、の処理を実装する

ってことですね。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)

この記事は

現在のアクセス:25205