Flex/ドラッグアンドドロップを実装する
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
// 下階層用テンプレート
#topicpath
----
//ここにコンテンツを記述します。
[[Eclipseプラグイン開発>Eclipse/プラグイン開発のTIPS集/Go...
ポイントは
-ドラッグ側で、
<mx:DataGrid id="datagrid" dataProvider="{myArrayOfObjec...
などとドラッグ可能であることを宣言する
-ドロップ側で
<mx:DataGrid id="datagrid1" dragEnter="doDragEnter(event...
などとドラッグで入ってきたとき(dragEnter)、ドロップされた...
ってことですね。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に...
datagrid.removeItemAt(datagrid.selectedIndex);//逆...
}
]]>
</mx:Script>
ドラッグ中
#ref(01.png)
ドロップ後
#ref(02.png)
ソースは結局以下の通り:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/200...
<!-- 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に...
datagrid.removeItemAt(datagrid.selectedIndex);//逆...
}
]]>
</mx:Script>
<mx:HBox>
<mx:Panel title="DataGrid">
<mx:HBox>
<mx:DataGrid id="datagrid" dataProvider="{myArr...
<!-- さっきの配列をBind -->
<mx:columns>
<mx:Array>
<mx:DataGridColumn headerText="Label" col...
<mx:DataGridColumn headerText="Volume" co...
<mx:DataGridColumn headerText="Revenue" c...
</mx:Array>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid id="datagrid1" dragEnter="doDragEn...
<!-- さっきの配列をBind -->
<mx:columns>
<mx:Array>
<mx:DataGridColumn headerText="Label" col...
<mx:DataGridColumn headerText="Volume" co...
<mx:DataGridColumn headerText="Revenue" c...
</mx:Array>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
<mx:ControlBar>
<mx:Label text="You chose:{datagrid.selectedIte...
</mx:ControlBar>
</mx:Panel>
</mx:HBox>
</mx:Application>
いやあ、Flex、やばいです。データモデルに対するウィジェッ...
ちなみに、DataGridからアイテムを削除したり、追加したりど...
[[Flex ActionScript および MXML API リファレンスガイド(Da...
----
この記事は
#vote(おもしろかった[46],そうでもない[11])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
終了行:
// 下階層用テンプレート
#topicpath
----
//ここにコンテンツを記述します。
[[Eclipseプラグイン開発>Eclipse/プラグイン開発のTIPS集/Go...
ポイントは
-ドラッグ側で、
<mx:DataGrid id="datagrid" dataProvider="{myArrayOfObjec...
などとドラッグ可能であることを宣言する
-ドロップ側で
<mx:DataGrid id="datagrid1" dragEnter="doDragEnter(event...
などとドラッグで入ってきたとき(dragEnter)、ドロップされた...
ってことですね。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に...
datagrid.removeItemAt(datagrid.selectedIndex);//逆...
}
]]>
</mx:Script>
ドラッグ中
#ref(01.png)
ドロップ後
#ref(02.png)
ソースは結局以下の通り:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/200...
<!-- 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に...
datagrid.removeItemAt(datagrid.selectedIndex);//逆...
}
]]>
</mx:Script>
<mx:HBox>
<mx:Panel title="DataGrid">
<mx:HBox>
<mx:DataGrid id="datagrid" dataProvider="{myArr...
<!-- さっきの配列をBind -->
<mx:columns>
<mx:Array>
<mx:DataGridColumn headerText="Label" col...
<mx:DataGridColumn headerText="Volume" co...
<mx:DataGridColumn headerText="Revenue" c...
</mx:Array>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid id="datagrid1" dragEnter="doDragEn...
<!-- さっきの配列をBind -->
<mx:columns>
<mx:Array>
<mx:DataGridColumn headerText="Label" col...
<mx:DataGridColumn headerText="Volume" co...
<mx:DataGridColumn headerText="Revenue" c...
</mx:Array>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
<mx:ControlBar>
<mx:Label text="You chose:{datagrid.selectedIte...
</mx:ControlBar>
</mx:Panel>
</mx:HBox>
</mx:Application>
いやあ、Flex、やばいです。データモデルに対するウィジェッ...
ちなみに、DataGridからアイテムを削除したり、追加したりど...
[[Flex ActionScript および MXML API リファレンスガイド(Da...
----
この記事は
#vote(おもしろかった[46],そうでもない[11])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
ページ名: