dojo in depth - infrequentlyinfrequently.org/06/ajaxexperience/dojoindepth.pdf · more in-depth...
TRANSCRIPT
![Page 2: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/2.jpg)
http://alex.dojotoolkit.org/06/AjaxExperience/DojoInDepth.pdf
![Page 3: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/3.jpg)
More In-Depth Dojo!
• Dylan Schiemann
• “Building Event Driven UIs With Dojo”
• Brad Neuberg
• “Beyond Cookies: dojo.storage”
![Page 4: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/4.jpg)
“JavaScript is not a bug that needs fixing”
![Page 5: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/5.jpg)
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
![Page 6: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/6.jpg)
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
![Page 7: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/7.jpg)
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
![Page 8: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/8.jpg)
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
![Page 9: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/9.jpg)
dojo.widget.html.FooWidget
dojo.widget.FooWidget
dojo.widget.HtmlWidget
dojo.widget.DomWidget
dojo.widget.Widget
![Page 10: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/10.jpg)
Widget Construction
create() -->satisfyPropertySets()mixInProperties()postMixInProperties()buildRendering()initialize()postInitialize()postCreate()
![Page 11: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/11.jpg)
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!
![Page 12: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/12.jpg)
Hierarchy
dojo.widget.YourWidget -->
dojo.widget.HtmlWidget -->
dojo.widget.DomWidget -->
dojo.widget.Widget
![Page 13: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/13.jpg)
HtmlWidget Construction
create() -->satisfyPropertySets()mixInProperties()postMixInProperties()buildRendering() -->buildFromTemplate()fillInTemplate()
initialize()postInitialize()postCreate()
![Page 14: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/14.jpg)
Advanced Template Features
![Page 15: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/15.jpg)
Custom Templates
<!-- widget definition --><div dojoType=”FooWidget”templatePath=”/custom.html”>...
</div>
![Page 16: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/16.jpg)
Variable Interpolation<!-- template --><div style=”color: ${textColor};”>${this.label}
</div>
// in JSd.w.defaultStrings.textColor =“blue”;
![Page 17: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/17.jpg)
Really Fast Template Development
![Page 18: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/18.jpg)
Really Fast Template Development
Use A Whole Page As A Template!
![Page 19: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/19.jpg)
<html><head><link rel=”stylesheet” href=”FooWidget.css” />
</head><body>...<div dojoAttachPoint=”domNode”>...
</div></body>
</html>
![Page 20: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/20.jpg)
Attach Point Per State<div dojoAttachPoint=”state1”>...
</div><div dojoAttachPoint=”state2”>...
</div><div dojoAttachPoint=”state3”>...
</div>
![Page 21: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/21.jpg)
dojo.widget.managerUseful Methods:
add(widget)
byType(type)
byId(id)
registerWidgetPackage()
Useful Properties:
widgets []
widgetIds []
topWidgets {}
![Page 22: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/22.jpg)
“Bend to the constraints of your environment”
![Page 23: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/23.jpg)
X-Domain I/O
![Page 24: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/24.jpg)
dojo.io.ScriptSrcIO
• Supports Yahoo-style JSON callbacks
• Supports JSON-P
• Always async
• Plugs directly into dojo.io.bind()
![Page 25: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/25.jpg)
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: { ... }
});
![Page 26: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/26.jpg)
So What?
![Page 27: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/27.jpg)
Demo: dojo.rpc.YahooService
![Page 28: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/28.jpg)
Now If Only We Could dojo.require Across
Domains...
![Page 29: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/29.jpg)
Introducing xdDojo
![Page 30: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/30.jpg)
FIXME: need to fill in xdDojo slides here
![Page 31: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/31.jpg)
Build System Magic
![Page 32: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/32.jpg)
¯¯
![Page 33: Dojo In Depth - Infrequentlyinfrequently.org/06/AjaxExperience/DojoInDepth.pdf · More In-Depth Dojo! • Dylan Schiemann • “Building Event Driven UIs With Dojo” • Brad Neuberg](https://reader034.vdocuments.us/reader034/viewer/2022042307/5ed3959aeb4711635956056d/html5/thumbnails/33.jpg)
BecauseArchitecture
Matters