You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
946 lines
36 KiB
946 lines
36 KiB
<!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)
|
|
<<a
|
|
href="mailto:lachlan.hunt@lachy.id.au">lachlan.hunt@lachy.id.au</a>></dd>
|
|
|
|
<dd><a href="http://datadriven.com.au/">Marcos Caceres</a>, (<a
|
|
href="http://www.qut.edu.au">Queensland University of Technology</a>)
|
|
<<a href="mailto:m.caceres@qut.edu.au">m.caceres@qut.edu.au</a>></dd>
|
|
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class="copyright"><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
|
|
© 2007 <a href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</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
|
|
"widgets" (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 ‘binding‘ 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’s the same type of selector that is used in
|
|
CSS, so it’s very easy to understand. This binding will be attached
|
|
to all elements that match the selector: <code>#nav li</code>.</p>
|
|
|
|
<pre>
|
|
<code><xbl xmlns="http://www.w3.org/ns/xbl">
|
|
<binding element="#nav li">
|
|
<implementation>...</implementation>
|
|
<template>...</template>
|
|
|
|
<handlers>...</handlers>
|
|
<resources>...</resources>
|
|
</binding>
|
|
</xbl></code>
|
|
</pre>
|
|
|
|
<h4 id="xbl-part1-binding-prop"><span class="secno">1.6.2. </span>The
|
|
‘binding‘ 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><xbl xmlns="http://www.w3.org/ns/xbl">
|
|
<binding id="demo">
|
|
<implementation>...</implementation>
|
|
<template>...</template>
|
|
|
|
<handlers>...</handlers>
|
|
<resources>...</resources>
|
|
</binding>
|
|
</xbl></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("example"); // Get the element
|
|
e.addBinding("bindings.xml#foo"); // 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("bindings.xml#foo")) {
|
|
// Do something
|
|
}
|
|
</pre>
|
|
|
|
<p>Bindings can also be detached using the <code>removeBinding()</code>
|
|
function.</p>
|
|
|
|
<pre>
|
|
|
|
e.removeBinding("bindings.xml#foo");
|
|
</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("nav");
|
|
var li = nav.getElementsByTagName("li");
|
|
for (var i = 0; i < li.length; i++) {
|
|
li[i].addEventListener("mouseover", 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><li onmouseover="doSomething();">...</li></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="nav"</code>.</p>
|
|
|
|
<pre>
|
|
<code><xbl xmlns="http://www.w3.org/ns/xbl">
|
|
<binding element="#nav li">
|
|
<handlers>
|
|
<handler event="mouseover">
|
|
|
|
doSomething();
|
|
</handler>
|
|
</handlers>
|
|
</binding>
|
|
</xbl></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><handlers>
|
|
|
|
<handler event="keypress" text="a">
|
|
doSomethingA();
|
|
</handler>
|
|
|
|
<handler event="keypress" text="b">
|
|
doSomethingB();
|
|
</handler>
|
|
</handlers></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><handlers>
|
|
<handler event="click" button="0" modifiers="shift">
|
|
doSomething();
|
|
</handler>
|
|
|
|
</handlers></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="0 2"</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="2"</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’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’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><body>
|
|
<div id="main">...</div>
|
|
|
|
<div id="nav">...</div>
|
|
</body></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><xbl xmlns="http://www.w3.org/ns/xbl">
|
|
|
|
<binding element="body">
|
|
<template>
|
|
<div id="container">
|
|
<div id="left"><content includes="#nav"/></div>
|
|
|
|
<div id="right"><content includes="#main"/></div>
|
|
</div>
|
|
</template>
|
|
</binding>
|
|
|
|
</xbl></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’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("input");
|
|
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><xbl xmlns="http://www.w3.org/ns/xbl">
|
|
<binding element="#customInput">
|
|
<implementation>
|
|
|
|
({
|
|
max_value: 56,
|
|
checkValue: function() {
|
|
// Custom validation
|
|
}
|
|
})
|
|
</implementation>
|
|
</binding>
|
|
</xbl></code>
|
|
</pre>
|
|
|
|
<p>In the HTML you would have:</p>
|
|
|
|
<pre>
|
|
|
|
<code><input type="text" id="customInput"/></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’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><xbl xmlns="http://www.w3.org/ns/xbl">
|
|
<script src="example.js"/>
|
|
|
|
<script><![CDATA[
|
|
function foo(){
|
|
example(); // Assume this is defined in example.js
|
|
...
|
|
}
|
|
]]></script>
|
|
...
|
|
</xbl></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><xbl xmlns="http://www.w3.org/ns/xbl">
|
|
<script>
|
|
function doSomething(){...};
|
|
</script>
|
|
<binding id="foobar">
|
|
|
|
<implementation>
|
|
({
|
|
xblBindingAttached: function() {
|
|
doSomething(); // Calls the function defined in the script element
|
|
}
|
|
})
|
|
</implementation>
|
|
</binding>
|
|
</xbl></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><html xmlns="http://www.w3.org/1999/xhtml">
|
|
<xbl xmlns="http://www.w3.org/ns/xbl">
|
|
<script>
|
|
|
|
function bar(){...}
|
|
foo(); //error, foo is undefined!
|
|
</script>
|
|
</xbl>
|
|
<!-- script in the XHTML namespace -->
|
|
<script type="text/javascript">
|
|
function foo(){...}
|
|
bar(); //error, bar is undefined!
|
|
</script>
|
|
|
|
</html></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>
|