CodeZine(コードジン)

特集ページ一覧

Curlで構築する長崎県電子県庁システム(ポータル・スケジューラー)
UIの向上と帳票

第2回

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

 Curlは、ドラッグ&ドロップといった操作性を向上させる機能を簡単に実装できます。また、アプレットに特権を与えることによって、ローカルにあるファイルの読み書きすることもできます。Win32APIを直接呼ぶことも可能です。

はじめに

 Curlは、ドラッグ&ドロップといった操作性を向上させる機能を簡単に実装できます。また、アプレットに特権を与えることによって、ローカルにあるファイルの読み書きすることもできます。Win32APIを直接呼ぶことも可能です。

 ポータル・スケジューラーでは、このような特徴を使って操作性が良くなるようにしています。今回は、開発するにあたり工夫した点を紹介します。

ドラッグ&ドロップ

 ドラッグ&ドロップの実装は簡単に行えます。イベントは、

  • DragEnter(ターゲットに入ったときに発生)
  • DragLeave(ターゲットの外に出たとき発生)
  • DragOver(ターゲットにドラッグされたときに発生)
  • Drop(ターゲットにドロップされたときに発生)

 があります。

ドラッグ&ドロップのサンプル
ドラッグ&ドロップのサンプル
{HBox spacing = 100pt, valign = "center",
  {EllipseGraphic width = 1cm, height = 1cm, dragee = {ImageDragee}},
  {Frame width = 40pt, height = 40pt, background = "red",
    {on e:DragOver do 
      {e.will-accept-drop?
        {proc {type:Type, x:Distance, y:Distance, effect:#DragEffect}:DragEffect
          {return drag-effect-copy}
        }
      }
    },
    {on e:Drop do
      {e.accept-drop
        {proc {a:any, x:Distance, y:Distance, effect:#DragEffect}:DropResult
          {return
            {DropResultCopy
              action = {proc {}:void
                         {popup-message "ドロップされた"}
                       }
            }
          }
        }
      }
    }
  }
}

 このドラッグ&ドロップ機能を活用して、以下のような機能を実装しています。

予定のドラッグ&ドロップ

 予定をドラッグ&ドロップすることでコピー・移動が簡単に行えるようにしました。

予定をドラッグ&ドロップ
予定をドラッグ&ドロップ

エクスプローラからのドロップ

 ランチャには、アプリケーション・ファイル・フォルダのショートカットを登録できます。登録する際には、デスクトップ・エクスプローラからのドロップからも行えるようにしました。

デスクトップ・エクスプローラからの登録
デスクトップ・エクスプローラからの登録

ファイルをダウンロードして開く

 ファイル集や予定には、ファイルを添付できます。添付したファイルは、サーバにそのまま保存しています。画面上ではアイコンで表示され、ダブルクリックするとサーバからローカルにダウンロードし、関連付いたアプリケーションで実行されます。例えば、*.xlsの場合はExcelが起動することになります。

 ファイルを関連付けされているアプリケーションで開くのは、Win32APIのShellExecuteを使って実現しました。

添付されたファイルをアイコンで表示
添付されたファイルをアイコンで表示
ShellExecuteでファイルを開く
{define-dll-class public Win32API_ShellExecute
  {defaults
    calling-convention = stdcall,
    string-rep         = CStringUTF16
  }

  let public constant HIDE: int            = 0
  let public constant SHOWNORMAL: int      = 1
  let public constant NORMAL: int          = 1
  let public constant SHOWMINIMIZED: int   = 2
  let public constant SHOWMAXIMIZED: int   = 3
  let public constant MAXIMIZE: int        = 3
  let public constant SHOWNOACTIVATE: int  = 4
  let public constant SHOW: int            = 5
  let public constant MINIMIZE: int        = 6
  let public constant SHOWMINNOACTIVE: int = 7
  let public constant SHOWNA: int          = 8
  let public constant RESTORE: int         = 9
  let public constant SHOWDEFAULT: int     = 10
  let public constant MAX: int             = 10

  {constructor public {default}
    {construct-super
      {SharedLibrary "shell32"}
    }
  }

  {dll-method public {executeA ("ShellExecuteA")
                       hwnd: CPointer,
                       op: StringInterface (rep = CString),
                       file: StringInterface (rep = CString),
                       params: StringInterface (rep = CString),
                       dir: StringInterface (rep = CString),
                       cmd: int
                     }: int
  }

  {dll-method public {execute ("ShellExecuteW")
                       hwnd: CPointer,
                       op: StringInterface,
                       file: StringInterface,
                       params: StringInterface,
                       dir: StringInterface,
                       cmd: int
                     }: int
    {if-missing
      {return
        {self.executeA hwnd, op, file, params, dir, cmd}
      }
    }
  }

}

F5キーの無効化

 一般的なブラウザでは、F5キーを押すとブラウザの更新が行われページが初期化されてしまいます。しかし、以下のようにすることで、Curlではブラウザにイベントが通知される前にイベントを無効化できます。

F5キーの無効化
{{get-gui-manager}.add-event-handler
  {on t: KeyPress do
    {if t.value == KeyPressValue.f5 then
      {t.consume}
    }
  }
}

帳票出力

 ポータル・スケジューラーは、帳票出力として以下の2つを実装しています。

予定をエクセル形式で出力

 PHPでpearのSpreadsheet_WriteExcelを使用して、予定をエクセル形式で出力します。ただし、出力されるファイルフォーマットがExcel 95形式なので、1セル255文字までの制約があります。なお、出力形式を2000形式にするパッチが公開されているようです(参考:Spreadsheet_Excel_WriterでBIFF8を取り扱う - Paradigm Shift Design)。

画面のハードコピー

 画面のハードコピーをBMP形式でローカルに一時保存し、保存したファイルをプリンタに出力します。わざわざ帳票を作成するまでもないときは使えそうな機能だと思います。

画面に表示しているViewをBMPに保存する
{define-proc public {my-graphic-to-bitmap p_image: Graphic, p_file: Url}: void
  let v_gc: DisplayContext = {p_image.get-display-context},
      v_rect: GRect        = {p_image.layout.get-bounds},
      (r2: Renderer2d,
       d: Drawable)        = {Renderer2d.create-offscreen
                               v_rect.width,
                               v_rect.height,
                               1 / v_gc.pixel-size
                             },
      v_data: ImageData    = {ImageData}
  {r2.render-rectangle
    0pt, 0pt,
    v_rect.width - 0.5pt, v_rect.height - 0.5pt,
    fill-pattern = "white"
  }
  {{p_image.get-graphical-root}.draw r2}
  {r2.render-line
    0pt, 0pt,
    0pt, v_rect.height - 0.5pt,
    fill-pattern = "black"
  }
  {r2.render-line
    0pt,                  v_rect.height - 0.5pt,
    v_rect.width - 0.5pt, v_rect.height - 0.5pt,
    fill-pattern = "black"
  }
  {r2.render-line
    v_rect.width - 0.5pt, v_rect.height - 0.5pt,
    v_rect.width - 0.5pt, 0pt,
    fill-pattern = "black"
  }
  {r2.render-line
    v_rect.width - 0.5pt, 0pt,
    0pt,                  0pt,
    fill-pattern = "black"
  }
  set v_data.pixmaps =
        {new {Array-of Pixmap},
          {d.to-Pixmap}
        }
  {v_data.save-to-url p_file, "image/bmp"}
  {d.destroy}
}

デバッガ・ヘルプ

 さて、ここからはCurlの開発について少し紹介したいと思います。Curlには、Curl IDEをはじめとした、さまざまな開発支援ツールが充実しています。

デバッガ

 Curl IDEでは、ブレークポイントを設定することができます。デバッグ実行時には、このブレークポイントで処理がストップし、ステップ実行や実行途中の変数の中身を確認したり変更できます。デバッガを活用することで、バグの原因究明を早期に行うことができ、デバッグを効率的に行うことができるようになります。

ブレークポイントの設定
ブレークポイントの設定

ヘルプ

 Curlのヘルプの大きな特徴の1つに、多数のサンプルコードが掲載されている点があります。しかも、その場でコードを変更して処理の結果を確認できます。Curlには、膨大な数のAPIが存在しますが、簡単にAPIの機能確認を行うことができます。

ヘルプ
ヘルプ

プロファイラ

 Curlには、標準でプロファイルビューアというツールがあります。このツールは、関数単位で処理時間を計測できるもので、処理速度をチューニングなどの際に活躍します。

プロファイルビューア
プロファイルビューア

まとめ

 Curlは、ドラッグ&ドロップを取り入れてアプリケーションの操作性を格段にあげることができます。また、ローカルにあるファイルの読み書きや、Win32APIを直接呼ぶことができることがおわかりいただけたと思います。さまざまな開発ツールもアプリケーション作成を簡単にしてくれます。

 Curlに関する情報は、以前に比べてずいぶん増えてきたように思います。Curl RTE(ランタイム)とCurl IDEは無償で提供されているので、一度試されてみてはいかがでしょうか。

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

著者プロフィール

  • 株式会社ドゥアイネット 前田慎治(マエダシンジ)

    株式会社ドゥアイネットに勤務するプログラマーです。制御系から事務系まで 様々な開発を経験し、現在はCurlやOpenLaszloを使ってRIAの開発を担当してい ます。 OpenLaszloで開発した「スマートスケジューラー」 http://www.dinss.jp/

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