index.html 35.9 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en-au" xml:lang="en-au" xmlns="http://www.w3.org/1999/xhtml">
 <head><meta content="HTML Tidy for Linux/x86 (vers 1st November 2002), see
  www.w3.org" name="generator" />

  <title>XBL 2.0 Primer: An Introduction for Developers</title>

  <style type="text/css">

   pre{ border:solid thin; background:#eee; color:#000; padding:0.5em }
   pre.idl :link, pre.idl :visited { color:inherit; background:transparent }
   dfn { font-style:normal; font-weight:bolder}
   em.ct { font-style:normal; font-weight:normal; font-variant:small-caps }
   .issue { padding:.5em; border:solid red }
   .example { border:double #f0f; background:#ffffdf }
   dd > dl { margin:0px; padding:0px }
   code { font-size: 1.0em}
   code :link, code :visited { color:inherit }
   .todo { border:10px solid #eee; color:#666; padding:5px; font-size:.8em }
   .todo:before { color:red; content: "TODO: " }
   .figure { text-align: center; display: block; }
   .figure img { display: block; margin: auto; }


    </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel="stylesheet"
  type="text/css" />
 </head>

 <body>
  <div class="head"> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt="W3C" height="48"
    src="http://www.w3.org/Icons/w3c_home" width="72" /></a> <!--end-logo--></p>

   <h1 class="head" id="xbl-2.0">XBL 2.0 Primer: An Introduction for
    Developers</h1>

   <h2 class="no-num no-toc" id="pagesubtitle">W3C Working Draft 18 July 2007</h2>

   <dl>
    <dt>This Version:</dt>

    <dd><a
     href="http://www.w3.org/TR/2007/WD-xbl-primer-20070718/">http://www.w3.org/TR/2007/WD-xbl-primer-20070718/</a></dd>

    <dt>Latest Version:</dt>

    <dd><a
     href="http://www.w3.org/TR/xbl-primer/">http://www.w3.org/TR/xbl-primer/</a></dd>

    <dt>Editors:</dt>

    <dd><a href="http://lachy.id.au/">Lachlan Hunt</a>, (Invited Expert)
     &lt;<a
     href="mailto:lachlan.hunt@lachy.id.au">lachlan.hunt@lachy.id.au</a>&gt;</dd>

    <dd><a href="http://datadriven.com.au/">Marcos Caceres</a>, (<a
     href="http://www.qut.edu.au">Queensland University of Technology</a>)
     &lt;<a href="mailto:m.caceres@qut.edu.au">m.caceres@qut.edu.au</a>&gt;</dd>

   </dl>
   <!--begin-copyright-->
   <p class="copyright"><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
    &copy; 2007 <a href="http://www.w3.org/"><acronym title="World Wide Web
    Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
    of Technology">MIT</acronym></a>, <a
    href="http://www.ercim.org/"><acronym title="European Research Consortium
    for Informatics and Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>

    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright--></div>

  <hr />

  <h2 class="no-num no-toc" id="abstract">Abstract</h2>

  <p>This practical guide provides you with the knowledge required to
   effectively use the XML Binding Language 2.0. It introduces both the basic
   and advanced concepts of XBL and describes its syntax and scenarios that
   should be considered best-practice. It also describes the purpose of the
   language elements described in the XBL 2.0 specification.</p>

  <p>XBL describes the ability to associate elements in one document with
   script, event handlers, styles, and more complex content models in another
   document. You can use XBL to re-order and wrap content so that, for
   instance, simple HTML or XHTML markup can have complex CSS styles applied
   without requiring that the markup be polluted with multiple
   <code>div</code> elements. In addition, if you are a programmer, you can
   use XBL to implement new DOM interfaces, and, in conjunction with other
   specifications, it enables arbitrary XML tag sets to be treated as
   &quot;widgets&quot; (pluggable user interface components).</p>

  <h2 class="no-num no-toc" id="sotd">Status of this Document</h2>

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index</a> at http://www.w3.org/TR/.</em></p>

  <p>This is the 18 July 2007 First Public Working Draft of the <cite>XBL 2.0
   Primer: An Introduction for Developers</cite>. This document is produced
   by the <a href="http://www.w3.org/2006/appformats/">Web Application
   Formats</a> (WAF) Working Group (WG). This <abbr title="Working
   Group">WG</abbr> is part of the <a
   href="http://www.w3.org/2006/rwc/Activity">Rich Web Clients Activity</a>
   and this activity is within the W3C's <a
   href="http://www.w3.org/Interaction/">Interaction Domain</a>.</p>

  <p>Web content and browser developers are encouraged to review this draft.
   Please send comments to <a
   href="mailto:public-appformats@w3.org">public-appformats@w3.org</a>, the
   W3C's public email list for issues related to web Application Formats. <a
   href="http://lists.w3.org/Archives/Public/public-appformats/">Archives</a>
   of the list are available. The <a
   href="http://dev.w3.org/cvsweb/2006/waf/XBLPrimer/">editor's draft</a> of
   this document is available in W3C CVS. A detailed <a
   href="http://dev.w3.org/cvsweb/2006/waf/XBLPrimer/">list of changes</a> is
   also available from the W3C CVS server.</p>

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/38483/status"
   rel="disclosure">public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>

  <p>Please note that at the time of writing there are no implementations of
   XBL 2.0 public ally available, so everything in this document is untested.</p>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.</p>

  <h2 class="no-num no-toc" id="toc">Table of Contents</h2>
  <!--begin-toc-->

  <ul class="toc">
   <li><a href="#introduction"><span class="secno">1. </span>Chapter 1 -
    Overview of XBL</a>

    <ul class="toc">
     <li><a href="#audience"><span class="secno">1.1. </span>Intended
      audience</a></li>

     <li><a href="#docStructure"><span class="secno">1.2. </span>How the
      Primer is structured</a></li>

     <li><a href="#conventions"><span class="secno">1.3. </span>Conventions
      used in this document</a></li>

     <li><a href="#overview"><span class="secno">1.4. </span>XBL</a></li>

     <li><a href="#xbl-part1-binding"><span class="secno">1.5.
      </span>Bindings</a></li>

     <li><a href="#xbl-part1-sample"><span class="secno">1.6.
      </span>Attaching Bindings</a>
      <ul class="toc">
       <li><a href="#xbl-part1-element-attr"><span class="secno">1.6.1.
        </span>The element Attribute</a></li>

       <li><a href="#xbl-part1-binding-prop"><span class="secno">1.6.2.
        </span>The &lsquo;binding&lsquo; Property</a></li>

       <li><a href="#xbl-part1-script"><span class="secno">1.6.3.
        </span>Using the <code>addBinding()</code> method</a></li>
      </ul>

     </li>

     <li><a href="#xbl-part1-event-handlers"><span class="secno">1.7.
      </span>Event Handlers</a>
      <ul class="toc">
       <li><a href="#xbl-part2-tradevent"><span class="secno">1.7.1.
        </span>Traditional Event Handling</a></li>

       <li><a href="#xbl-part2-xblevents"><span class="secno">1.7.2.
        </span>Handling Events with XBL</a>

        <ul class="toc">
         <li><a href="#xbl-part2-eventfilters"><span class="secno">1.7.2.1.
          </span>Event Filters</a></li>

         <li><a href="#xbl-part2-commonfilters"><span class="secno">1.7.2.2.
          </span>Other Common Event Filters</a></li>
        </ul>
       </li>
      </ul>

     </li>

     <li><a href="#templates"><span class="secno">1.8. </span>Templates</a>
      <ul class="toc">
       <li><a href="#shodowTrees"><span class="secno">1.8.1. </span>Shadow
        Trees</a></li>
      </ul>
     </li>

     <li><a href="#implementingInterfaces"><span class="secno">1.9.
      </span>Implementing Interfaces</a></li>

     <li><a href="#resources"><span class="secno">1.10. </span>Resources</a></li>

     <li><a href="#scripts"><span class="secno">1.11. </span>Scripts</a></li>
    </ul>

   </li>

   <li class="no-num"><a href="#XBLIntroduction">Chapter 2. Reordering
    content</a></li>

   <li class="no-num"><a href="#formControls">Chapter 3. Form controls</a></li>

   <li class="no-num"><a href="#XBLAndXHR">Chapter 4. XBL and
    <code>XmlHttpRequest</code></a></li>

   <li class="no-num"><a href="#EnchacingUserXp">Chapter 5. Enhancing user
    experience</a></li>

   <li class="no-num"><a href="#repurposingContent">Chapter 6. Re-purposing
    content to increase accessibility:</a></li>

   <li class="no-num"><a href="#appendix">Appendix. Language reference</a></li>

   <li class="no-num"><a href="#references">References</a></li>

   <li class="no-num"><a href="#acknowledgments">Acknowledgements</a></li>
  </ul>

  <!--end-toc-->

  <h2 id="introduction"><span class="secno">1. </span>Chapter 1 - Overview of
   XBL</h2>

  <p>The move in web development towards avoiding the <code>table</code>
   element for layout has led developers to consider how to exploit other
   HTML elements, CSS, and ECMAScript to achieve complex layouts. To a large
   extent, this move has been fueled by proponents of the Web 2.0 movement
   who promote the importance of having highly accessible content that is
   both adaptive and provides an engaging user experience. However, a new
   problem has emerged where by web documents are now heavily 'polluted' with
   the semantically-neutral <code>div</code> element and complex JavaScript
   and CSS that is hard for authors to maintain.</p>

  <p>The XML Binding Language 2.0 (XBL) is a declarative language that can be
   used together with existing or new web documents to enhance their
   presentation, behavior, accessibility, and maintainability. This Primer is
   designed to provide you with the practical knowledge required to use XBL
   effectively in your work. It introduces both the basic and advanced
   concepts of XBL and describes its syntax and best-practices usage
   scenarios. It also describes the purpose of the language elements
   described in the XBL specification document.</p>

  <h3 id="audience"><span class="secno">1.1. </span>Intended audience</h3>

  <p>The primary intended audience for the Primer is <em>web developers</em>:
   that is, anyone who has some experience working with HTML, CSS,
   JavaScript, and perhaps some exposure to XML. This assumes that the reader
   is familiar with those, and other related web development techniques and
   technologies. A second intended audience are XML developers who are
   considering XBL as a tool to enhance the behavior and programmatic
   functionality of DOM elements. Where relevant, we make note of advanced
   functionality of XBL specifically for XML developers or advanced web
   developers.</p>

  <p>We have written this document as a series of tutorials for developers
   who want to learn XBL in a 'hands-on' manner. We have made every effort to
   write this in a relaxed style that should be understandable by a large
   audience. While this is not a technical specification and it does not
   include any implementation details or requirements, this may still be a
   useful introduction to the concepts of XBL for people who are intending to
   implement the XBL specification.</p>

  <h3 id="docStructure"><span class="secno">1.2. </span>How the Primer is
   structured</h3>

  <p class="issue">Need to revise this section later!!!</p>

  <p>XBL is a powerful and sometimes complex language with many features. In
   order to effectively demonstrate the relevant aspects of the language, we
   have split the primer into 6 chapters:</p>

  <dl>
   <dt>Chapter 1 - Overview of XBL</dt>

   <dd>Introduces you to the high level concepts and functionality of XBL.
    This chapter is useful for getting a holistic view of the language and
    what its used for.</dd>

   <dt>Chapter 2 - Reordering content</dt>

   <dd>Introduces you to XBL's ability to reorder content. Apart from
    introducing developers to bindings, this scenario introduces loading and
    applying custom style sheets.</dd>

   <dt>Chapter 3 - Form controls</dt>

   <dd>Introduces you to how XBL can be used for client-side form validation
    by creating reusable bindings. \</dd>

   <dt>Chapter 4 - XBL and XmlHttpRequest</dt>

   <dd>introduces you to how you can to simplify Ajax style development with
    XBL.</dd>

   <dt>Chapter 5 - Enhancing user experience</dt>

   <dd>shows you how you can take existing content and enhance its
    presentation and user experience with XBL.</dd>

   <dt>Chapter 6 - Re-purposing content to increase accessibility:</dt>

   <dd>to be written.</dd>

   <dt>Appendix - Language reference:</dt>

   <dd>The appendix has been written so you can quickly find information
    about each XBL elements and see examples of how they can be used to solve
    common problems. It also provides relevant link</dd>
  </dl>

  <h3 id="conventions"><span class="secno">1.3. </span>Conventions used in
   this document</h3>

  <p class="todo">Conventions used in this document... any preferred
   conventions (eg. code conventions? figure styles? any exemplar web
   sites?)? please suggest some.</p>

  <h3 id="overview"><span class="secno">1.4. </span>XBL</h3>

  <p>XML Binding Language (XBL) 2.0 is a mechanism for extending the
   presentation and behavior of a document. XBL 2.0 is based upon the
   original <a href="http://www.mozilla.org/projects/xbl/xbl.html">XBL 1.0
   specification</a> created and implemented by Mozilla, though it has been
   significantly redesigned and is not backwards compatible. One of the goals
   of XBL is to allow you to directly enhance the user experience of web
   documents without needing to overuse structuring elements, such as the
   <code>div</code> element, in your HTML.</p>

  <p>XBL provides various mechanisms to dynamically pre-load and include new
   content and style sheets into a document, and to enhance HTML or XML
   elements with scripted functionality. For example, an HTML
   <code>input</code> element can automatically validate user input via a
   custom script that is bound to it using XBL. These features potentially
   translate into a richer end-user experience and documents that are easier
   to code, style, and maintain.</p>

  <p>XBL is structured into several different components. The bindings are
   used to attach presentation and behavior to an element, and the scripts
   are used to define helper functions used by the bindings. The bindings are
   comprised of templates, event handlers, API implementations and resources
   (figure 1).</p>

  <div class="figure"> <img alt="" height="246"
   src="images/topXBLElements_big.png" width="447" />
   <p class="legend">Figure 1. Structure of an XBL Document</p>

  </div>

  <h3 id="xbl-part1-binding"><span class="secno">1.5. </span>Bindings</h3>

  <p>A binding is a way to attach presentation and behavior to an HTML or XML
   element. The concept is similar to the way we already style elements using
   CSS and attach event listeners to them with JavaScript, but by adding an
   extra layer of abstraction in between simplifies the development process.
   Bindings are a not a way to replace existing authoring tools like CSS and
   JavaScript, but rather an enhancement to them.</p>

  <p>There are four main aspects of a binding: templates, handlers,
   implementations and resources.</p>

  <dl>

   <dt><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#the-template">Templates</a></dt>

   <dd>A way to enhance the presentation (particularly layout) beyond what is
    possible with existing CSS techniques.</dd>

   <dt><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#the-handlers">Handlers</a></dt>

   <dd>Offer an improved way to declare event listeners (eg. mouse and key
    events).</dd>

   <dt><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#the-implementation">Implementations</a></dt>

   <dd>A means to add new methods and properties to a XML or HTML element.</dd>

   <dt><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#the-resources">Resources</a></dt>

   <dd>Allow you to load style-sheets and <em>prefetch</em> images, video,
    audio or any other content associated with the binding.</dd>
  </dl>

  <h3 id="xbl-part1-sample"><span class="secno">1.6. </span>Attaching
   Bindings</h3>

  <p>Bindings can be attached to elements in several ways using:</p>

  <ol>
   <li>the '<code>element</code>' attribute of the <code>binding</code>

    element via a CSS-style selector [SELECTORS],</li>

   <li>the '<code>binding</code>' property in CSS,</li>

   <li>the '<code>addBinding()</code>' method in a script.</li>
  </ol>

  <p>We discuss these three attachment methods below.</p>

  <h4 id="xbl-part1-element-attr"><span class="secno">1.6.1. </span>The
   element Attribute</h4>

  <p>To create a binding using <a
   href="http://www.w3.org/TR/2006/WD-xbl-20060907/#element">the
   <code>element</code> attribute</a> of a binding element you need to
   specify a selector. It&rsquo;s the same type of selector that is used in
   CSS, so it&rsquo;s very easy to understand. This binding will be attached
   to all elements that match the selector: <code>#nav li</code>.</p>

  <pre>
<code>&lt;xbl xmlns=&quot;http://www.w3.org/ns/xbl&quot;&gt;
  &lt;binding element=&quot;#nav li&quot;&gt;
    &lt;implementation&gt;...&lt;/implementation&gt;
    &lt;template&gt;...&lt;/template&gt;

    &lt;handlers&gt;...&lt;/handlers&gt;
    &lt;resources&gt;...&lt;/resources&gt;
  &lt;/binding&gt;
&lt;/xbl&gt;</code>
</pre>

  <h4 id="xbl-part1-binding-prop"><span class="secno">1.6.2. </span>The
   &lsquo;binding&lsquo; Property</h4>

  <p><a
   href="http://www.w3.org/TR/2006/WD-xbl-20060907/#the--xbl-binding">The
   '<code>binding</code>' property</a> can be used in in your CSS to attach a
   binding, in exactly the same way you apply any other other style to an
   element.</p>

  <p>bindings.xml:</p>

  <pre>
<code>&lt;xbl xmlns=&quot;http://www.w3.org/ns/xbl&quot;&gt;
  &lt;binding id=&quot;demo&quot;&gt;
    &lt;implementation&gt;...&lt;/implementation&gt;
    &lt;template&gt;...&lt;/template&gt;

    &lt;handlers&gt;...&lt;/handlers&gt;
    &lt;resources&gt;...&lt;/resources&gt;
  &lt;/binding&gt;
&lt;/xbl&gt;</code>
</pre>

  <p>The style sheet:</p>

  <pre>
<code>#nav li { binding: url(bindings.xml#demo); }</code>
</pre>

  <h4 id="xbl-part1-script"><span class="secno">1.6.3. </span>Using the
   <code>addBinding()</code> method</h4>

  <p>Elements will implement the <a
   href="http://www.w3.org/TR/2006/WD-xbl-20060907/#the-elementxbl"><code>ElementXBL</code>
   interface</a>, which defines three methods: <code>addBinding()</code>,
   <code>removeBinding()</code> and <code>hasBinding()</code>. The
   <code>addBinding()</code> method can be used to attach a binding to an
   individual element using a script, like this:</p>

  <pre>
var e = getElementById(&quot;example&quot;); // Get the element
e.addBinding(&quot;bindings.xml#foo&quot;);  // Attach the binding
</pre>

  <p>It is also possible to check if a binding has been attached using the
   <code>hasBinding()</code> funciton.</p>

  <pre>
if (e.hasBinding(&quot;bindings.xml#foo&quot;)) {
   // Do something
}
</pre>

  <p>Bindings can also be detached using the <code>removeBinding()</code>
   function.</p>

  <pre>

e.removeBinding(&quot;bindings.xml#foo&quot;);
</pre>

  <h3 id="xbl-part1-event-handlers"><span class="secno">1.7. </span>Event
   Handlers</h3>

  <p>As stated earlier, handlers offer an improved way to declare event
   listeners (eg. mouse and key events).</p>

  <h4 id="xbl-part2-tradevent"><span class="secno">1.7.1. </span>Traditional
   Event Handling</h4>

  <p>The following example illustrates some typical <em>unobtrusive</em>
   scripting techniques to attach event listeners, including both the
   <code>window.onload</code> property and the
   <code>addEventListener()</code> function.</p>

  <pre>

<code>window.onload = function() {
    var nav = document.getElementById(&quot;nav&quot;);
    var li = nav.getElementsByTagName(&quot;li&quot;);
    for (var i = 0; i &lt; li.length; i++) {
        li[i].addEventListener(&quot;mouseover&quot;, doSomething, false);
    }
}</code>
</pre>

  <p>Another common method is to use the HTML <code>on<var>event</var></code>

   attributes, like the following.</p>

  <pre>
<code>&lt;li onmouseover=&quot;doSomething();&quot;&gt;...&lt;/li&gt;</code>
</pre>

  <p>There are advantages and disadvantages to both methods, but the former
   is generally considered better because it separates the behavior layer
   from the markup. However, the latter is a simple declarative syntax that
   can be quite convenient in some cases.</p>

  <h4 id="xbl-part2-xblevents"><span class="secno">1.7.2. </span>Handling
   Events with XBL</h4>

  <p>In XBL, instead of requiring authors to use a script to search for the
   elements, the event listeners are attached to those that the binding is
   attached to. XBL provides a simple declarative syntax which also continues
   to separate the behavior layer from the semantic markup layer. Event
   listeners are declared using both the <a
   href="http://www.w3.org/TR/2006/WD-xbl-20060907/#the-handlers"><code>handlers</code></a>
   element and its child <a
   href="http://www.w3.org/TR/2006/WD-xbl-20060907/#the-handler"><code>handler</code></a>
   elements. For example, this binding will be attached to all
   <code>li</code> elements within an element with
   <code>id=&quot;nav&quot;</code>.</p>

  <pre>
<code>&lt;xbl xmlns=&quot;http://www.w3.org/ns/xbl&quot;&gt;
  &lt;binding element=&quot;#nav li&quot;&gt;
    &lt;handlers&gt;
      &lt;handler event=&quot;mouseover&quot;&gt;

        doSomething();
      &lt;/handler&gt;
    &lt;/handlers&gt;
  &lt;/binding&gt;
&lt;/xbl&gt;</code>
</pre>

  <p>If present, only <em>one</em> <code>handlers</code> element is allowed
   within a binding, but it can contain as many child <code>handler</code>

   elements as required, to capture as many different events as you like.
   This binding declares a single event handler that listens for the
   <code>mouseover</code> event. When the <code>mouseover</code> event is
   fired on a bound element (i.e. an element to which this binding is
   attached), the handler is invoked in effectively the same way it would
   have been using the other methods shown above.</p>

  <h5 id="xbl-part2-eventfilters"><span class="secno">1.7.2.1. </span>Event
   Filters</h5>

  <p>There are often times when you only want to handle an event under
   certain conditions. For example, when you want to capture a
   <code>click</code> event and do something only when the user clicks the
   left mouse button; or capture a keyboard event and perform different
   functions depending on which key was pressed. In traditional scripting
   techniques, you have to check the values of certain properties using
   <code>if</code> or <code>switch</code> statements in your function, like
   the following.</p>

  <pre>
<code>function doSomething(e) {
    var code;
    e = e || window.event;
    code = e.keyCode || e.which;
    switch(code) {
        ...
    }
}</code>
</pre>

  <p>Much of that involves handling of incompatibilities between legacy
   browsers, but even if all browsers supported the DOM Events standard, it
   is still quite complicated. XBL addresses this by providing a simple
   declarative syntax for describing these conditions using <a
   href="http://www.w3.org/TR/2006/WD-xbl-20060907/#attributes9">attributes
   on the handler element</a>.</p>

  <p>In the following example, separate handlers are provided for for
   handling the <code>keypress</code> events depending on which character was
   entered. The first handles the character <kbd>a</kbd>, the second handles
   <kbd>b</kbd>. If any other character was entered, neither of these two
   handlers will be invoked.</p>

  <pre>
<code>&lt;handlers&gt;

  &lt;handler event=&quot;keypress&quot; text=&quot;a&quot;&gt;
    doSomethingA();
  &lt;/handler&gt;

  &lt;handler event=&quot;keypress&quot; text=&quot;b&quot;&gt;
    doSomethingB();
  &lt;/handler&gt;
&lt;/handlers&gt;</code>
</pre>

  <p>Similarly, in the following example, the handler will only be invoked
   when the user left clicks while holding the <kbd>Shift</kbd> key down.</p>

  <pre>
<code>&lt;handlers&gt;
  &lt;handler event=&quot;click&quot; button=&quot;0&quot; modifiers=&quot;shift&quot;&gt;
    doSomething();
  &lt;/handler&gt;

&lt;/handlers&gt;</code>
</pre>

  <h5 id="xbl-part2-commonfilters"><span class="secno">1.7.2.2. </span>Other
   Common Event Filters</h5>

  <p>There are several other filters that can be used. The following list is
   a subset of the available attributes for this purpose. These are expected
   to be the most commonly used filters because they cover the majority of
   mouse and keyboard event usage on the web today.</p>

  <dl>
   <dt><code><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#button">button</a></code></dt>

   <dd>A space separated list of mouse buttons pressed by the user. e.g.
    <code>button=&quot;0 2&quot;</code> matches either the
    <strong>left</strong> <em>or</em> <strong>right</strong> mouse buttons.</dd>

   <dt><code><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#click-count">click-count</a></code></dt>

   <dd>The number of times the user clicked. e.g.
    <code>click-count=&quot;2&quot;</code> matches <em>double clicks</em>.</dd>

   <dt><code><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#text">text</a></code></dt>

   <dd>The text entered by the user. This is different from the key code
    because it matches the letter that was entered, regardless of the keys
    that were pressed. This is particularly important for languages that
    require several key presses to enter certain letters.</dd>

   <dt><code><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#modifiers1">modifiers</a></code></dt>

   <dd>Modifier keys, including <kbd>alt</kbd>, <kbd>control</kbd>,
    <kbd>shift</kbd>, <kbd>meta</kbd>, etc.</dd>

   <dt><code><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#key">key</a></code></dt>

   <dd>Matches against the <a
    href="http://www.w3.org/TR/DOM-Level-3-Events/keyset.html#KeySet-Set">keyIdentifier
    value</a> defined in DOM 3 Events</dd>

   <dt><code><a
    href="http://www.w3.org/TR/2006/WD-xbl-20060907/#key-location">key-location</a></code></dt>

   <dd>For matching the location of the key that was pressed on the keyboard,
    including <code>standard</code>, <code>left</code>, <code>right</code>

    and <code>numpad</code>.</dd>
  </dl>

  <h3 id="templates"><span class="secno">1.8. </span>Templates</h3>

  <p>Templates is used to control the presentation of a document. They can be
   used to reorder and restructure content in the document without affecting
   the underlying DOM.</p>

  <p>Templates are created using the <code>template</code> element within a
   binding. The templating model allows you to combine elements from the
   document with additional elements in creative ways, removing the need for
   unnecessary and extraneous elements to be added to the original document.
   You could, for example, use XBL to extract the data from an HTML table and
   present it as a chart using SVG.</p>

  <p>An important concept to grasp is that regardless of what content you
   include in the template, the template does not alter the semantics of the
   original document. For example, in an HTML document, a heading could be
   bound to a binding with a template containing an SVG image. The bound
   element still semantically represents a heading, only its presentation has
   changed from plain text to an image. That concept shouldn't&rsquo;t be too
   hard to grasp, that example (in principle) is not much different from any
   of the widely used image replacement techniques, it only differs in
   implementation.</p>

  <p>The XBL <code>content</code> element can be used to insert content from
   the document into the template. The <code>includes</code> attribute value
   is a selector, used to select which elements to insert into the tree at
   that location. The <code>div</code> element is provided as a generic
   structural element that you can use for any purpose you like.</p>

  <h4 id="shodowTrees"><span class="secno">1.8.1. </span>Shadow Trees</h4>

  <p>When elements are bound, the contents of their binding&rsquo;s template
   are cloned and appended to them as children, creating shadow trees. Shadow
   trees exist outside of the normal DOM and are thus transparent to ordinary
   DOM processing. In other words, shadow trees are rendered as though they
   were part of the original document, but do not actually exist within the
   document itself.</p>

  <pre>
<code>&lt;body&gt;
  &lt;div id=&quot;main&quot;&gt;...&lt;/div&gt;

  &lt;div id=&quot;nav&quot;&gt;...&lt;/div&gt;
&lt;/body&gt;</code>
</pre>

  <p>Using XBL, the content can be reordered and restructured, which will
   allow for more complex styles to be applied.</p>

  <pre>
<code>&lt;xbl xmlns=&quot;http://www.w3.org/ns/xbl&quot;&gt;

  &lt;binding element=&quot;body&quot;&gt;
    &lt;template&gt;
      &lt;div id=&quot;container&quot;&gt;
        &lt;div id=&quot;left&quot;&gt;&lt;content includes=&quot;#nav&quot;/&gt;&lt;/div&gt;

        &lt;div id=&quot;right&quot;&gt;&lt;content includes=&quot;#main&quot;/&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  &lt;/binding&gt;

&lt;/xbl&gt;</code>
</pre>

  <p>This will create the following shadow tree.</p>

  <p class="issue">Need a diagram</p>

  <h3 id="implementingInterfaces"><span class="secno">1.9.
   </span>Implementing Interfaces</h3>

  <p>The <code>implementation</code> element describes a set of methods and
   properties that are attached to the bound element. That is, a way to
   enhance the bound element&rsquo;s DOM interface. For example, if you
   wanted to add custom validation to <code>HTMLInput</code> element, you
   would need to do the following in JavaScript:</p>

  <pre>
<code>var customInput    = document.createElement(&quot;input&quot;);
myInput.max_value  = 56;
myInput.checkValue = function() {
  // Custom validation
};</code>

</pre>

  <p>That example illustrates the basic way in which we can add properties
   and methods to an already existing HTML element. Exactly the same
   technique can already be used to add properties and methods to an element,
   and this is similar to what the implementation element is designed to do.
   The equivalent to the example above in XBL would be.</p>

  <pre>
<code>&lt;xbl xmlns=&quot;http://www.w3.org/ns/xbl&quot;&gt;
  &lt;binding element=&quot;#customInput&quot;&gt;
    &lt;implementation&gt;

    ({
      max_value: 56,
      checkValue: function() {
        // Custom validation
      }
    })
    &lt;/implementation&gt;
  &lt;/binding&gt;
&lt;/xbl&gt;</code>
</pre>

  <p>In the HTML you would have:</p>

  <pre>

<code>&lt;input type=&quot;text&quot; id=&quot;customInput&quot;/&gt;</code>
</pre>

  <p>In this example, the binding is attached to elements matching the
   selector: <code>#customInput</code>.</p>

  <h3 id="resources"><span class="secno">1.10. </span>Resources</h3>

  <p>Resources include style sheets and additional files that are used by the
   binding, such as images, audio and video. The style sheets are used to add
   style to the binding&rsquo;s template.</p>

  <p class="issue">This section is incomplete</p>

  <h3 id="scripts"><span class="secno">1.11. </span>Scripts</h3>

  <p>The XBL <code>script</code> element, which is similar to the
   <code>script</code> element in HTML, can be used to define helper
   functions for your bindings.</p>

  <p>Just like in HTML, scripts can either be script resources using the
   <code>script</code> element's <code>src</code> attribute and declare as
   many script elements as you need:</p>

  <pre>
<code>&lt;xbl xmlns=&quot;http://www.w3.org/ns/xbl&quot;&gt;
  &lt;script src=&quot;example.js&quot;/&gt;

  &lt;script&gt;&lt;![CDATA[
    function foo(){
      example(); // Assume this is defined in example.js
      ...
    }
  ]]&gt;&lt;/script&gt;
  ...
&lt;/xbl&gt;</code>
</pre>

  <p>In the following example, the <code>doSomething()</code> function that
   is defined in an XBL <code>script</code> element will be automatically
   called when binding <code>foobar</code> is attached to an element.</p>

  <pre>
<code>&lt;xbl xmlns=&quot;http://www.w3.org/ns/xbl&quot;&gt;
  &lt;script&gt;
    function doSomething(){...};
  &lt;/script&gt;
  &lt;binding id=&quot;foobar&quot;&gt;

    &lt;implementation&gt;
    ({
      xblBindingAttached: function() {
        doSomething();   // Calls the function defined in the script element
      }
    })
    &lt;/implementation&gt;
  &lt;/binding&gt;
&lt;/xbl&gt;</code>
</pre>

  <p>The default scripting language is ECMAScript. Other languages may be
   used by specifying them with the <code>script-type</code> attribute on the
   <code>xbl</code> element<b>.</b> Since JavaScript is the most common
   scripting language on the web, the default will usually be acceptable to
   most authors.</p>

  <p>Functions and variables defined in the XBL <code>script</code> element
   are scoped to the XBL document, so they cannot be accessed from the bound
   document. Conversely, for security reasons, functions defined in the bound
   document cannot be invoked from within the XBL document. For example, the
   following will not work:</p>

  <pre>
<code>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;xbl xmlns=&quot;http://www.w3.org/ns/xbl&quot;&gt;
    &lt;script&gt;

      function bar(){...}
      foo();  //error, foo is undefined!
    &lt;/script&gt;
  &lt;/xbl&gt;
  &lt;!-- script in  the XHTML namespace --&gt;
  &lt;script  type=&quot;text/javascript&quot;&gt;
    function foo(){...}
    bar(); //error, bar is undefined!
  &lt;/script&gt;

&lt;/html&gt;</code>
</pre>

  <h2 class="no-num" id="XBLIntroduction">Chapter 2. Reordering content</h2>

  <p class="issue">To be written...</p>

  <h2 class="no-num" id="formControls">Chapter 3. Form controls</h2>

  <p class="issue">To be written...</p>

  <h2 class="no-num" id="XBLAndXHR">Chapter 4. XBL and
   <code>XmlHttpRequest</code></h2>

  <p class="issue">To be written...</p>

  <h2 class="no-num" id="EnchacingUserXp">Chapter 5. Enhancing user
   experience</h2>

  <p class="issue">To be written...</p>

  <h2 class="no-num" id="repurposingContent">Chapter 6. Re-purposing content
   to increase accessibility:</h2>

  <p class="issue">To be written...</p>

  <h2 class="no-num" id="appendix">Appendix. Language reference</h2>

  <p class="issue">To be written...</p>

  <h2 class="no-num" id="references">References</h2>

  <p class="issue">This section will be done once the rest is done.</p>

  <h2 class="no-num" id="acknowledgments">Acknowledgements</h2>

  <p>The editors would like to thank the following people for their
   contributions to this specification:</p>
 </body>

</html>