ICEfacesのコンポーネントでAjaxアプリを開発する

これまで、インプットテキストコンポーネントを通じて、ICEfacesコンポーネントがどのように作成されているかについて説明してきた。本稿の最後に、ICEfacesにおけるレスポンスのレンダリングフェーズの詳細、そしてその中でICEfacesコンポーネントがどのように振る舞うのかについて説明しよう。

D2Dレンダリングの概要

ICEfacesにおけるレスポンスのレンダリング(Render Response)は、「D2D(Direct-to-DOM)レンダリング」と呼ばれており、[前稿の「4.JSFのライフサイクル(レンダリングフェーズ)」]( http://journal.mycom.co.jp/articles/2007/10/29/icefaces/002.html にて、その概要を紹介した。ここでは、その内容について、もう少し詳細に説明したい。

D2Dレンダリングの例

D2Dレンダリングのイメージをつかむために、例として折りたたみパネル(Panel Collapsible)を見てみよう。デモアプリケーションの、Component Suite -> Layout Panel -> Panel Collapsibleを選択すると、図10のような画面が表示される。

この状態で、図10の赤枠(Textと記述されているヘッダ部分)をクリックすると、下部のテキストの説明部分(コンテンツ部分)が閉じる。このように、折りたたみパネルコンポーネントを用いると、コンテンツ部分を開閉することが可能となる。

なお、このアプリケーションは、ice:panelCollapsibleタグ中にて、f:facetタグにてヘッダを作成し、ice:panelGroupタグなどを用いてコンテンツ部分を作成するだけで、容易に実現可能だ。

それでは、図10の赤枠部分をクリックし、コンテンツ部分が閉じる時の動作を、図11を使って説明しよう。なお、図11におけるDOMツリーは、説明に必要な箇所以外を省略している。

まず、カスタムコンポーネントであるPanelCollapsibleオブジェクトは、カスタムレンダラであるPanelCollapsibleRendererオブジェクトにレンダリング処理を委譲する。

次に、PanelCollapsibleRendererオブジェクトが、ヘッダ部分であるdiv要素と、コンテンツ部分であるdiv要素をDOMツリーに書き出す(encodeBegin)。今回は子要素が存在するため、子要素のレンダリング処理(encodeChildren)も実行される。今は、パネルを折りたたむリクエストを受信したため、encodeChildren()メソッドにて、コンテンツ部分の子要素がレンダリングされない。

その後、前回のDOMツリーと、今回のDOMツリーを比較し、差分要素を抽出する。

最後に、抽出した差分要素を、HTMLの文字列として出力(serialize)する。

この時出力される実際のレスポンスは、リスト3のようになる。なお、リスト3のupdate要素の値(HTMLの文字列)においては、class属性を全て取り除いている。また、id属性の値についても省略している。

リスト 3 Textヘッダをクリックした時のHTTPレスポンスボディ

<updates>
  <update address="collapsiblePanelSub:iceform:icepnltabset:textPanel">
    <![CDATA[
    <div id="省略">
      <div onclick="document.forms[省略][省略].value='false';
                    iceSubmit(document.forms[省略],this,event);
                    return false;">
        <div id="省略">
          <span id="省略">Text</span>
        </div>
      </div>
      <div></div>
    </div>
    ]]>
  </update>
</updates>

クライアントではこのレスポンスを受信し、クライアント側のAjaxブリッジを通じてDOMツリーが更新される。このような動作の末、コンテンツ部分が閉じたように見えるというわけだ。