ビジュアル レイアウト エディタ

はじめに

ビジュアル レイアウト エディタ (VLE) は、VLE プロジェクト内の VLE コンテナ ファイルを編集するのに特化したエディタです。VLE は、Curl® アプリケーションおけるユーザー インターフェイス (UI) 開発のためのビジュアルな開発環境を提供します。ポイントアンドクリック動作により、コントロール、コンテナ、およびその他の Curl 言語オブジェクトを追加、サイズ変更、移動できます。オブジェクトを追加すると、そのプロパティを設定したり、イベント ハンドラを作成したりできます。
注意: VLE プロジェクトは、runtime-support.scurl と呼ばれるファイルを含んでいます。このファイルは、VLE によって頻繁に上書きされます。このファイルにいかなる修正も加えないでください。
VLEは、レイアウトが実行時にどのように見えるのかを示す視覚表現を与えようとします。VLEは、あなたのマシンと同じように設定されたマシン上で、実行される時にレイアウトがどのようになるのかを示すことが出来ます。ディスプレイ（とプリンタ）毎に、そのピクセル サイズやフォントなどが異なります。VLEは、考えうる全てのクライアント プラットフォーム上で、アプレットがどのように見えるのかを見せることはできません。全てのオブジェクトで、ピクセル(px)単位で、厳密に高さと幅を指定すると、アプレットが異なる設定のマシンで実行される時に問題が発生するリスクがあります。またアプレットを印刷すると期待通りでないことがあるかもしれません。このような方法でアプリケーションを開発したい場合は、環境の違いに対応する為にマージンを残し、サイズの指定を厳密に指定しないようにしなければなりません。また、あなたの顧客が使用する可能性がある全てのディスプレイ設定で、アプリケーションの表示と印刷のテストを行う必要があります。ページ レイアウトに関する詳細の情報は、エラスティックとページ レイアウト を参照してください。
VLE でサポートされている Curl 言語オブジェクトに VLE の機能を追加して拡張することもできます。
VLEは、Curl IDE と連携して Curl IDE のプロジェクト管理、デバッグ、ディプロイメントの機能を高めます。VLE を起動するには、Curl IDE をインストールして実行する必要があります。
VLE または統合開発環境 (IDE) のいずれかの [実行] メニューからアプレット ファイルまたはアプレットを含むプロジェクトを実行できます。
VLE レイアウトは、VLE で作成された UI または UI コンポーネントです。VLE はレイアウト クラスを定義するコードを生成し、これとレイアウトのトップレベルのコンテナでレイアウトを構成します。多数の VLE レイアウトを 1 つの Curl ソース ファイルに格納したり、複数のソース ファイルに格納されているレイアウトを使用してさまざまな UI を構築したりできます。「レイアウトの使い方」を参照してください。
VLE でサポートされている Curl オブジェクトは、VLE パレット から利用できます。適切なソース コードを含むパッケージを作成し、そのパッケージ内のオブジェクトを VLE パレットに追加する VLE 機能拡張を定義して、VLE を拡張できます。「ビジュアル レイアウト エディタの機能拡張」を参照してください。
Curl IDE には、VLE の機能拡張に役立つツールが用意されています。VLE を使用して複合オブジェクトを構築できます。複合オブジェクトは、VLE レイアウトに似ていますが、VLE 機能拡張を作成して VLE パレットに追加できる機能もあります。「複合オブジェクトの構築」を参照してください。
Curl IDE には、VLE 機能拡張エディタも用意されています。このエディタにより、VLE パレットに追加するオブジェクトのパレット機能拡張を構築できます。「VLE 機能拡張エディタ」を参照してください。
VLE レイアウトまたは複合オブジェクトを含むファイルは、VLE、IDE、または両方のエディタで同時に編集できます。1 つのエディタで行った変更は、別のエディタにも反映されます。レイアウトや複合オブジェクトを含まないファイルを VLE で開くと、レイアウト デザイン領域にメッセージが表示されます。レイアウトを追加するには、[編集] メニューの [新規レイアウト] または [新規複合オブジェクト] コマンドを使用します。ソース ファイルに他のコードも含めることができますが、VLE にはレイアウトと複合オブジェクトのみが表示されます。
1 つのソース ファイルに多数のレイアウト、多数の複合オブジェクト、または両方を含めることができるので、レイアウト、複合オブジェクト、ファイル、パッケージをアプリケーションに最適な方法で自由に構成できます。複合オブジェクトとその他の VLE 機能拡張を Curl パッケージに含めると、VLE パレットに追加できます。クラス内のフィールド数には上限があります。オブジェクトにデザイン名を割り当てると、そのオブジェクトはレイアウト クラスのフィールドになります。つまり、1 つのレイアウトには、デザイン名が割り当てられたオブジェクトを 1,000 以上含めることができません。
レイアウトや複合オブジェクトは一度に 1 つしか編集できず、一度に 1 つの VLE インスタンスしか実行できません。

