Marcos Caceres
marcosscaceres@gmail.com
XBL 2.0 (15‐20mins)   Widgets ... 
 What does it do..
 What does it do        Our definition of widget
 How it works...   ...
XML Binding Language
What is XBL2?
XBL Elements 
Binding attachment and detachment 
Shadow Content
 h d
Implementations  and inheritance
  p
Ev...
Redundant semantic free mark‐up (div 
elements, for example)
elements  for example)
Hard to add new interfaces/methods to ...
Log on Widget (minimal markup)

<form action=quot;#examplequot; method=quot;postquot; id=quot;loginWidgetquot;> 
<fieldset...
No enough structure
    Actual Markup needed for design:
<form action=quot;#examplequot; method=quot;postquot; id=quot;log...
Designers need 2x the markup to achieve a 
design
Markup needs to be polluted with 
semantically neutral div elements
    ...
DOM‐Based binding language
Used to override (or enhance) standard 
behaviour and presentation of DOM elements
Lets you: 
 ...
HTML documents
 Add accessibility, enhance behaviour and 
 Add        ibilit   h      b h i   d 
 aesthetics
Multimedia 
M...
Binding            Global Attributes
  Implementation
    p e e tat o     xbl:pseudo
                     b pseudo
  Templ...
Same as HTML script   <script>
Declare global          var c = 0; 
functions               function magic(a,b ){
Scoped to...
Allows you to define a binding:
 How it behaves  
 H  it b h
 If it extends other bindings (inheritance model will 
 be di...
Allows you to add new             <binding element=“h1”>
DOM interfaces                      <implementation>
  Define new...
Template                         <binding id=“reshuffle”>
  Contains a template of the 
                 p               <...
DIV                                   <binding extends=“reshuffle”>
  Used as a general container             <template>
 ...
Resources                       <binding>
  Structural container          <resources>
                                  es...
Allows you to group event           The bound document is:
handlers
Trap DOM events and re‐route 
   p                    ...
id               key
event            key‐location
                 key location
phase            text
trusted          pr...
Document attachment                             Binding Detachment
 Processing Instruction                          Elemen...
Explicit inheritance 
Implicit inheritance
client‐side web applications
Widget: client‐side Web applications for 
 displaying and/or updating remote data, 
 displaying and/or updating remote dat...
Widgets 1.0 addresses:
 Packaging (Zip)
 ▪ Digital signature, Internationalization (?)
 Bootstrapping
 Configuration and M...
Packaging format
 Format: Zip (64bit?),Compression (Deflate)
 Format: Zip (64bit?) Compression (Deflate)
 Is it effectivel...
Automatically instantiating a widget
Model(s):
Model(s)
 Declarative 
 ▪ <widget start=“/clock.svg”...>
 Automatic (Fallba...
Filename: config.xml
Elements: Id, version, description, author (url, 
Elements  Id  version  description  author (url  
e...
ECMAScript
Following Dashboard s APIs 
Following Dashboard’s APIs 
XMLHTTPRequest
Cross‐widget messaging
        d
 HTML‐5...
Not yet specified
Should be able to handle offline
Should exploit existing HTTP caching
Versioning
 Number based (1.2.3.4)...
HTML, SVG, XML, CSS
How do we handle transparency? Rounded corners 
and other irregular shapes? etc. 
Undefined (our elephant)
What s allowed? 
What’s allowed? 
 Eg. should we allow application execution?
 No origin? Do we a...
W3C XBL 2.0 and Widgets 1.0
W3C XBL 2.0 and Widgets 1.0
W3C XBL 2.0 and Widgets 1.0
W3C XBL 2.0 and Widgets 1.0
Upcoming SlideShare
Loading in …5
×

W3C XBL 2.0 and Widgets 1.0

1,977 views

Published on

TPAC Presentation

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,977
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
78
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

W3C XBL 2.0 and Widgets 1.0

  1. 1. Marcos Caceres marcosscaceres@gmail.com
  2. 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. 3. XML Binding Language
  4. 4. What is XBL2? XBL Elements  Binding attachment and detachment  Shadow Content h d Implementations  and inheritance p Event handlers  DOM Interfaces
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. Explicit inheritance  Implicit inheritance
  22. 22. client‐side web applications
  23. 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. 24. Widgets 1.0 addresses: Packaging (Zip) ▪ Digital signature, Internationalization (?) Bootstrapping Configuration and Metadata  APIs API Automatic updates Rendering, UI, accessibility  Security
  25. 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. 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. 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. 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. 29. Not yet specified Should be able to handle offline Should exploit existing HTTP caching Versioning Number based (1.2.3.4) ( 3 4) String based (“1.0RC2 – Build 12345”) Comparison Update URI
  30. 30. HTML, SVG, XML, CSS How do we handle transparency? Rounded corners  and other irregular shapes? etc. 
  31. 31. Undefined (our elephant) What s allowed?  What’s allowed?  Eg. should we allow application execution? No origin? Do we allow cross‐site requests?

×