XML Binding Language 2.0でアプリケーションを簡素化する

レイアウトとコードの簡素化に役立つバインディング言語としてのXML

　バインディングを機能させるために、一時的なHTMLツリーが構築され、XBLバインディングコードの制御下に置かれます。「shadowTree」と呼ばれるこのツリーには、バインディングドキュメントオブジェクトモデル（DOM）の実際の作業用コピーが格納され、境界要素のプロパティになります。shadowTree内の要素を取得するには、documentではなくthisをgetElementByIDのルートクラスにします。例えば次の行では、feedbuttonオブジェクトを取得しています。

this.shadowTree.getElementById('feedbutton').addEventListener('click', this.getFeed, false);

　ここではboundElementプロパティをthisオブジェクトポインタに手動で関連付けています。これは、どのオブジェクトを参照しているかをより明白にするためです（特に、thisには異なるコンテキスト内の異なる値を持たせることができるためです）。

　一方、getFeed()関数は、フィードボタンが押下されたときのハンドラとして特に割り当てられており、バインディング内の実際の処理の大部分を実行します。この関数はTwitterアカウントのユーザー名とパスワードを取得した後、XMLHttpRequestを実行してフィードをJSONオブジェクトとして取得します。要求はサーバプロキシに対して行われ（下ではXQueryで記述していますが、任意の言語で記述できます）、サーバプロキシが実際にTwitter.comからTwitterのフィードを取り込んで、それをTwitter.xhtmlページの送信元である同じサーバ上のクライアントに渡します。新しいクロスドメイン対応のXMLHttpRequest()呼び出しの実装がいくつかありますが、まだ技術が新しすぎてあまり広く採用されていないので、プロキシサーバを使います。

　JSONとして取得し、「ツイート」というくだけた名前で呼ばれる状態メッセージの配列に変換した後、getFeed()関数はセットに対して反復処理を行い、tweet.idプロパティを取得します。そして、これをTwitterパネルテーブルの既存のペインと比較します。IDが既存のオブジェクトと一致した場合、新しいツイートは削除されます。一致しない場合は、新しいツイートがツイートスタックの先頭に追加され、古いメッセージが押し下げられます。そこからは、テキストがクリーンアップされ（受信ストリームは、特に&記号や関連する構造に関して、必ずしもHTMLになじむものばかりではありません）、画像、名前、テキストがすべてツイートにまとめられて表示されます。

　タイムアウトやその他のスレッド化されたイベントなど、メソッドの非同期呼び出しを処理する場合はバインディングの操作が難しくなることがあるので、関連するコンテキストを適切なハンドラに渡すのにクロージャが役に立ちます。この例では、getFeed()が呼び出されると、setTimeout呼び出しも起動されます。setTimeoutは、@interval属性で指定された間隔でメソッドを繰り返し呼び出します。デフォルトでは、間隔は30秒に設定されます。@intervalを0に設定すると、この呼び出しが無視されて更新機能が無効になります。

　<handlers>セクションでは、XBLバインディング全体の汎用のイベントハンドラを指定します。この例では何も指定していませんが、一般的なXBLハンドラは次のようなものです。

<xbl xmlns="http://www.w3.org/ns/xbl">
 <binding id="events">
  <handlers>
   <handler event="click" phase="default-action"
            button="1" click-count="1" modifiers="none"
            trusted="true">
    this.activate();
   </handler>
   <handler event="keypress" phase="default-action"
            key="Enter" modifiers="none"
            trusted="true">
    this.activate();
   </handler>
   <handler event="DOMActivate" phase="default-action">
    if (event.target == this.boundElement)
      this.boundElement.ownerDocument.location.href = this.href;
   </handler>
  </handlers>
  ...
  <!-- it is assumed that the implementation for this binding
       implements a .activate() method that fires the DOMActivate
       event on itself. -->
 </binding>
</xbl>

　一般に、こうしたイベントハンドラは、関連するJavaScriptハンドラスクリプトを包むラッパーです。また、これらはドキュメント全体ではなく、バインディング内のドメインにのみ適用されることにも注意してください。

　リソースでは、スタイルシートの使用、およびバインディング自体で使用される外部メディアリソース（画像、音声、ビデオなど）の両方を扱います。Twitterコンポーネントの場合、コンポーネントを制御するスタイルシートはインラインで次のように表現されています。

<resources>
   <style><![CDATA[
      td.tweet_cell {
         background-color:#E0E0FF;
         border:outset 2px;
         font-family:Arial;
         font-size:9pt;}
      #container {overflow-y:auto;
         display:block;
         width:400px;
         height:500px;}
   ]]></style>
</resources>
</pre></code>
<p>
The same stylesheet could also be referenced as an external file via the [xml]@src[/xml] attribute.
<p>
<pre><code>
<resources>
   <style src="twitter.css"/>
</resources>

　<resources>の一部である<prefetch>要素は、<img>や類似のHTML（または関連）要素に割り当てられるメディアリソースのプリロードを実行します。プリロードを実行することで、バインディングが最初に描画される前に、必ず画像が自動的にロードされるようになります。<prefetch>の構文は次のように簡単明瞭です。

<resources>
   <prefetch src="myImage.jpg" id="myImage"/>
</resources>

　src（必須）とid（省略可能）を指定します。W3CのXBL 2の仕様では、このようなリソースをプリフェッチおよび参照する方法の例が示されています。

<xbl xmlns="http://www.w3.org/ns/xbl"
     xmlns:html="http://www.w3.org/1999/xhtml">
 <binding id="light">
  <template>
   <html:img id="l" src="red.png" alt=""/>
  </template>
  <resources>
   <prefetch src="red.png"/> <!-- this one isn't necessary, since
    the UA will fetch this one as soon as it sees the <html:img> element -->
   <prefetch src="green.png"/>
  </resources>
  <implementation>
   ({
      red: function() {
        this.shadowTree.getElementById('l').src = 'red.png';
      },
      green: function() {
        this.shadowTree.getElementById('l').src = 'green.png';
      },
   })
  </implementation>
 </binding>
</xbl>