4 レッスン
4.4.1 設定内容
60/88
4.4 ［レッスン15］Dojoを使ったドラッグ・アンド・ドロップ
ページでのドラッグ・アンド・ドロップ機能を実現します。モデルはドラッグ用とドロッ プ用に最低でも2つ作成する必要があります。ここでは、Excelからのデータ取得用にもう 一つモデルを作成しています（計3つ）。
モデル一覧
z providerモデル: 外部から値を取り込むモデル
z sourceモデル: targetモデルにドラッグ可能 z targetモデル: sourceモデルからドロップ可能
図：データの流れ
1. providerモデルの作成
Excelからデータを取り込むためのproviderモデルにビルダーを追加します。
1.Service Definitionビルダーの追加 設定値
サービス名 provider1 サービスを公開 チェック
2.Excel Importビルダーの追加 設定値
名前 getProductSalesSource
インポートするファイル /売上げ集計.xls スキーマを生成 Designer再生成時
コンテンツ選択方法 自動（Builderにコンテンツを検索させる）
シート 集計
ヘッダー行あり チェック 空の行を保持 非チェック セルのフォーマット設定を保持 チェック
3.Service Operationビルダーの追加 設定値
データ・サービス provider1(入力済み)
操作名 getProductSales
サ ー ビ ス 操 作 プ ロ
パティー 呼び出すアクション DataServices/getProductSalesSource/execute 操作入力 入力構造処理 入力なし
結果構造処理 呼び出されたアクションからの構造を使用 操作結果
結果フィールド・マッピング 自動
これでproviderモデルの作成が終了しました。
62/88 2.sourceモデル作成
sourceモデルにビルダーを追加します。
1.Service Consumerビルダーの追加 設定値
名前 consumer1
プロバイダー・モデル provider すべてのプロバイダー操作を追加 チェック
2.Pageビルダーの追加
雛形のHTMLは全て削除して、新たにHTMLを書き直します。
設定値
名前 sourcePage
ページ・コンテンツ <html>
<body>
[Drag]
<form name="myForm" method="post">
<div><span name="drag_table" /></div>
</form>
</body>
</html>
3.Action Listビルダーの追加 設定値
名前 main
アクション・リスト１ DataServices/consumer1/getProductSales アクション
アクション・リスト２ sourcePage
4.Data Pageビルダーの追加 設定値
名前 datapage1
変数 DataServices/consumer1/getProductSales/results
モデル内のページ sourcePage ページ・タイプ HTMLから推測
データからUIを作成 チェック 作成済みエレメントの設定値
新規タグの場所 drag_table
図 51 Data Pageビルダー設定画面
64/88 5.Data Column Modifierビルダーの追加
設定値
名前 columnModifier
コンテナー・フィールド [sourcePage]datapage1/ExcelContent/Row
追加列 dragImage
行の追加操作と行の削除操作の
設定値 列を管理 チェック
1 列名: dragImage 状況: 変更しない 列見出し: アイコン 2 列名: 商品名 状況: 変更しない 列見出し: 今年度 3 列名: 今年度 状況: 変更しない 列名: 今年度 4 列名: 昨年度 状況: 変更しない 列名: 昨年度 5 列名: 一昨年度 状況: 変更しない 列名: 一昨年度
図 52 Data Column Modifierビルダー設定画面（一部）
追加した列を一番上にもってくる
6.Imageビルダーの追加
Data Column Modifierビルダーで追加した列'dragImage'にドラッグ用の画像を配置しま
す。
設定値
名前 image1
位置指定の方法 名前付きタグ上
ページ sourcePage
ページの場所
タグ dragImage
イメージ・ソース /factory/images/tree/closenode.gif
図 53 Imageビルダー設定画面
66/88 7.Dojo Drag Sourceビルダーの追加
ドラッグ・タイプは、ドロップ・ターゲットに渡されるデータの名前です。任意の半角英 数字で指定します。また、Dojo Drop Targetビルダーで指定するドロップ・タイプと一致 している必要があります。
設定値
名前 dojoDragSource
位置指定の方法 名前付きタグ上
ページ sourcePage
ページの場所
タグ dragImage
ドラッグ・ソース・データ ${Variables/RowLoopVar/Row/商品名}
ドラッグ・タイプ product
図 54 Dojo Drag Sourceビルダー設定画面
8.Portlet Adapterビルダーの追加 設定値
名前 samplePortlet1
ポートレットのタイトル dojoDragSourceポートレット ポートレットの短いタイトル dojoDragSourceポートレット デフォルト・ロケール ja
68/88 3.targetモデル作成
targetモデルにビルダーを追加します。
1.Pageビルダーの追加
雛形のHTMLは全て削除して、新たにHTMLを書き直します。
設定値
名前 targetPage
ページ・コンテンツ <html>
<body>
[Drop]
<div><span name="drop_area" /></div>
<hr>
<div><span name="message_area" /></div>
<hr>
</body>
</html>
2.Action Listビルダーの追加 設定値
名前 main
アクション アクション・リスト targetPage
3.Variableビルダーの追加 設定値
名前 varDropMessage
タイプ String
初期値 何もDropされていません。
図 55 Variableビルダー設定画面
4.Textビルダーの追加 設定値
名前 textMessage
位置指定の方法 名前付きタグ上
ページ targetPage
ページの場所
タグ message_area
テキスト ${Variables/varDropMessage}
70/88
5.Imageビルダーの追加
データを受け取る為に、ドロップ先の画像を配置します。
設定値
名前 image1
位置指定の方法 名前付きタグ上
ページ targetPage
ページの場所
タグ drop_area
イメージ・ソース /factory/images/peoplepicker/Search.gif
図 56 Imageビルダー設定画面
6.Action Listビルダーの追加
このアクションはDojo Drop Targetビルダーから呼ばれることを前提にしています。その 為、単一のストリング引数を受け取れるように定義します。この引数にはドラッグ・ソー スから受け取った値が格納されています。
設定値
名前 actSelectItem
名前 product
引数
データ型 String
アクション・リスト１ Assignment!Variables/varDropMessage=${Ar guments/product}
アクション
アクション・リスト２ Assignment!Variables/varDropMessage+=が Dropされました。
図 57 Action Listビルダー設定画面
72/88 7.Dojo Drop Targetビルダーの追加
ドロップ・アクションで呼び出すメソッドは、単一のストリング引数を受け取れる必要が あります。ドロップされた際に呼ばれ、ドラッグ・ソースからデータを引数に渡します。
ドロップ・タイプは、ドラッグ・ソースから受け取るデータの名前です。任意の半角英数 字で指定します。また、Dojo Drag Sourceビルダーで指定するドラッグ・タイプと一致し ている必要があります。
設定値
名前 dojoDropTarget
位置指定の方法 名前付きタグ上
ページ targetPage
ページの場所
タグ drop_area
ドロップ・アクション actSelectItem ドロップ・タイプ product
拡張オプションの表示 非チェック
アクション後の操作 アクション実行後に指定ページ場所を最新表示 アクション後
の操作
最新表示する場所 ページ: targetPage タグ: message_area
図 58 Dojo Drop Targetビルダー設定画面（一部）
8.Portlet Adapterビルダーの追加 設定値
名前 samplePortlet2
ポートレットのタイトル dojoDropTargetポートレット ポートレットの短いタイトル dojoDropTargetポートレット デフォルト・ロケール ja
74/88