Marcos Caceresmarcosscaceres@gmail.com

XBL 2.0 (15‐20mins)What does it do

Widgets ... Our definition of widgetWhat does it do..

How it works...Our definition of widgetSpec overviewIssues we want to Issues we want to discussPlease stop me to Please stop me to discuss stuff! 

XML Binding Language

What is XBL2?XBL Elements XBL Elements Binding attachment and detachment h dShadow Content

Implementations  and inheritancepEvent 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

client‐side web applications

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 

d ll l h dand installation on a client machine or device.

Widgets 1.0 addresses:Packaging (Zip)Packaging (Zip)▪ Digital signature, Internationalization (?)

BootstrappingBootstrappingConfiguration and Metadata APIAPIsAutomatic updatesRendering, UI, accessibility Security

Packaging formatFormat: Zip (64bit?) Compression (Deflate)Format: Zip (64bit?),Compression (Deflate)Is it effectively specified? (eg. For longevity?) 

Digital SignaturesDigital SignaturesXML Dig Sig: x.509 Certificates, tap into PKI, As quality assurance As quality assurance 

InternationalizationLeave it to the authors?Leave it to the authors?Make it folder based? What about Unicode folder names? What about Unicode folder names? 

Automatically instantiating a widgetModel(s)Model(s):Declarative ▪ <widget start=“/clock.svg”...>

Automatic (Fallback)▪ Find one of index.[html|htm|xhtml|xht|xml|svg]

Filename: config.xmlElements  Id  version  description  author (url  Elements: Id, version, description, author (url, email), title, start, icon, license, access 

k d l(network and plugins)Have we captured what developers want?p pFlexible processing modelWe want robust error handlingWe want robust error handling

Parsing rulesR b    h dli  (   l   i  )Robust error handling (not overly strict, )

ECMAScriptFollowing Dashboard’s APIs Following Dashboard s APIs XMLHTTPRequest

dCross‐widget messagingHTML‐5‐like model, also Yahoo!’s model5 ,

How does Widget object relate to Window? 

Not yet specifiedShould be able to handle offlineShould be able to handle offlineShould exploit existing HTTP cachingVersioningNumber based (1.2.3.4)( 3 4)String based (“1.0RC2 – Build 12345”)ComparisonComparison

Update URI

HTML, SVG, XML, CSSHow do we handle transparency? Rounded corners 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 allow cross‐site requests?