XML Binding Language 2.0
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


XML Binding Language 2.0



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

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.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

XML Binding Language 2.0 Presentation Transcript

  • 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
  • 9. 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
  • 10. 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?>
  • 11. 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
  • 12. 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>
  • 13. 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>
  • 14. 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>
  • 15. 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>
  • 16. 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>
  • 17. 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
  • 18. 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
  • 19. Explicit inheritance  Implicit inheritance