EGL Rich UI エディターを使用して、Rich UI ハンドラーを変更したり、ハンドラーの実行時の動作をプレビューしたりすることができます。
以下に、Rich UI エディターで開いているファイルの例を示します。

パレットから「設計」サーフェスにウィジェットをドラッグするとき、ウィジェットをドロップできる領域のことを潜在的なドロップ・ロケーション と呼びます。デフォルトでは、その領域は黄色になります。 潜在的なドロップ・ロケーションに移動させた場合、その領域を選択済みドロップ・ロケーション と呼びます。デフォルトでは、その領域は緑色になります。 この色は、ワークベンチの設定でカスタマイズできます。
ウィジェットを「設計」サーフェスに初めてドラッグする場合、サーフェス全体が選択済みドロップ・ロケーションとなります。ドロップすると、ウィジェットが宣言され、Rich UI ハンドラーの initialUI プロパティーの最初の要素として識別されます。このプロパティーには、開発時にウィジェットの配列を指定できます。 最終的に、配列は、ランタイム・データ構造である DOM ツリーの作成に使用されます。これについては、『ブラウザーによる Rich UI アプリケーションの処理方法の説明』で説明されています。具体的には、実行時の DOM 兄弟要素の順序と同じ、開発時の initialUI 配列要素の順序で、Rich UI ハンドラーの initialUI 配列の要素が文書要素の子になります。
以降の作業で、DOM ツリーの作成を続行します。ドラッグ・アンド・ドロップ操作を繰り返し実行してウィジェットを配置し、影響を受ける配列、および配列内でウィジェットを配置する場所を特定できます。 ドラッグ・アンド・ドロップ操作は、Rich UI エディターの「ソース」タブまたは EGL エディターにおいて、コード自体でウィジェットの宣言および配列の割り当てを書き込む代わりの手段となるものです。
新規ウィジェットの宣言は、既に存在する宣言より前にソース・コードに追加されます。つまり、ステートメントの順序は、ドラッグ・アンド・ドロップ操作の順序とは逆になります。
「設計」サーフェスは 2 つのレイヤーで構成されます。 ボトム・レイヤーは Web ブラウザーであり、ウィジェットを表示します (初期テキスト値を含む)。 トップ・レイヤーは編集オーバーレイであり、各ウィジェットの両端に不等号括弧があります。
トップ・レイヤーの背景には、透過的、白色と透過のドット・パターン、または (Windows プラットフォームでは) さまざまな透過レベルの白色レイヤーのいずれかの特性を設定できます。ワークベンチの設定を行うことで、これらの透過オプションを設定できます。これについては、『Rich UI の外観の設定』で説明されています。エディターで作業しているときに、編集セッションで使用中の透過オプションを変更できます。
1 つのファイルを EGL Rich UI エディターと EGL エディターの両方で開くことで、Rich UI エディターの機能を補うことができます。例えば、次のスクリーン・ショットは、ファイル GridDemo.egl を 2 つの方法で表示しています。上部には Rich UI エディターの「設計」タブがあり、使用可能なウィジェット・タイプをリストするパレットが示されています。 下部には EGL エディターがあります。いずれのエディターで作業しても同じファイルに反映され、他方のエディターで表示されているコンテンツに反映されます。
