CodeZine(コードジン)

特集ページ一覧

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

第2回

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

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

 本連載では、Curl Apps Galleryで公開されている見積デモの主な機能について解説していきます。今回は、見積入力画面で利用されているドラッグ&ドロップの機能について見て行きます。

目次

はじめに

 第1回の連載では見積デモで使用されていたRecordGridというAPIについて説明しました。今回は、見積入力画面で利用されているドラッグ&ドロップの機能について見ていきたいと思います。見積入力画面では、商品名から見積の明細を入力するためにドラッグ&ドロップが利用されています。

見積入力画面。ドラッグ&ドロップの機能が利用されている
見積入力画面。ドラッグ&ドロップの機能が利用されている

 ドラッグ&ドロップを使用することによってユーザーは商品一覧から見積を選択するだけで自動的に売上が計算されます。新規に商品を選択した場合は新しい項目が追加され、既に選択済みの商品については個数が増加します。今回はこのドラッグ&ドロップの機能について見ていきます。

前回の記事

ドラッグ&ドロップとは

 具体的な見積デモの内容を見る前に、まずはドラッグ&ドロップの基本的な機能について見てみましょう。ドラッグ&ドロップのサンプルソースは次のとおりです。

{curl 6.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}
{HBox spacing = 5cm, valign = "center",
    || Step 1: ドラッグしたいグラフィックのdrageeプロパティに
    ||         ImageDrageeを指定します。
    {EllipseGraphic width = 1cm, height = 1cm, dragee = {ImageDragee}},
    || Step 2: これはドロップする対象のグラフィックです。
    {Frame
        width = 2cm, height = 2cm,
        border-width = 2pt,
        background = "#ccccff",
        || 以下は DragOver イベントです。
        || DragOver.will-accept-drop?メソッドの呼び出しにより、
        || グラフィックをドラッグしようとするときの処理を制御します。
        {on e:DragOver do 
            {e.will-accept-drop?
                || ここでは何もせずドロップグラフィックを許容します。
                {proc {type:Type, x:Distance, y:Distance,
                       effect:#DragEffect}:DragEffect
                    {return drag-effect-copy}
                } } }, || stacked for compactness
        || Step 3: 以下は Drop イベントです。
        || Drop.accept-dropイベントの呼び出しにより、
        || グラフィックをドロップしたときの処理を制御します。
        {on e:Drop do
            {e.accept-drop
                {proc {a:any, x:Distance, y:Distance,
                       effect:#DragEffect}:DropResult
                    {return {DropResultCopy
                            || 'action' プロパティは
                            || ボールがドロップされたときに発生するイベントです。
                            action = {proc {}:void
                                    {popup-message
                                        "ボールをドロップしました!",
                                        modal? = true}
} } } } } } } }

 このサンプルを実行すると次のような画面が表示されます。画面左のボールを右側の四角にドラッグすると、メッセージが表示されます。

サンプル画面。画面左のボールをドラッグすると…
サンプル画面。画面左のボールをドラッグすると…
次のようなメッセージが表示される
次のようなメッセージが表示される

 サンプルを見るとわかりますが、ドラッグ&ドロップの処理はドラッグされる側のグラフィックとドロップされる側のグラフィックが一対になって実装されます。そのため実装が難しく感じられるかもしれませんが、実装箇所と内容を整理すれば他の機能の実装とあまり変化はありません。


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

バックナンバー

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

もっと読む

著者プロフィール

あなたにオススメ

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