Appendix:VLEを使って画面を簡単に作る!


Appendix:VLEを使って画面を簡単に作る!

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


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

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

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

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

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

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

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

プロジェクト

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

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

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

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

    プロジェクト

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

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

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

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


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

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

パレット
レイアウトに追加できるオブジェクトがあります。オブジェクトは種類ごとにタブで分類されています。「最近使ったオブジェクト」タブには、最近使われた10のアイコンが表示されます。
レイアウトツリー
レイアウトツリーでは、レイアウトの階層がツリー形式で表示されます。ここではエクスプローラと同じように階層の開閉ができます。また、この領域でオブジェクトを選択または移動したり、オブジェクト名をドラッグしてグラフィカル階層を操作することも可能です。
レイアウト
レイアウトではオブジェクトをドラッグしてグラフィカル階層を操作できます。この領域に最初に表示されているのはトップレベルのコンテナで、VLEのファイルを新規に作成した場合の既定ではCanvasクラスとなります。
プロパティ
プロパティは2つのタブから構成されています。「プロパティ」タブでは、レイアウト領域やレイアウトツリー領域で選択されたオブジェクトのプロパティを編集できます。「イベントハンドラ」タブでは、選択されたオブジェクトにイベントハンドラを追加できます。イベントハンドラは、CDEのエディタと連動して記述できます。

プロジェクト

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

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

(1)グラフィカルオブジェクトの追加
  • 図12の画面のように、パレット上のコンテナおよびコントロールを選択
  • レイアウトペインもしくはレイアウトツリーにマウスを移動させて貼り付ける

    プロジェクト

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

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

プロジェクト

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

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

プロジェクト

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

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

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

プロジェクト

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

(4)ファイルおよびプロジェクトの実行
作成されたレイアウトを表示させるには、VLEの「実行」メニューの「ファイルを実行」、もしくはCDEからVLEで作成したファイルを指定して実行します。

プロジェクト

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

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

なお、ダウンロードしてサンプルの「VLE-Sample」のフォルダ内にあるプロジェクトをCDEがインストールされたEclipseでインポートするとVLEを使って開発したソースファイルがすべて参照できます。その中のvle-container.scurlをVLEで開いて確認してください。

VLE

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