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

Like this? Share it with your network

Share

XML Binding Language 2.0

on

  • 2,019 views

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.

Statistics

Views

Total Views
2,019
Views on SlideShare
2,019
Embed Views
0

Actions

Likes
1
Downloads
28
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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