XML Binding Language 2.0
-
Upload
marcos-caceres -
Category
Technology
-
view
1.100 -
download
0
description
Transcript of XML Binding Language 2.0
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