VLE の実行

VLE を実行する前に Curl IDE を実行する必要があります。VLE は以下の方法で起動できます。
VLE の使用法の詳細については、「レイアウトの構築」を参照してください。
VLE 機能拡張エディタという関連ツールがあり、このツールを使用して VLE から追加オブジェクトにアクセスできます。VLE 機能拡張エディタは、Curl IDE から次の方法で起動できます。
VLE 機能拡張エディタの使用方法の詳細については、「VLE 機能拡張エディタ」を参照してください。

ビジュアル レイアウト エディタのユーザー インターフェイス

ビジュアル レイアウト エディタのユーザー インターフェイスは 6 つの主要な領域に分かれています。

メニュー バー

[ファイル] メニュー

メニュー項目機能
新規...[新規] ダイアログ ボックスを開きます。「新規ファイルの作成」を参照してください。
開く...[開く] ダイアログ ボックスを開きます。このダイアログから既存のファイルを開くことができます。
閉じる現在アクティブなファイルを閉じます。
保存現在アクティブなファイルを保存します。
名前を付けて保存...[名前を付けて保存] ダイアログ ボックスを開きます。このダイアログ ボックスで現在アクティブなファイルを新しい名前で保存できます。
全ファイル保存現在開いているファイルの中で、未保存の変更があるファイルをすべて保存します。
保存時の状態に戻す現在アクティブなファイルを、最後にディスクに保存されたときの状態に戻します。変更を破棄するかどうかの確認を求められます。
終了現在開いているファイルを閉じ、VLE を終了します。変更を保存するかどうかの確認を求められます。

新規ファイルの作成

新規ファイルを作成するには、[ファイル] メニューの[新規] をクリックします。ダイアログ ボックスが表示され、ここで新規ファイルに関する選択を行います。このダイアログから作成したすべてのファイルには、レイアウト オブジェクトまたは複合オブジェクトのコードが含まれます。
指定した種類の空のレイアウト コンテナのコードを含むファイルが作成されます。レイアウトに追加されるオブジェクトは、このコンテナ内に格納されます。

[編集] メニュー

メニュー項目機能
元に戻すファイルに加えられた変更のリストを最後から逆戻りする形で変更を取り消します。このリストには最大 300 の項目が含まれます。IDE でファイルを編集してから VLE に戻ると、このリストがクリアされる点に注意してください。
やり直し最後に行った [元に戻す] 操作を取り消します。
切り取り切り取り
コピー選択したオブジェクトをコピーし、貼り付けできるようにします。
貼り付け先に切り取ったかコピーしたオブジェクトを挿入します。
削除選択したオブジェクトをレイアウトから削除します。削除されたオブジェクトは貼り付けできません。
すべて選択現在選択されているオブジェクトと同じ親を持つ他のオブジェクトをすべて選択します。
選択のクリア現在選択されているアイテムの選択を解除します。
分割して挿入利用可能なコンテナのリストを表示します。このリストから選択されるコンテナは、［レイアウト］ペインで現在選択されているオブジェクトと、その親オブジェクトの間に「割り込む」ような形で挿入されます。
分割して削除[分割して削除] は、選択したオブジェクトに子オブジェクトが含まれていないか、1 つだけ含まれている場合に使用できます。選択したオブジェクトに子オブジェクトが含まれていない場合、[分割して削除] は [削除]と同じ機能になります。選択したオブジェクトに子オブジェクトが 1 つ含まれている場合、[分割して削除] は選択したオブジェクトをグラフィック階層から削除し、その子オブジェクトを削除されたオブジェクトの親の子にします。
スロットとしてマーク選択したオブジェクトを複合オブジェクトのスロットしてマークします。「 複合オブジェクトのスロット」を参照してください。[スロットとしてマーク] は、選択したオブジェクトが複合オブジェクトに含まれていて、スロットとして機能できるコンテナである場合にのみ有効になります。
新規レイアウト...[新規レイアウト] ダイアログ ボックスを開きます。新規レイアウトの[コンテナ]と[レイアウト名]を指定します。
新規複合オブジェクト...[新規複合オブジェクト] ダイアログ ボックスを開きます。新規複合オブジェクトの[コンテナ]と[複合オブジェクト名]を指定します。
複合オブジェクトにコピー...現在のレイアウトと同じ内部構造を持つ新規複合オブジェクトを作成します。レイアウトを複合オブジェクトに変換する場合に使用します。
レイアウトを削除現在のレイアウトまたは複合オブジェクトを削除します。
コードを編集IDE でファイルを開き、選択したオブジェクトで選択されているイベント ハンドラをハイライトします。
データ バインディングの編集ConnectedRecordSet 内のデータをプロパティ値にバインドできます。「RecordForm の追加」を参照してください。
プロパティ値を元に戻す選択したプロパティを設定解除した状態に戻します。

