The W3C's 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.

1. XML Binding Language

2. This talk describes the XBL 2.0 Specification:
http://www.w3.org/TR/xbl/
htt // /TR/ bl/
What is XBL2?
XBL Elements
Binding attachment and detachment
g
Shadow Content
Implementations and inheritance
Event handlers
DOM Interfaces

3. Redundant semantic free mark‐up (div
elements, for example)
elements for example)
Hard to add new interfaces/methods to
elements
l
Hard to capture events, particularly modified
p p y
key events
Hard to move content in a document,
especially from one medium to another

4. Log on Widget (minimal markup)
<form action=quot;#examplequot; method=quot;postquot; id=quot;loginWidgetquot;>
<fieldset>
<legend>Log on</legend>
<label for=quot;usernameFieldquot;>Username:</label>
<input name=quot;usernamequot; type=quot;textquot;/>
<label for=quot;passwordFieldquot;>Password:</label>
<input type=quot;passwordquot; name=quot;passwordquot;/>
<input name=quot;submitquot; type=quot;submitquot;/>
p yp
</fieldset>
</form>

5. No enough structure
Actual Markup needed for design:
<form action=quot;#examplequot; method=quot;postquot; id=quot;loginWidgetquot;>
<fieldset> <legend>Log in</legend>
<div id=quot;loginBoxFieldsquot;>
<div class= fieldGroup >
<div class=quot;fieldGroupquot;>
<label for=quot;usernameFieldquot; >Username:</label>
<input name=quot;usernamequot; type=quot;textquot; id=quot;usernameFieldquot; value=quot;quot;/>
</div>
<div class=quot;fieldGroupquot;>
<label for=quot;passwordFieldquot;>Password:</label>
<label for= passwordField >Password:</label>
<input type=quot;passwordquot; id=quot;passwordFieldquot; name=quot;passwordquot; value=quot;quot;/>
</div>
</div>
<div class=quot;actionsContainerquot;>
<div class=quot;inputButtonsquot;>
<div class= inputButtons >
<input name=quot;submitquot; type=quot;submit“ class=quot;submitButtonquot; value=quot;Submitquot; />
</div>
</div>
</fieldset>
</form>

6. Designers need 2x the markup to achieve a
design
Markup needs to be polluted with
semantically neutral div elements
ll ld l
XBL can fix this... And make the whole thing
g
better to use.

7. DOM‐Based binding language
Used to override (or enhance) standard
behaviour and presentation of DOM elements
Lets you:
y
Add/move/replace/restyle content
Add DOM interfaces to elements
Add new styles
Add event listeners
Preload media
No implementations yet

8. HTML documents
Add accessibility, enhance behaviour and
Add ibilit h b h i d
aesthetics
Multimedia
M l i di
Add functionality
Bring elements to life

12. Binding Global Attributes
Implementation
p e e tat o xbl:pseudo
b pseudo
▪ For CSS pseudo selectors
Template
xbl:attr
▪ Content
▪ div ▪ For forwarding attributes
▪ Inherited
Resources
▪ Prefetch
▪ Style
Handlers
▪ Handler
Script

13. Same as HTML script <script>
Declare global var c = 0;
functions function magic(a,b ){
Scoped to the XBL return a + b c;
return a + b * c;
document }
</script?>

14. Allows you to define a binding:
How it behaves
H it b h
If it extends other bindings (inheritance model will
be discussed later)
What content it adds when bound to another
element
What resources it uses

15. Allows you to add new <binding element=“h1”>
DOM interfaces <implementation>
Define new functionality for ({
an object this.makeRed() =function(){
Define event handlers },
}
Define properties and fields this.onclick(e) = function{
this.makeRed();
}
})
</implementation>
/implementation
</binding>
...
<h1>

16. Template <binding id=“reshuffle”>
<template>
Contains a template of the
p
<content includes=“b”/>
content to be inserted into
a document <content includes=“a”/>
Content </template>
Inserts the “selected” </binding>
content of a bound ....
element
l t
<div id=“homepage”>
You can only use a selected
<h1 id=“a”>Welcome!</h1>
element once.
<h2 id=“b”>Marcos’
h id “b” M ’
The resulting DOM tree
page</h1>
is called shadow content
</div>

17. DIV <binding extends=“reshuffle”>
<template>
Used as a general container
<div state=“idle”>
mechanism (like HTML div)
<inherited>
Has a “state” attribute
Inherited <h1>
no one’s homepage
Used to insert the content of an
</h1>
extended binding into another
binding. </inherited>
<div>
</template>
p
<resources>
<style>
div[state=idle]{
color: yellow;
}
</style>
</ resources>
</binding>

18. Resources <binding>
<resources>
esou ces
Structural container
<style>
Style
button:active{
Styles applied to a binding
y pp g
border: solid red;
Author sheet styles can
background: url(fancy.png);
also be applied to a
binding
bi di }
Prefetch </style>
Primes the cache <prefetch src=“fancy.png”/>
fh “f ”/
</resources>
</binding>

19. Allows you to group event The bound document is:
handlers
Trap DOM events and re‐route
p <hotspot message=quot;Hello Worldquot;>
p g
them to functions defined in the <instruction>
<implementation> Activate this text.
Fine‐grained control over </instruction>
keyboard and mouse events </hotspot>
The binding is:
<binding>
g
<handlers>
<handler event=quot;clickquot;>
alert(
event.currentTarget.getAttribute(
event currentTarget getAttribute(
'message' ));
</handler>
</handlers>
</binding>

20. id key
event key‐location
key location
phase text
trusted prev‐value
prev value
propagate new‐value
default action
default‐action attr name
attr‐name
button attr‐change
click‐count
click count
modifiers

21. Document attachment Binding Detachment
Element.removeBinding(URI)
Processing Instruction
▪ <?xbl href=quot;foo.xmlquot;?>
New DOM interface
▪ document.loadBindingDocument('foo.xml');
Element Attachment
CSS
▪ ‐xbl‐binding: url(quot;foo.xmlquot;)
g ( )
Binding element
▪ <binding element=quot;#xquot;>
g

22. Explicit inheritance
Implicit inheritance