// 下階層用テンプレート
#topicpath
----
//ここにコンテンツを記述します。
[[Eclipseプラグイン開発>Eclipse/プラグイン開発のTIPS集/GooglePlugin/ドラッグアンドドロップを実装する]]では「さあいよいよドラッグアンドドロップに挑戦してみるかー」という感じだったのですが、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>
ドラッグ中
#ref(01.png)
ドロップ後
#ref(02.png)
ソースは結局以下の通り:
<?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):http://www.macromedia.com/support/documentation/jp/flex/1_5/asdocs_jp/index.html?mx/containers/Container.html]]
----
この記事は
#vote(おもしろかった[45],そうでもない[11])
#vote(おもしろかった[46],そうでもない[11])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
![[PukiWiki]](https://www.masatom.in/pukiwiki/image/kinosite.png "[PukiWiki]"){kind=small}