[フォーマット] メニュー

メニュー項目機能
左揃え
左右中央揃え
右揃え		水平方向の整列。
上揃え
上下中央揃え
下揃え		垂直方向の整列。
同じ幅
同じ高さ
同じ幅と高さ		寸法を揃えます。
左右均等に配置オブジェクト間の水平方向の間隔を等しくします。
上下均等に配置オブジェクト間の垂直方向の間隔を等しくします。
前面に移動選択したオブジェクトが他のオブジェクトの一番上に表示されるように、重ね順を調整します。
背面に移動選択したオブジェクトが他のオブジェクトの背面に移動するように、重ね順を調整します。
[前面に移動] と [背面に移動] 以外のフォーマット コマンドは、選択したオブジェクトのグループを操作します。グループで白い選択ハンドルを持つオブジェクトは主選択アイテムで、このオブジェクトは[同じ...] のコマンドでは高さと幅の基準になり、[...揃え] では他のオブジェクトを整列させる基準になります。

[実行] メニュー

メニュー項目機能
プロジェクトを実行現在開いているプロジェクトの起動ファイルをブラウザで実行します。
ファイルの実行開いているファイルをブラウザで実行します。このコマンドは、ファイルが Curl アプレット ファイルの場合のみ使用できます。

[表示] メニュー

メニュー項目機能
グリッドを表示グリッド インジケータを表示します。インジケータが表示されているときには、オブジェクトはグリッドに合わせて移動またはサイズ変更し、方向キーを使うと選択したオブジェクトは 1 グリッド単位で移動します。グリッド コントロールは、オブジェクトの配置の制御機能を持たないコンテナ (VBox など) にあるオブジェクトのサイズ変更を制御します。
グリッドを非表示グリッド インジケータを非表示にします。インジケータが非表示のときには、オブジェクトはグリッドを基準として移動せず、方向キーを使うと選択したオブジェクトは 1 ピクセル単位で移動します。
グリッドのプロパティ［グリッド プロパティの変更］ と書かれるダイアログを開きます。このダイアログからグリッド間隔を設定できます。 ポイント （pt）、センチ メートル （cm） およびピクセル （px） などの距離の単位を使用できます。このダイアログでは、どのようにグリッドがオブジェクトのサイズ変更に作用するかも指定できます。
グリッドに合わせる選択したオブジェクトをグリッドに合わせて配置します (まだ配置されていない場合)。
ツリーを表示しない/表示［レイアウト ツリー］ ペインの表示/非表示を切り替えます。
レイアウトを表示しない/表示［レイアウト ペイン］の表示/非表示を切り替えます。
プロパティを表示しない/表示［プロパティ］ ペインの表示/非表示を切り替えます。
データ接続[データ接続の一覧] ダイアログを開きます。このダイアログには、現在定義されているデータ接続の一覧が表示されます。このダイアログのボタンを使用して、接続の編集、削除、新規作成を行うことができます。「データ接続の追加」を参照してください。
パレット機能拡張[パレット機能拡張] ダイアログを開きます。このダイアログを使用して、機能拡張を VLE パレットにインストールできます。「VLE 機能拡張ファイルのインストールとアンインストール」を参照してください。

