Marcos Caceres
marcosscaceres@gmail.com

XBL 2.0 (15‐20mins) Widgets ...
What does it do..
What does it do Our definition of widget
How it works... Spec overview
Issues we want to
discuss
Please stop me to
discuss stuff!

XML Binding Language

What is XBL2?
XBL Elements
Binding attachment and detachment
Shadow Content
h d
Implementations and inheritance
p
Event handlers
DOM Interfaces

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

Log on Widget (minimal markup)
<form action=\"#example\" method=\"post\" id=\"loginWidget\">
<fieldset>
<legend>Log on</legend>
<label for=\"usernameField\">Username:</label>
<input name=\"username\" type=\"text\"/>
<label for=\"passwordField\">Password:</label>
<input type=\"password\" name=\"password\"/>
<input name=\"submit\" type=\"submit\"/>
p yp
</fieldset>
</form>

No enough structure
Actual Markup needed for design:
<form action=\"#example\" method=\"post\" id=\"loginWidget\">
<fieldset> <legend>Log in</legend>
<div id=\"loginBoxFields\">
<div class= fieldGroup >
<div class=\"fieldGroup\">
<label for=\"usernameField\" >Username:</label>
<input name=\"username\" type=\"text\" id=\"usernameField\" value=\"\"/>
</div>
<div class=\"fieldGroup\">
<label for=\"passwordField\">Password:</label>
<label for= passwordField >Password:</label>
<input type=\"password\" id=\"passwordField\" name=\"password\" value=\"\"/>
</div>
</div>
<div class=\"actionsContainer\">
<div class=\"inputButtons\">
<div class= inputButtons >
<input name=\"submit\" type=\"submit“ class=\"submitButton\" value=\"Submit\" />
</div>
</div>
</fieldset>
</form>

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.

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

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

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

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?>

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

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>

Template <binding id=“reshuffle”>
Contains a template of the
p <template>
content to be inserted into <content includes=“b”/>
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
element once. <h1 id=“a”>Welcome!</h1>
The resulting DOM tree <h2 id=“b”>Marcos’
h id “b” M ’
is called shadow content page</h1>
</div>

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

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

Allows you to group event The bound document is:
handlers
Trap DOM events and re‐route
p <hotspot message=\"Hello World\">
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:
g
<binding>
<handlers>
<handler event=\"click\">
alert(
event.currentTarget.getAttribute(
event currentTarget getAttribute(
'message' ));
</handler>
</handlers>
</binding>

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

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

Explicit inheritance
Implicit inheritance

client‐side web applications

Widget: client‐side Web applications for
displaying and/or updating remote data,
displaying and/or updating remote data
packaged in a way to allow a single download
and installation on a client machine or device.
d ll l h d

Widgets 1.0 addresses:
Packaging (Zip)
▪ Digital signature, Internationalization (?)
Bootstrapping
Configuration and Metadata
APIs
API
Automatic updates
Rendering, UI, accessibility
Security

Packaging format
Format: Zip (64bit?),Compression (Deflate)
Format: Zip (64bit?) Compression (Deflate)
Is it effectively specified? (eg. For longevity?)
Digital Signatures
XML Dig Sig: x.509 Certificates, tap into PKI,
As quality assurance
Internationalization
Leave it to the authors?
Make it folder based?
What about Unicode folder names?

Automatically instantiating a widget
Model(s):
Model(s)
Declarative
▪ <widget start=“/clock.svg”...>
Automatic (Fallback)
▪ Find one of index.[html|htm|xhtml|xht|xml|svg]

Filename: config.xml
Elements: Id, version, description, author (url,
Elements Id version description author (url
email), title, start, icon, license, access
(network and plugins)
k d l
Have we captured what developers want?
p p
Flexible processing model
We want robust error handling
Parsing rules
Robust error handling (not overly strict, )
R b h dli ( l i )

ECMAScript
Following Dashboard s APIs
Following Dashboard’s APIs
XMLHTTPRequest
Cross‐widget messaging
d
HTML‐5‐like model, also Yahoo!’s model
5 ,
How does Widget object relate to Window?

Not yet specified
Should be able to handle offline
Should exploit existing HTTP caching
Versioning
Number based (1.2.3.4)
( 3 4)
String based (“1.0RC2 – Build 12345”)
Comparison
Update URI

HTML, SVG, XML, CSS
How do we handle transparency? Rounded corners
and other irregular shapes? etc.

Undefined (our elephant)
What s allowed?
What’s allowed?
Eg. should we allow application execution?
No origin? Do we allow cross‐site requests?