Curlで始めるリッチクライアント（3）　Page 2/3

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

住商情報システム
三野 凡希
2005/7/14

■VLEの構成およびレイアウトの構築

　 次にVLEの画面構成とレイアウト（アプリケーションの画面）を構築していく方法です。VLEは図3のような画面になっており、4つの主要な領域があります。

パレット

　レイアウトに追加できるオブジェクトがあります。オブジェクトは種類ごとにタブで分類されています。「最近使ったオブジェクト」タブには、最近使われた10のアイコンが表示されます。

レイアウトツリー

　レイアウトツリーでは、レイアウトの階層がツリー形式で表示されます。ここではエクスプローラと同じように階層の開閉ができます。また、この領域でオブジェクトを選択または移動したり、オブジェクト名をドラッグしてグラフィカル階層を操作することも可能です。

レイアウト

　レイアウトではオブジェクトをドラッグしてグラフィカル階層を操作できます。この領域に最初に表示されているのはトップレベルのコンテナで、VLEのファイルを新規に作成した場合の既定ではCanvasクラスとなります。

プロパティ

　プロパティは2つのタブから構成されています。「プロパティ」タブでは、レイアウト領域やレイアウトツリー領域で選択されたオブジェクトのプロパティを編集できます。「イベントハンドラ」タブでは、選択されたオブジェクトにイベントハンドラを追加できます。イベントハンドラは、Surge Lab IDEのエディタと連動して記述できます。

図3　VLEの主要な4つの領域

　以上の主要な4つのエリアを使用して画面を構築していきます。レイアウト作成方法の基本的な手順を以下に示します。

（1）グラフィカルオブジェクトの追加

• 図4の画面のように、パレット上のコンテナおよびコントロールを選択
• レイアウトペインもしくはレイアウトツリーにマウスを移動させて貼り付ける

図4　ドラッグ＆ドロップによるグラフィカルオブジェクトの追加

　上記手順を繰り返すことで画面を構築していきます。レイアウトツリーには階層を意識してオブジェクトを追加できます。

図5　レイアウトツリーで階層を意識したオブジェクトの追加

（2）プロパティの設定

　プロパティには、レイアウトおよびレイアウトツリーで選択されたオブジェクトのプロパティと値が表示されます。値の変更は直接入力するか、メニューがある場合はそこから選択できます。

図6　メニューを使ったプロパティの設定

（3）イベントの追加

　各オブジェクトに対して、1つ以上のイベントハンドラを追加できます。オブジェクトを選択して、プロパティの「イベントハンドラ」タブを選択します。

• 名前列はイベントの種類を示しており、値列にある{}ボタンを選択
• 自動的にSurge Lab IDEが起動され、編集対象のコードセクションが表示される（イベントハンドラについては第1回を参照）

　VLEレイアウトを含んだファイルのイベントハンドラ追加は、VLEまたはIDEの両方で編集できます。一方のエディタで行った編集は他方のエディタに反映されます。

図7　イベントハンドラの追加

（4）ファイルおよびプロジェクトの実行

　作成されたレイアウトを表示させるには、VLEの「実行」メニューの「ファイルを実行」、もしくはSurge Lab IDEからVLEで作成したファイルを指定して実行します。

図8　プロジェクトを実行し、レイアウトを確認する

　Surge Lab IDEで「ビジュアルレイアウトエディタプロジェクト」を選択して新規プロジェクトを作成した場合、既定では「start.curl」が起動ファイルとなります。その場合はプロジェクトの実行を行うか、もしくはstart.curlを指定して実行することで、VLEで作成した画面を表示できます。

　以上が基本的なVLEの使用方法になります。各オブジェクトの詳細な情報、そのほかのVLE情報についてはSurge Labドキュメントの「Surge Lab VLE　ユーザーガイド」を参照してください。（次ページに続く）

2/3

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

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）