サンプルの実装解説
さて、見積デモのドラッグ＆ドロップ機能を見ていきましょう。
見積デモではリストの一覧から項目をドラッグすると、グリッド上にデータが表示されるようになっています。このうち、まずは画面左側のListBoxに注目します。ListBoxは複数の項目から任意の項目を選択するというものですが、今回はこの選択した項目がドラッグできるようにします。項目はListValueItemというクラスによって実装されているので、このListValueItemに対してドラッグ機能を追加します。
見積デモのリスト
{let lb:ListBox = {ListBox width = 100pt,height = 300pt}}
{do
||ListBoxにアイテムを追加します。
{for record:Record in goods-list do
let new-item:ListValueItem =
{ListValueItem
record,
label = record["name"]
}
||ListValueItemをドラッグするために
||drageeを設定します。
set new-item.dragee = {ImageDragee}
{lb.append new-item}
}
}
これで選択した商品がドラッグできるようになりました。
次に、RecordGridの方にも処理を実装します。RecordGridはグラフィックをドロップされる側なので、ドロップ時に発生するイベントを実装します。
{let rg:RecordGrid =
{RecordGrid
width = 500pt,
height = 300pt,
record-source = list,
||RecordGridにドラッグされたときのイベント
||(DragOver)を追加します。
{on e:DragOver do
{e.will-accept-drop?
{proc {t:Type,x:Distance,y:Distance,effect:#DragEffect}:DragEffect
{return
||ここでは、ListValueItemが来たときのみドラッグを許容します。
||それ以外のオブジェクトについてはドラッグすることが出来ないようにします。
{if {t.subtype-of? ListValueItem}
then
drag-effect-copy
else
drag-effect-none
}
}
}
}
},
||RecordGridにドロップしたときのイベント
||(Drop)を追加します。
{on e:Drop do
{e.accept-drop
{proc {obj:any,x:Distance,y:Distance,effect:#DragEffect}:DropResult
{if not obj isa ListValueItem
then
{return {DropResultNone}}
}
let item:ListValueItem = obj asa ListValueItem
let goods-record:Record = item.value asa Record
||現在表示されているレコードと突合せを行います。
||Codeがドロップした商品のIDと等しい項目があるかどうかで
||処理が分岐します。
{if-non-null list-record:Record =
{list.select-one
filter = {RecordData Code = goods-record["id"]}
}
then
||レコードが存在する場合は、個数と小計の更新を行います。
let count:int = list-record["Count"] asa int
let price:int = list-record["Price"] asa int
set list-record["Count"] = count + 1
set list-record["Subtotal"] = (count + 1) * price
else
||レコードが存在しない場合は、新規にレコードを追加します。
{list.append
{RecordData
Code = goods-record["id"],
Name = goods-record["name"],
Price = goods-record["price"],
Count = 1,
Subtotal = goods-record["price"]
}
}
}
{return {DropResultNone}}
}
}
}
}
}
グリッドにDragOverとDropイベントを記述することによって、RecordGridは初めてドラッグされてきたグラフィックを受けつけることができます。これを実際に起動すると、次の図のようなアプリケーションが実行されます。実際のサンプルについては添付のソースを参照してください。なお、Developer Centerではこれ以外にもさまざまなサンプルが紹介されています。
起動すると次のようなアプリケーションが実行される
ドラッグ＆ドロップの利点
ドラッグ＆ドロップの実装方法について理解いただけましたでしょうか？ ドラッグ＆ドロップを実装することのメリットは、直感的な操作が行えるようになることで、コンピュータの利用に慣れていない初心者でも分かりやすいUIを提供できることにあります。新規システムを構築する際にはぜひ検討してみてください。
次回は、印刷の機能について詳しく見ていきます。
