ブラウザーによる Rich UI アプリケーションの処理方法の説明

このトピックでは、実行時にブラウザーが Rich UI アプリケーションを処理する方法 について説明します。次の 2 つの目的があります。

ユーザーがブラウザーに Web アドレスを入力すると、ブラウザーによって、この要求が、通常は 2 台目のマシンである Web サーバーに送信されます。アドレスは、 具体的なサーバーを識別し、ブラウザーに戻されるコンテンツの種類を示します。 例えば、アドレス http://www.ibm.com を入力すると、IBM® サーバー の 1 台が、ブラウザーが IBM ホーム・ページを表示するために使用するメッセージによって応答します。 次の疑問は、ブラウザーで、このメッセージを使用する方法です。

ブラウザーは、メッセージの部分部分を一連の内部データ域に移動します。 ブラウザーは、次に、これらのデータ域の値を使用して、一般にウィジェット と呼ばれる、画面上のコントロールを表示します。ウィジェットの例としては、ボタンやテキスト・フィールド があります。

次の Web ページ・コンテンツを考えてみます。

Web ページの例

7 個のウィジェットが表示されています。

ブラウザーの使用する内部データ域は、逆転したツリーとして表されます。

DOM ツリーの例

ツリーは、Document という名前のルートと、情報の単位である一連の要素 に よって構成されています。使用可能な最上位の要素は、Body という名前です。Body に従属する要素は、アプリケーション固有です。

一式の規則によって、ツリーとツリーが表すデータにアクセスする方法の両方が記述 されます。この一式の規則を Document Object Model (DOM) と呼びます。 このツリーを DOM ツリー と呼び、DOM 要素間の関係は、ファミリー関係を表す用語を使用して表されます。
(ここで使用している例のように) 最も単純なケースでは、1 つのウィジェットが、単一の DOM 要素の含む情報を反映します。この他のケースでは、1 つのウィジェットが、複数の要素に よるサブツリーが含む情報を反映します。ただし、すべてのケースにおいて、表示されるウィジェット間の空間関係は、少なくともある程度は、DOM ツリーの編成を反映します。 デフォルトの振る舞いは、以下の規則によって説明されます。

ここでは、主要概念を伝達するための技術として、表示されるウィジェットと DOM 要素を区別しないことによる、簡素化をたびたび行ってあります。先のリストの代わりに、 「ウィジェットは親ウィジェットに含まれ、兄弟は、先の兄弟の下または右に 表示される」ということができます。

DOM ツリーの編成によって、ウィジェットの配置方法が完全に記述されるわけではありません。 親要素には、2 つの方法のいずれかによって子ウィジェットを配置するための詳細を組み込むことができます。 つまり、兄弟を次の兄弟の下に配置するか、右に配置するかです。 表示は、所定のブラウザーの特性、つまり通常はユーザーが実行時に更新できる、ブラウザー・ウィンドウのサイズなどによっても影響されることがあります。 最後に、表示は、カスケーディング・スタイル・シート内の設定によって 影響されることがあります。

Rich UI を使用して Web ページを開発するときは、整数を宣言するときとほぼ同様にウィジェット を宣言します。ただし、ウィジェットは、コードによって、これらのウィジェットの DOM ツリーへの 追加も行った場合にのみ表示可能です。コードでは、ユーザーによるボタン・クリックなどの実行時イベントに応答して、ウィジェットの追加、変更、除去という、ツリーの更新も行うことができます。 主要な点は次のように表現できます。「Web ページ開発での主要な作業は、 DOM ツリーの作成と更新です。

Rich UI エディターの「設計」タブで作業するときは、 DOM ツリーの初期作成に必要な複数の作業が、ドラッグ・アンド・ドロップを行うことにより、 自動で処理されます。Rich UI エディターの「ソース」タブ または EGL エディターで作業するときは、コードを直接記述でき、DOM 要素を明示的に参照する こともできます。

一般に、DOM ツリーの作成と更新は 3 つのステップで実行します。
  1. 特定のタイプ のウィジェット、つまりボタンの場合は Button、テキスト・フィールドの場合は TextField などを宣言し、ウィジェット・プロパティーをカスタマイズします。例えば、 ここでの例のように、ボタンのテキストに「Input to Output」を設定します。
  2. 初期 DOM ツリーにウィジェットを追加します。
  3. 変更を表示可能にしたい場合は、コード内の該当するポイントでウィジェットを追加、変更、および除去することにより DOM ツリーを変更します。

ウィジェットまたはその変更について、「表示される」とせず「表示可能である」と表現してあるのは、DOM ツリー内のウィジェットは非表示にすることができるためです。

ランタイム処理における特定の時点では、1 つのウィジェットは 1 つのみの親の子となることができます。

注: 潜在的に重要な問題について詳しくは、『Rich UI メモリー管理』を参照してください。

フィードバック