EGL Rich UI エディターの概要

EGL Rich UI エディターを使用して、Rich UI ハンドラーを変更したり、ハンドラーの実行時の動作をプレビューしたりすることができます。

以下に、Rich UI エディターで開いているファイルの例を示します。

EGL Rich UI エディター

Rich UI エディターには、3 つのビューがあります。

「設計」サーフェスを使用した DOM ツリーの作成

パレットから「設計」サーフェスにウィジェットをドラッグするとき、ウィジェットをドロップできる領域のことを潜在的なドロップ・ロケーション と呼びます。デフォルトでは、その領域は黄色になります。 潜在的なドロップ・ロケーションに移動させた場合、その領域を選択済みドロップ・ロケーション と呼びます。デフォルトでは、その領域は緑色になります。 この色は、ワークベンチの設定でカスタマイズできます。

ウィジェットを「設計」サーフェスに初めてドラッグする場合、サーフェス全体が選択済みドロップ・ロケーションとなります。ドロップすると、ウィジェットが宣言され、Rich UI ハンドラーの initialUI プロパティーの最初の要素として識別されます。このプロパティーには、開発時にウィジェットの配列を指定できます。 最終的に、配列は、ランタイム・データ構造である DOM ツリーの作成に使用されます。これについては、『ブラウザーによる Rich UI アプリケーションの処理方法の説明』で説明されています。具体的には、実行時の DOM 兄弟要素の順序と同じ、開発時の initialUI 配列要素の順序で、Rich UI ハンドラーの initialUI 配列の要素が文書要素の子になります。

別のウィジェットを「設計」サーフェスにドラッグする場合、以下の選択肢があります。
  • 最初に配置したウィジェットに隣接する形でウィジェットを配置できます。ソース・コードでの影響は、2 つ目のウィジェットを宣言し、それを initialUI 配列内の別の要素として識別する点です。新規ウィジェットの配置は、最初のウィジェットの前後いずれかであり、ウィジェットが配列内に配置される場所を示します。
  • 最初に配置したウィジェットがコンテナー (ボックスなど) である場合、2 つ目のウィジェットを最初のウィジェットの内部に配置できます。 ソース・コードでの影響は、コンテナーの children プロパティーに要素を追加する点です。 最終的に、子要素を DOM ツリーに追加します。具体的には、コンテナーを表す要素に子要素を追加します。

以降の作業で、DOM ツリーの作成を続行します。ドラッグ・アンド・ドロップ操作を繰り返し実行してウィジェットを配置し、影響を受ける配列、および配列内でウィジェットを配置する場所を特定できます。 ドラッグ・アンド・ドロップ操作は、Rich UI エディターの「ソース」タブまたは EGL エディターにおいて、コード自体でウィジェットの宣言および配列の割り当てを書き込む代わりの手段となるものです。

新規ウィジェットの宣言は、既に存在する宣言より前にソース・コードに追加されます。つまり、ステートメントの順序は、ドラッグ・アンド・ドロップ操作の順序とは逆になります。

「アウトライン」ビューを使用した「設計」サーフェスの更新

「設計」サーフェスを使用している場合、「アウトライン」ビューには特殊な機能があります。
  • パレットから「アウトライン」ビューの特定の位置、(したがって)「設計」サーフェスの特定の位置にウィジェットをドラッグ・アンド・ドロップできます。
  • 「アウトライン」ビュー内で、以下の操作を行うことができます。
    • ウィジェットを別の位置にドラッグ・アンド・ドロップする。(子孫を持つウィジェットを選択すると、ウィジェットとその子孫を別の位置にドラッグできます。)
    • ウィジェットを右クリックして「削除」をクリックすることにより、ウィジェットを削除する。
    • ウィジェットを右クリックし、「プロパティー」をクリックし、『ウィジェットのプロパティーおよびイベントの設定』で説明されている手順に従うことにより、ウィジェットに関する詳細を更新する。

透過オプションについて

「設計」サーフェスは 2 つのレイヤーで構成されます。 ボトム・レイヤーは Web ブラウザーであり、ウィジェットを表示します (初期テキスト値を含む)。 トップ・レイヤーは編集オーバーレイであり、各ウィジェットの両端に不等号括弧があります。

トップ・レイヤーの背景には、透過的、白色と透過のドット・パターン、または (Windows プラットフォームでは) さまざまな透過レベルの白色レイヤーのいずれかの特性を設定できます。ワークベンチの設定を行うことで、これらの透過オプションを設定できます。これについては、『Rich UI の外観の設定』で説明されています。エディターで作業しているときに、編集セッションで使用中の透過オプションを変更できます。

EGL Rich UI エディターと EGL エディターの併用

1 つのファイルを EGL Rich UI エディターと EGL エディターの両方で開くことで、Rich UI エディターの機能を補うことができます。例えば、次のスクリーン・ショットは、ファイル GridDemo.egl を 2 つの方法で表示しています。上部には Rich UI エディターの「設計」タブがあり、使用可能なウィジェット・タイプをリストするパレットが示されています。 下部には EGL エディターがあります。いずれのエディターで作業しても同じファイルに反映され、他方のエディターで表示されているコンテンツに反映されます。

EGL Rich UI エディターと EGL エディターの併用


フィードバック