Your SlideShare is downloading. ×
W3C XBL 2.0 and Widgets 1.0
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

W3C XBL 2.0 and Widgets 1.0


Published on

TPAC Presentation

TPAC Presentation

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Marcos Caceres
  • 2. XBL 2.0 (15‐20mins) Widgets ...  What does it do.. What does it do Our definition of widget How it works... Spec overview Issues we want to  discuss Please stop me to  discuss stuff! 
  • 3. XML Binding Language
  • 4. What is XBL2? XBL Elements  Binding attachment and detachment  Shadow Content h d Implementations  and inheritance p Event handlers  DOM Interfaces
  • 5. 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
  • 6. 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>
  • 7. 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> 
  • 8. 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. 
  • 9. 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
  • 10. 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
  • 11. Binding Global Attributes Implementation p e e tat o xbl:pseudo b pseudo Template ▪ For CSS pseudo selectors ▪ Content xbl:attr ▪ div ▪ For forwarding attributes ▪ Inherited Resources ▪ Prefetch ▪ Style Handlers ▪ Handler Script
  • 12. 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?>
  • 13. 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
  • 14. 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>
  • 15. Template <binding id=“reshuffle”> Contains a template of the  p <template> content to be inserted into  <content includes=“b”/> 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  element once.  <h1 id=“a”>Welcome!</h1> The resulting DOM tree  <h2 id=“b”>Marcos’  h  id “b” M ’  is called shadow content  page</h1> </div>
  • 16. DIV <binding extends=“reshuffle”> Used as a general container  <template> mechanism (like HTML div)  <div state=“idle”> Has a “state” attribute <inherited> Inherited <h1> Used to insert the content of an  no one’s homepage extended binding into another  </h1> binding.  </inherited> <div> p </template> <resources>  <style>  div[state=idle]{ color: yellow;  } </style> </ resources> </binding>
  • 17. Resources <binding> Structural container <resources> esou ces Style <style> Styles applied to a binding y pp g button:active{  Author sheet styles can  border: solid red; also be applied to a  background: url(fancy.png); binding bi di } Prefetch </style> Primes the cache <prefetch src=“fancy.png”/> f h “f ”/ </resources> </binding>
  • 18. 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: g <binding>  <handlers>  <handler event=quot;clickquot;> alert( event.currentTarget.getAttribute( event currentTarget getAttribute( 'message' ));  </handler>  </handlers>  </binding>
  • 19. 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
  • 20. Document attachment Binding Detachment Processing Instruction Element.removeBinding(URI) ▪ <?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
  • 21. Explicit inheritance  Implicit inheritance
  • 22. client‐side web applications
  • 23. Widget: client‐side Web applications for  displaying and/or updating remote data,  displaying and/or updating remote data   packaged in a way to allow a single download  and installation on a client machine or device. d ll l h d
  • 24. Widgets 1.0 addresses: Packaging (Zip) ▪ Digital signature, Internationalization (?) Bootstrapping Configuration and Metadata  APIs API Automatic updates Rendering, UI, accessibility  Security
  • 25. Packaging format Format: Zip (64bit?),Compression (Deflate) Format: Zip (64bit?) Compression (Deflate) Is it effectively specified? (eg. For longevity?)  Digital Signatures XML Dig Sig: x.509 Certificates, tap into PKI,  As quality assurance  Internationalization Leave it to the authors? Make it folder based?  What about Unicode folder names? 
  • 26. Automatically instantiating a widget Model(s): Model(s) Declarative  ▪ <widget start=“/clock.svg”...> Automatic (Fallback) ▪ Find one of index.[html|htm|xhtml|xht|xml|svg]
  • 27. Filename: config.xml Elements: Id, version, description, author (url,  Elements  Id  version  description  author (url   email), title, start, icon, license, access  (network and plugins) k d l Have we captured what developers want? p p Flexible processing model We want robust error handling Parsing rules Robust error handling (not overly strict, ) R b    h dli  (   l   i  )
  • 28. ECMAScript Following Dashboard s APIs  Following Dashboard’s APIs  XMLHTTPRequest Cross‐widget messaging d HTML‐5‐like model, also Yahoo!’s model 5 , How does Widget object relate to Window? 
  • 29. Not yet specified Should be able to handle offline Should exploit existing HTTP caching Versioning Number based ( ( 3 4) String based (“1.0RC2 – Build 12345”) Comparison Update URI
  • 30. HTML, SVG, XML, CSS How do we handle transparency? Rounded corners  and other irregular shapes? etc. 
  • 31. Undefined (our elephant) What s allowed?  What’s allowed?  Eg. should we allow application execution? No origin? Do we allow cross‐site requests?