[ウィンドウ] メニュー

このメニューには、VLE で現在開いているすべてのファイルの一覧が表示されます。ファイル名の左側のドットは、現在アクティブなファイルを示します。ファイル名の左上隅のアスタリスクは、ファイルに未保存の変更があることを示します。
メニュー項目機能
次へ一覧内の次のファイルをアクティブにします。
前へ一覧内の前のファイルをアクティブにします。

[ヘルプ] メニュー

このメニューからは Curl IDE の [ヘルプ] メニューと同じ内容にアクセスできます。

ツールバー

アイコンメニュー選択項目
ファイル新規...
ファイル開く...
ファイル保存
ファイル全ファイル保存
編集切り取り
編集コピー
編集貼り付け
表示ツリーを表示/表示しない
表示レイアウトを表示/表示しない
表示プロパティを表示/表示しない
表示グリッドの表示/グリッドの非表示
編集コードの編集
実行プロジェクトを実行
実行ファイルの実行

パレット

VLE パレットから、レイアウトに追加するすべてのオブジェクトにアクセスできます。パレットは、各種オブジェクトのアイコンを提供するツール バーのように機能します。パレットのアイコンは、オブジェクトをカテゴリに分類したタブによって整理されています。[最近使ったオブジェクト] タブには、最近使用したアイコンが最高 10 個まで表示されます。VLE パレットにカスタム オブジェクトが追加されている場合、それらのオブジェクトは既存のタブに表示されるか、追加された新しいタブに表示されます。VLE 複合オブジェクトを含むタブの既定の名前は、「複合オブジェクト」です。
以下のセクションでは、標準のパレット タブについて説明します。

グラフィックス

[グラフィックス] タブには、レイアウトの外観に影響を与えるオブジェクトの中でも、他のオブジェクトを含まない、またはコントロールとして機能するものが表示されています。
アイコンオブジェクト
テキストのレイアウトを制御する TextFlowBox。
image テキスト プロシージャの呼び出しの結果など、画像のホルダとして機能する ImageFrame。
レイアウトにパディングを提供する Fill。
色の領域を追加する Rule。
レイアウトに任意のグラフィックを追加するための UserDefinedGraphic。「UserDefinedGraphic の追加」を参照してください。
オブジェクトを視覚的にグループ化するために使用される BorderFrame で、コンテナとして機能せず、周囲に境界線を配置します。

UserDefinedGraphic の追加

VLE レイアウトに任意のグラフィカル オブジェクトを追加するには、UserDefinedGraphic をレイアウトに追加します。次にプロパティ シートで "creation code" というプロパティを探します。このプロパティの [値] フィールドに、Graphic オブジェクトを定義する任意の Curl ソース コードを入力するか、IDE で編集します。実行時に、Curl RTE によりこのコードが実行され、UserDefinedGraphic の位置に結果の Graphic が表示されます。VLE ではデザイン時には コードは解釈されないため、デザイン時の UserDefinedGraphic は指定の高さと幅の四角形として表示されます。

シェイプ

[シェイプ] タブには、レイアウトに追加できるシェイプオブジェクトが表示されます。一般的なシェイプの使用方法については、「シェイプ」を参照してください。VLE でのシェイプの使用方法については、「レイアウトにおけるシェイプの使用」および「シェイプのプロパティの編集」を参照してください。
アイコンオブジェクト
四角形を追加する RectangleShape。
角の丸い四角形を追加する RoundedRectangleShape。
楕円形を追加する EllipseShape。
矢印を追加する ArrowShape。
テキストを追加する TextShape。
イメージを追加する ImageShape。
シェイプグループを追加する ShapeGroup。他のシェイプをグループ化できます。
シェイプボックスを追加する ShapeBox。

コンテナ

