Curl入門 - ビジュアルレイアウトエディタ（VLE） [SCSK株式会社]

Appendix：VLEを使って画面を簡単に作る！

より簡単に多くの画面を作成できる効率的な開発方法があります。それがCDEに付属されたビジュアルレイアウトエディタ（以下、VLE）を使用した開発です。今までの画面はVLEを使用しても開発することができます。

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

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

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

CDEがインストールされたEclipseを起動する。
CDEの「ツール（T）」メニュー－「ビジュアルレイアウトエディタ」を選択

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

Curlプロジェクトを選択
プロジェクトを作成し、ダイアログが表示されたら「ビジュアルレイアウトエディタプロジェクト」を選択

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

図9　CDEのプロジェクトペイン

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

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

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

図10　VLEの「新規」ダイアログボックス

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

生成されるコードの違いは「フラグメント（G）」はインスタンス化できるクラスのコードのみが生成されるのに対し、「アプレット（A）」はクラスのコードとそのクラスのインスタンスを生成して画面に表示するコードが追加されます。「フラグメント」を選択した場合、そのソースコードのクラスのインスタンスを生成して画面に表示するアプレットファイルを別に作成する必要があります。
ファイル名、ディレクトリを任意に指定
レイアウトコンテナを指定。ここでは、レイアウトのトップレベルの階層にくるコンテナを指定する（設定したトップレベル階層のコンテナは後で変更できる）
「OK」ボタンを押すと指定したディレクトリに新規にファイルが作成され、VLEにレイアウトが表示される

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

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

パレット

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

レイアウトツリー

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

レイアウト

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

プロパティ

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

プロジェクト