XML Binding Language

This talk describes the XBL 2.0 Specification:htt // /TR/ bl/http://www.w3.org/TR/xbl/

What is XBL2?XBL Elements Binding attachment and detachment gShadow ContentImplementations  and inheritanceImplementations  and inheritanceEvent handlers DOM InterfacesDOM Interfaces

Redundant semantic free mark‐up (div elements  for example)elements, for example)Hard to add new interfaces/methods to lelements

Hard to capture events, particularly modified p p ykey eventsHard to move content in a document, 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 structureActual 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 designdesignMarkup needs to be polluted with 

ll l d lsemantically neutral div elementsXBL can fix this... And make the whole thing gbetter to use. 

DOM‐Based binding languageUsed to override (or enhance) standard Used to override (or enhance) standard behaviour and presentation of DOM elementsLets you: yAdd/move/replace/restyle contentAdd DOM interfaces to elementsAdd DOM interfaces to elementsAdd new stylesAdd event listenersAdd event listenersPreload media

No implementations yetNo implementations yet

HTML documentsAdd  ibilit   h  b h i   d Add accessibility, enhance behaviour and aesthetics

M l i di  Multimedia Add functionality Bring elements to life

BindingImplementation

Global Attributesxbl:pseudop e e tat o

Template▪ Content

b pseudo▪ For CSS pseudo selectors

xbl:attr▪ div▪ Inherited

Resources

▪ For forwarding attributes

Resources▪ Prefetch▪ Style

Handlers▪ Handler

ScriptScript

Same as HTML scriptDeclare global 

<script>var c = 0; Declare global 

functionsScoped to the XBL 

var c = 0; function magic(a,b ){

return a + b * c; Scoped to the XBL document

return a + b   c; }</script?></script?>

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

Allows you to add new DOM interfaces

<binding element=“h1”><implementation>

Define new functionality for an objectDefine event handlers

({this.makeRed() =function(){}  

Define properties and fields}, this.onclick(e) = function{this.makeRed();

}})</implementation>/implementation

</binding>...<h1><h1>

TemplateContains a template of the 

<binding id=“reshuffle”><template>p

content to be inserted into a document

Content

<content includes=“b”/><content includes=“a”/></template>Content

Inserts the “selected” content of a bound l t

</template></binding>....

elementYou can only use a selected element once. 

<div id=“homepage”><h1 id=“a”>Welcome!</h1>h  id “b” M ’ The resulting DOM tree 

is called shadow content <h2 id=“b”>Marcos’ 

page</h1></div></div>

DIVUsed as a general container mechanism (like HTML div) 

<binding extends=“reshuffle”><template><div state=“idle”>

Has a “state” attributeInherited

Used to insert the content of an extended binding into another 

<inherited><h1>no one’s homepage</h1>extended binding into another 

binding. </h1></inherited>

<div></template>p

<resources> <style> div[state=idle]{

color: yellow; color: yellow; }</style>

</ resources></binding>

ResourcesStructural container

<binding><resources>Structural container

StyleStyles applied to a binding

esou ces<style>button:active{ y pp g

Author sheet styles can also be applied to a bi di

border: solid red;background: url(fancy.png);

bindingPrefetch

Primes the cache

}</style>

f h “f ”/Primes the cache <prefetch src=“fancy.png”/></resources></binding></binding>

Allows you to group event handlersTrap DOM events and re‐route 

The bound document is:

<hotspot message="Hello World"> pthem to functions defined in the <implementation>Fine‐grained control over keyboard and mouse events

p g<instruction> Activate this text. </instruction></hotspot> keyboard and mouse events </hotspot> 

The binding is:<binding> g<handlers> <handler event="click">alert(event currentTarget getAttribute(event.currentTarget.getAttribute('message' )); </handler> </handlers> </binding>

idevent

keykey‐locationevent

phasetrusted

key locationtextprev‐valuetrusted

propagatedefault‐action

prev valuenew‐valueattr‐namedefault action

buttonclick‐count

attr nameattr‐change 

click countmodifiers

Document attachmentProcessing Instruction

Binding DetachmentElement.removeBinding(URI)Processing Instruction

▪ <?xbl href="foo.xml"?>

New DOM interface

Element.removeBinding(URI)

New DOM interface▪ document.loadBindingDocument('foo.xml');

Element AttachmentElement AttachmentCSS▪ ‐xbl‐binding: url("foo.xml")g ( )

Binding element▪ <binding element="#x">g

Explicit inheritance Implicit inheritanceImplicit inheritance