[コンテナ] タブには、他のオブジェクトを含めることのできるオブジェクトが表示されます。コンテナには、多数の子オブジェクトを含むことができるもの (Canvas など) と、1 つのみ含むことのできるもの (Frame など) があります。コンテナ オブジェクトは、レイアウト内のグラフィックやコントロールを整理するのに便利です。
アイコンオブジェクト
コンテンツを水平方向に配置する HBox。
コンテンツを垂直方向に配置する VBox。
子オブジェクトを 1 つのみ含められる Frame。コンテンツに非ローカル オプションを設定したり、実行時にプログラム制御によって置き換えられるコンテンツを含むプレース ホルダを制御する場合に役に立ちます。
オブジェクトを任意の位置に追加できる Canvas。
ラジオ ボタン コントロールのセットをグループとして扱う RadioFrame。これらのコントロールは、VBox や Canvas などの 1 つのコンテナ オブジェクトに含める必要があります。
RadioCanvas は Canvas のサブクラスで、RadioFrame としても機能します。このキャンバス内のラジオ ボタンは、RadioCanvas の外側にあるラジオ ボタンとは別に radio-button グループを形成します。
指定サイズよりコンテンツのサイズが大きい場合にスクロール バーを追加する ScrollBox。
コントロールをグループ化し、フォームレベルのアクションを処理する Dialog。
オブジェクトを重ねて追加できるようにする OverlayBox。
HBox の機能を果たす、行の折り返しが可能な RasterBox。
タブを使用して同一スペースに異なるコンテンツを表示するオブジェクトを作成する TabContainer。任意のオブジェクトを追加でき、追加したオブジェクトに適したタブ ラベルを指定します。タブの数を増やすには TabContainer に新規オブジェクトを追加し、数を減らすには TabContainer にある子オブジェクトを削除します。タブ コンテナの使用方法の詳細については、「タブ コンテナ」を参照してください。
ペインを一つずつ開閉して中身を表示する、TabContainer の代替形式である TabAccordion。
一度に複数のペインを開いて中身を表示できる、TabAccordion の代替形式である MultiTabAccordion。
他のコントロールをグループ化する GroupBox。

表

[表] タブには、レイアウトでの表の使用に関連するコントロールが表示されます。 一般的なシェイプの使用方法については、「表」を参照してください。 VLE での表の使用法については、 「レイアウトにおける表の使用」 および 「表のプロパティの編集」 を参照してください。
アイコンオブジェクト
Table は、コンテンツを行と列に編成します。
行 は row-prototype に基づき、テーブルの行を作成します。
列 は column-prototype に基づき、テーブルの列を作成します。
vle-cell-prototype は cell-prototype に基づき、 テーブル セルのプロパティを設定します。
skip は、テーブルの作成時に内容を追加しないセルを指定します。

コントロール

[コントロール] タブにはコントロール オブジェクトが集められています。コントロールとは、アプリケーションでユーザー動作への応答としてアクションを開始するものです。
アイコンオブジェクト
ユーザーがボタンの押し下げ/解放を行ったときにアクションを実行する CommandButton。
ユーザーがボタンをオンにすると true 値を登録し、オフにすると false 値を登録する CheckButton。
RadioButton は RadioFrame 内で使用し、ユーザーに選択肢を提供します。
TextField は、単一行のテキスト入力フィールドです。
PasswordField は単一行のテキスト入力フィールドで、入力された文字を表示しません。.
TextArea は、ユーザーがテキストを入力するボックスです。
DropdownList は選択可能な項目のリストで、ユーザーにはプルダウン メニューとして表示されます。
ComboBox は、選択可能な値のリストに編集可能なテキスト フィールドが組み合わされたものです。
ListBox は、スクロール可能なボックス内にある項目のリストです。ユーザーは 1 つ以上の項目を選択できます。
TreeControl は、階層構造で情報を表示します。階層のノードを展開したり折りたたんだりして、 詳細レベルの情報の表示と非表示を切り替えることができます。ツリー コントロールの使用法の詳細については、 「ツリー コントロール」を参照してください。 ツリー コントロールのプロパティの使用方法の詳細については、 「TreeControl のプロパティの編集」を参照してください。
MessageDisplay は検証メッセージを表示します。
SpinControl はユーザーが上下矢印ボタンをクリックして増減できる 1 つの値を含むコントロールです。
Slider はユーザーがスライダを移動して値の範囲から選択できるグラフィカルなコントロールです。
ProgressBar は時間のかかる操作の進捗状況を示します。
DateField はユーザーがフィールドに直接入力するか、関連しているカレンダー コントロールを使用して日付を入力できるコントロールです。
CalendarControl はユーザーが日付を選択できるグラフィカルなコントロールです。

