Upload
marcos-caceres
View
1.807
Download
3
Tags:
Embed Size (px)
DESCRIPTION
TPAC Presentation
Citation preview
Marcos [email protected]
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?