ここではビジュアル　レイアウト　エディタ（以下、VLE）を使用したユーザーインターフェース開発の方法を説明します。
VLEは、GUIを作成するためのビジュアルな開発環境です。
ドラッグアンドドロップで、コントロールやコンテナを配置することが出来ます。またそれらのサイズや位置、各種のプロパティを設定することが出来ます。イベントハンドラの作成も可能です。

VLEはIDEから起動します。

IDE のメニュー バーで、[ツール] メニューから [ビジュアル レイアウト エディタ] を選択します。

VLEレイアウトを含むCurlソースファイルがある場合には以下の方法のいずれかでも起動できます。

• Curl IDE の［プロジェクト］ペインで、Curlソースファイルをダブルクリックします。
• Curl IDE の［プロジェクト］ペインで、Curlソースファイルを右クリックし、[VLE で開く] を選択します。

 

 

 

 

VLE レイアウトの構築手順の概要を以下に示します。

 • プロジェクトの作成

VLE プロジェクトを作成するには、統合開発環境 (IDE) の [ファイル] メニューの [新規プロジェクト] コマンドを使用します。[ビジュアル レイアウト エディタ プロジェクト] を選択すると、vle-container.scurl というファイルを含むプロジェクトが作成されます。このファイルには MyContainer というレイアウトが存在し、デフォルトでは、Canvas がそのトップレベルのコンテナとなっています。

VLE プロジェクトには、start.curl という Curl アプレット ファイルも含まれています。このファイルには、ソース ファイル vle-container.scurl にあるレイアウト MyContainer を実行するために最小限必要なコードが含まれています。start.curl は、レイアウトの実行方法のサンプルとして使用できます。開発中のアプリケーションの構造が VLE プロジェクトの構造と異なる場合は、アプリケーション内の他のファイルに同様のコードを追加する必要があります。

 • VLE の実行

vle-container.scurl をダブルクリックします。IDE により VLE が自動的に起動されます。VLE では、[編集] メニューの [新規レイアウト] コマンドを使用してレイアウトを追加したり、[レイアウトを削除] を使用してレイアウトを削除したりできます。他の VLE ファイルを作成したり開いたりするには、[ファイル] メニューの [新規] コマンドや [開く] コマンドを使用します。

 • レイアウトへのオブジェクトの追加

レイアウトにオブジェクトを追加するには、VLE パレットを使用します。編集したレイアウトは [レイアウト] ペインに表示できます。VLE で作業を進めていくと、Curl ソース コードが生成されてレイアウトに追加されます。

 

 • オブジェクト プロパティの編集

レイアウト内のオブジェクトのプロパティを編集するには、[プロパティ] ペインを使用します。各オブジェクトの [プロパティ] ペインには、そのオブジェクトで使用できるプロパティが表示されます。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• イベント ハンドラの編集

イベント ハンドラは、レイアウト内のオブジェクトの動作を実装します。イベント ハンドラを編集するには IDE エディタを使用する必要があります。

 

 

 

 

 

プロジェクトが複数メンバーで構成される場合に、プロジェクトで繰り返し使用される部品を作成し、VLEに登録する方法を紹介します。

これにより開発メンバーが、同じ部品をVLE上で利用することが出来るようになります。

大きく二つのステップに分かれます。

1. 共通部品（複合オブジェクト）の作成
2. VLEへの登録

 

（１）共通部品（複合オブジェクト）の作成

VLEを使用して、共通部品（複合オブジェクト）の作成を行います。ここでは基本的な操作のみ説明します。詳細に関しては、「Curl VLEユーザーガイド　複合オブジェクトの構築」を参照してください。

＜プロジェクトの作成＞

IDE で [ファイル]メニューの [新規プロジェクト]コマンドを使用して、レイアウトを構築する場合と同様に [ビジュアル レイアウト エディタ プロジェクト] を選択します。

＜VLEの実行＞

[ツール]メニューの [ビジュアル レイアウト エディタ] コマンドを使用して、VLE を起動します。

＜複合オブジェクトの編集＞

レイアウトの構築に用いる手法を、複合オブジェクトの構築にも利用できます。複合オブジェクトを新たに作成するには[ファイル]メニューの[新規]を選択し、[複合オブジェクトパッケージ]を選びます。パッケージ名は、作成する複合オブジェクトが格納されるパッケージの名前を指定します。また必要に応じてレイアウトコンテナを選び、クラス名を指定します。

 

複合オブジェクトを追加する場合は、[編集] メニューの [新規複合オブジェクト]を選択します。削除する場合は、[レイアウトを削除] を選択します。VLE で [編集]メニューの [複合オブジェクトにコピー] を選択すると、レイアウトを複合オブジェクトに変換できます。このオプションは、レイアウト作成から開始する場合に特に便利です。このレイアウトを複合オブジェクトとして後で実際に利用できます。

通常の、VLEのレイアウト画面が開きますが、[レイアウトツリー]のルート項目が[複合オブジェクト]になっている事が確認できます。

オブジェクトを作成し保存します。

 

（２）VLEへの登録（VLEパレットへの登録）

まず複合オブジェクトをVLEに登録するための定義ファイルを作成します。

 IDEの[ツール]メニューから[VLE機能拡張エディタ]を選択します。VLE機能拡張エディタが起動します。

VLE機能拡張エディタの[ファイル]メニューから[新規]を選択します。

　

VLE機能拡張ファイル名を指定します。（上記（１）のステップで作成したファイル名とは異なります。例えばload.scurl）

VLE 機能拡張パッケージの名前は、上記で指定したVLE機能拡張ファイル名に対するパッケージの名前になります。

OKボタンを押すとVLE機能拡張エディタが開きます。 

[インポートする実行パッケージ]の[追加]ボタンを押してください。以下のようになります。

 

パッケージ名には、複合オブジェクトが格納されているパッケージを指定してください。 

 次に[定義するパレットボタン]の[追加]ボタンを押して下さい。

　

[実行時タイプ]ドロップダウンリストから、登録する複合オブジェクトを選択してください。

以下の項目はオブジェクトの内容に合わせて設定してください。

• このオブジェクトはテキストを含みます。
• このオブジェクトはコントロールです。
• このオブジェクトは複合オブジェクトです。

設定するすると以下のような画面になります。

この画面では、 作成した複合オブジェクトのVLEへの登録の詳細を設定します。

• パレットタブ名　　　　　複合オブジェクトが追加されるVLEパレットのタブ名
• パレットグラフィック　　VLEパレット上でのこの複合オブジェクトのグラフィック
• プロパティ　　　　　　　VLEプロパティペインのプロパティの設定項目
• イベントハンドラ　　　　VLEプロパティペインのイベントハンドラの設定項目

設定が完了したら保存して終了してください。これで複合オブジェクトをVLEに登録する準備が出来ました。

次は、VLEパレットに登録します。

VLEの[表示]から[パレット機能拡張]を選択します。

[新規]ボタンを押して、複合オブジェクトが格納されているパッケージファイルを選択すると、完了です。

VLEに戻り、複合オブジェクトが追加されていることを確認して下さい。