CodeZine(コードジン)

特集ページ一覧

Curl Apps Galleryで注目を集める「見積デモ」を紐解く
~ドラッグ&ドロップ~

第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

ダウンロード サンプルソース (1.6 KB)

目次

サンプルの実装解説

 さて、見積デモのドラッグ&ドロップ機能を見ていきましょう。

 見積デモではリストの一覧から項目をドラッグすると、グリッド上にデータが表示されるようになっています。このうち、まずは画面左側の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を提供できることにあります。新規システムを構築する際にはぜひ検討してみてください。

 次回は、印刷の機能について詳しく見ていきます。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:CurlデベロッパーセンターPick Up

もっと読む

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5