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

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

　TwitterバインディングのXBLドキュメント全体は、Twitter.xmlに含まれています（リスト3を参照）。

リスト3

<?xml version="1.0" encoding="UTF-8"?>
<xbl xmlns="http://www.w3.org/ns/xbl">
   <binding id="twitter">
       <implementation><![CDATA[
           ({
           xblBindingAttached: function() {
             boundElement = this;

             this.shadowTree.getElementById('feedbutton').addEventListener('click', this.getFeed, false);
             this.boundElement = this;
             //var buf = [];for (var prop in this.shadowTree){buf.push(prop);}
             //alert(buf.join(', '));
             frame = this.shadowTree.getAttribute('frame');
           },
           boundElement:null,
           frame:"",
           targetIFrame:function(src){
               alert(src);
               },
           getFeed: function(){
               var shadowTree = boundElement.shadowTree;
               var internal = shadowTree.getElementById("internal");
               var username = shadowTree.getElementById("username").value;
               var password = shadowTree.getElementById("password").value;
               var http = new XMLHttpRequest();
               setTimeout(boundElement.getFeed,60000);
               // Note - you're passing password via cleartext here, something stronger recommended
               var url = "twitter.xq?username="+username+"&password="+password;
               http.open("GET",url,true);
               http.onreadystatechange = function() {
                   if (http.readyState == 4){
                       internal.innerHTML = '';
                       var tweets = eval(http.responseText);
                       for (tweetCt in tweets) {
                           var buf = [];
                           var tweet = tweets[tweetCt];
                           var text = tweet.text;
                           text = text.replace('&'," and ");
                           text = text.replace(/(http:\/\/\S+).*/,'<a href="$1" target="__frame__">$1</a>');
                           text = text.replace("__frame__",frame);
                           if (shadowTree.getElementById("id")==null){
                               buf.push("<tr class='tweet_row' id='"+tweet.id+"'>");
                               buf.push("<td class='tweet_cell'><img src='"+tweet.user.profile_image_url+"' width='48' height='48'/></td>");
                               buf.push("<td class='tweet_cell'><b>"+tweet.user.name+":</b> "+text+"</td>");
                               buf.push("</tr>");
                               var output = buf.join("");
                               internal.innerHTML = output + internal.innerHTML;
                               }
                           }
                       }
                   };
               http.send(null);
               }
           })
       ]]></implementation>
       <template>
           <table>
               <tr>
                   <td>
                       <table id="controller">
                           <tr>
                               <th>User Name:</th>
                               <th colspan="2">Password:</th>
                           </tr>
                           <tr>
                               <td>
                                   <input type="text" id="username" style="width:150px;" value="kurt_cagle"/>
                               </td>
                               <td>
                                   <input type="password" id="password" style="width:150px;" value="mermaid"/>
                               </td>
                               <td>
                                   <input type="button" id="feedbutton" value="Retrieve"/>
                               </td>
                           </tr>
                       </table>
                       <div id="container">
                           <table id="internal"/>
                       </div>
                   </td>
               </tr>
           </table>
       </template>
       <!--        <handlers></handlers> -->
       <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>
   </binding>
</xbl>