22
XML Binding Language

XML Binding Language 2.0

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: XML Binding Language 2.0

XML Binding Language

Page 2: XML Binding Language 2.0

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

Page 3: XML Binding Language 2.0

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

Page 4: XML Binding Language 2.0

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>

Page 5: XML Binding Language 2.0

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> 

Page 6: XML Binding Language 2.0

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. 

Page 7: XML Binding Language 2.0

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

Page 8: XML Binding Language 2.0

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

Page 9: XML Binding Language 2.0
Page 10: XML Binding Language 2.0
Page 11: XML Binding Language 2.0
Page 12: XML Binding Language 2.0

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

Page 13: XML Binding Language 2.0

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

Page 14: XML Binding Language 2.0

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

Page 15: XML Binding Language 2.0

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>

Page 16: XML Binding Language 2.0

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>

Page 17: XML Binding Language 2.0

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>

Page 18: XML Binding Language 2.0

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>

Page 19: XML Binding Language 2.0

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>

Page 20: XML Binding Language 2.0

idevent

keykey‐locationevent

phasetrusted

key locationtextprev‐valuetrusted

propagatedefault‐action

prev valuenew‐valueattr‐namedefault action

buttonclick‐count

attr nameattr‐change 

click countmodifiers

Page 21: XML Binding Language 2.0

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

Page 22: XML Binding Language 2.0

Explicit inheritance Implicit inheritanceImplicit inheritance