Curlで始めるリッチクライアント(3) Page 1/3

Curl独自のIDEでビジュアルな開発を実現

住商情報システム
三野 凡希
2005/7/14
本連載では、リッチクライアント製品「Curl」の試用版を使って、その開発スタイルやCurl言語の特性、開発ツール、GUIコンポーネントなどを検証していく。情報系アプリケーションに強いとされるCurlだが、ここでは企業の業務アプリケーションに求められる「入力系コントロール」の実力に注目した内容をお届けしよう。(編集部)

今回の内容

 第1回「入力系アプリケーションでCurlを使ってみる」と第2回「Curlによるオブジェクト指向開発と強力な標準クラス」で説明したサンプル・アプリケーションは、Curlのシンタックスを理解するためにすべてコーディングしたものでした。しかし、より簡単に多くの画面を作成できる効率的な開発方法があります。それがSurge Lab IDEに付属されたビジュアルレイアウトエディタ(以下、VLE)を使用した開発です。今回はVLEを使用した開発方法を説明します。

 まず、統合開発環境をダウンロードしてインストールしましょう。Surge Lab IDEおよびVLEは以下のURLからダウンロードできます(インストールの詳細は第1回を参照)。

 なお、今回はVLEの説明に特化するため、Surge Lab IDEの詳細な説明はしません。操作方法はSurge Labドキュメントの「Surge Lab IDE ユーザーガイド」を参照してください。

VLEの起動およびファイル作成

 VLEはマウス操作でオブジェクトの追加、サイズ変更、移動が可能なビジュアル開発環境です。Curlの基本的なコンテナ、コントロールがそろっており、ドラッグ&ドロップでコーディングをすることなく画面を作成できます。

 VLEを起動し新規にソースファイルを作成していきましょう。基本的な手順は以下のとおりです。

  1. 「スタートメニュー」−「Curl IDE」−「Surge Lab IDE」を選択し起動
  2. Surge Lab IDEの「ツール(T)」メニュー−「ビジュアルレイアウトエディタ」を選択

 また、VLEで作成するレイアウトを含んだソースファイルを作成するもっと簡単な方法は以下の手順となります。

  1. SurgeLabIDEの「ファイル」−「新規プロジェクト」を選択
  2. ダイアログが表示されたら「ビジュアルレイアウトエディタプロジェクト」を選択

 するとSurge Lab IDEのプロジェクトペインに以下のように表示されます。

図1 Surge Lab IDEのプロジェクトペイン

 図1の「vle-container.scurl」にはVLEで操作可能なCanvasクラスをトップレベルのコンテナにしたレイアウトが含まれており、ファイル名をダブルクリックすることで自動的にVLEが起動されます。

 また、VLEからも以下の手順で作成できます。

  1. VLEの「ファイル」メニュー−「新規」から以下のダイアログボックスを開く
図2 VLEの「新規」ダイアログボックス

 このダイアログボックスで「アプレット(A)」を選択すると、作成されるファイルそのものが単体で実行されるファイル(.curl)になり、「フラグメント(G)」を選択すると、インスタンス化はできるが単体では実行できないファイル(.scurl)が作成されます。

 生成されるコードの違いは「フラグメント(G)」はインスタンス化できるクラスのコードのみが生成されるのに対し、「アプレット(A)」はクラスのコードとそのクラスのインスタンスを生成して画面に表示するコードが追加されます。「フラグメント」を選択した場合、そのソースコードのクラスのインスタンスを生成して画面に表示するアプレットファイルを別に作成する必要があります。

 ここでは「アプレット」を選択します。

  1. ファイル名、ディレクトリを任意に指定
  2. レイアウトコンテナを指定。ここでは、レイアウトのトップレベルの階層にくるコンテナを指定する(設定したトップレベル階層のコンテナは後で変更できる)
  3. 「OK」ボタンを押すと指定したディレクトリに新規にファイルが作成され、VLEにレイアウトが表示される

次ページへ続く)

  1/3

 INDEX

Curlで始めるリッチクライアント(3)
Curl独自のIDEでビジュアルな開発を実現
Page1
今回の内容
VLEの起動およびファイル作成
  Page2
VLEの構成およびレイアウトの構築
  Page3
独自コントロールをVLEに登録する




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間