メニュー

[メニュー] タブには、メニューの作成に使用できるコンポーネントが表示されます。一般的なメニューの使用方法については、「メニュー」を参照してください。VLE でのメニューの使用方法については、「レイアウトにおけるメニューの使用」を参照してください。
アイコンオブジェクト
MenuBar は、メニューのトップレベルのコンテナです。SubMenu および MenuAction オブジェクトを含めることができます。
SubMenu は、 SubMenu および MenuAction オブジェクトを含めることができるメニュー コンポーネントです。
MenuAction は、ユーザーによって選択されると関連付けられているアクションをアクティブにするメニュー コンポーネントです。
menu-separator は、SubMenu に水平セパレータ バーを配置するプロシージャです。

データ アクセス

[データ アクセス] タブには、データ フォームやグリッド、およびデータベース接続の処理に使用するコントロールが表示されます。
アイコンオブジェクト
ConnectedRecordSet は、 Connection オブジェクトを使用してデータを取得したり更新したりできる RecordSet です。
RecordForm はレコードの値をフォームのコントロールにバインドして、一度に 1 データ レコードを表示します。
RecordGrid はデータ レコードを表形式で表示します。
RecordGridColumn は RecordGrid内の列のフォーマットとレイアウトを指定します。

グラフ

［グラフ］ タブはグラフを作成する要素を一覧にします。 グラフ操作に関する一般的な情報は「 グラフ 」を参照してください。 VLE でのグラフの使用法は 「グラフの追加 」を参照してください。
アイコンオブジェクト
LayeredChart は 一つまたはそれ以上の ChartLayer オブジェクトを含む x および y 軸のあるグラフです。
AreaLayer は間隙を埋める領域を使用してデータをプロットするグラフ レイヤです。
BarLayer は棒グラフまたはヒストグラムとしてデータをプロットするグラフ レイヤです。
LineLayer は線を使用してデータをプロットするグラフ レイヤです。
ScatterLayer は別々の均一サイズのシェイプとしてデータをプロットするグラフ レイヤです。
BubbleLayer は別々のデータ系列を使用して各シェイプのサイズを決定し、データをシェイプとしてプロットするグラフ レイヤです。
ChartAxis はレイヤ グラフの枢軸です。
NumericDataSeriesAxis-of は、データセットに基づいて範囲を設定する数値軸です。
NumericAxis-of は明示的な範囲に基づく数値軸です。
EnumeratedBarChartAxis は BarLayer と共に使用する序数軸です。
PieChart は一つまたはそれ以上の PieSet オブジェクトを含むグラフです。
PieSet はデータセットを円グラフに追加します。
ChartBox は、ChartBox を追加します。

Http フォーム

[Http フォーム] タブには、HttpForm ダイアログで使用するコントロールが表示されます。
アイコンオブジェクト
HttpForm は、Web サーバー上で CGI プログラムとやりとりする特別な Dialog です。
submit-button は、HttpForm 内で使用する標準の ［送信］ ボタンを作成するプロシージャです。
reset-button は、HttpForm 内で使用する標準の ［リセット］ ボタンを作成するプロシージャです。

レイアウト デザイン領域

「レイアウト デザイン領域」は、パレット バーの下にあるレイアウト エディタ ウィンドウの領域を指します。この領域には、次のペインが 1 つ以上表示されています。
これら 3 つのペインをさまざまに組み合わせて、コンテナ、コントロールおよび他の UI コンポーネントをレイアウトに追加し、プロパティおよびイベント ハンドラを設定します。このプロセスの詳細については、「レイアウトの構築」を参照してください。
Copyright © 1998-2019 SCSK Corporation. All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of SCSK Corporation. that are registered in the United States. Surge Lab, the Surge Lab logo, and the Surge Lab Visual Layout Editor (VLE) logo are trademarks of SCSK Corporation.