Embed Size (px)
Citation preview
http://alex.dojotoolkit.org/06/AjaxExperience/DojoInDepth.pdf
More In-Depth Dojo!
• Dylan Schiemann
• “Building Event Driven UIs With Dojo”
• Brad Neuberg
• “Beyond Cookies: dojo.storage”
“JavaScript is not a bug that needs fixing”
Advanced Dojo Topics• Widget system internals
• Cross-domain I/O
• Optimizing for deployment
• Groking the package system
• The build system
• Event system magic
• Non-browser bootstraps
• dojo.lfx
• Understanding page parsing
• Back-buttons, undo, etc.
• The Editor Widget
Where Widgets Come From
• 2-Phase parser
• First phase normalizes
• Second phase determines and builds correct widget implementations
• First pass is markup independent
• Works equally well in HTML as in SVG
Where Widgets Come From (contd.)
• Second pass uses a “tag registry” to handle task of building widgets
dojo.widget.tags[”dojo:tagname”]
• dojo.widget.createWidget()
• Short-cuts to second pass parser
• Skips extra normalization steps
Which Widget?
• The Widget system is renderer independent
• SVG, VML, and HTML all supported
• Pluggable! (Rhino+SWING anyone?)
• Implementations searched most-to-least specific
• Widget namespaces are all searched
dojo.widget.html.FooWidget
dojo.widget.FooWidget
dojo.widget.HtmlWidget
dojo.widget.DomWidget
dojo.widget.Widget
Widget Construction
create() -->satisfyPropertySets()mixInProperties()postMixInProperties()buildRendering()initialize()postInitialize()postCreate()
Building The UI
• buildRendering implemented by subclasses
• Templates implemented by DomWidget’s buildRendering
• If no template supplied, widget uses the source node
• Fast way to implement behaviors!
Hierarchy
dojo.widget.YourWidget -->
dojo.widget.HtmlWidget -->
dojo.widget.DomWidget -->
dojo.widget.Widget
HtmlWidget Construction
create() -->satisfyPropertySets()mixInProperties()postMixInProperties()buildRendering() -->buildFromTemplate()fillInTemplate()
initialize()postInitialize()postCreate()
Advanced Template Features
Custom Templates
<!-- widget definition --><div dojoType=”FooWidget”templatePath=”/custom.html”>...
</div>
Variable Interpolation<!-- template --><div style=”color: ${textColor};”>${this.label}
</div>
// in JSd.w.defaultStrings.textColor =“blue”;
Really Fast Template Development
Really Fast Template Development
Use A Whole Page As A Template!
<html><head><link rel=”stylesheet” href=”FooWidget.css” />
</head><body>...<div dojoAttachPoint=”domNode”>...
</div></body>
</html>
Attach Point Per State<div dojoAttachPoint=”state1”>...
</div><div dojoAttachPoint=”state2”>...
</div><div dojoAttachPoint=”state3”>...
</div>
dojo.widget.managerUseful Methods:
add(widget)
byType(type)
byId(id)
registerWidgetPackage()
Useful Properties:
widgets []
widgetIds []
topWidgets {}
“Bend to the constraints of your environment”
X-Domain I/O
dojo.io.ScriptSrcIO
• Supports Yahoo-style JSON callbacks
• Supports JSON-P
• Always async
• Plugs directly into dojo.io.bind()
dojo.require(”dojo.io.*”);dojo.require(”dojo.io.ScriptSrcIO”);
dojo.io.bind({url: “http://example.com/json.php”,transport: “ScriptSrcTransport”,jsonParamName: “callback”,mimetype: “text/json”,content: { ... }
});
So What?
Demo: dojo.rpc.YahooService
Now If Only We Could dojo.require Across
Domains...
Introducing xdDojo
FIXME: need to fill in xdDojo slides here
Build System Magic
¯¯
BecauseArchitecture
Matters
