ø ø - infrequently
TRANSCRIPT
![Page 1: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/1.jpg)
¯¯
![Page 3: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/3.jpg)
http://alex.dojotoolkit.org/06/AjaxExperience/IntroToDojo.pdf
![Page 4: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/4.jpg)
Great Apps Need Great Tools
(C) 2005 Flickr user ndrwfgg
![Page 5: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/5.jpg)
What Is Dojo?
![Page 6: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/6.jpg)
Dojo Is...
![Page 7: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/7.jpg)
The Standard Library JavaScript Never Had
![Page 8: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/8.jpg)
A Set Of Layered Libraries
![Page 9: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/9.jpg)
Liberally LicensedAFL or BSD
![Page 10: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/10.jpg)
The BSD License
• You don’t owe us anything
• You can use it in commercial apps
• You must include our copyright notice
• You can’t claim copyright on it
![Page 11: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/11.jpg)
The AFL License
• You don’t owe us anything
• You can use it in commercial apps
• You can sub-license the code
• You don’t have to give us credit
• You can’t sue us for patent infringement
• You can’t claim copyright on it
![Page 12: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/12.jpg)
Layers of Dojo
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
![Page 13: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/13.jpg)
Overview
• Bootstrap is mostly platform independent
• “host environment” files fill in cracks
• dojo.js includes things in the right order
• Attempts to auto-detect correct hostenv
• Package system will always be ready to run after bootstraps are loaded
![Page 14: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/14.jpg)
Pulling In Other Code
dojo.require(”package.*”);
dojo.requireIf(condition, “package.*”);
dojo.requireAfterIf(condition, “package.*”);
dojo.kwCompoundRequire({
browser: [”foo.bar”, “baz.*”],
common: [”thud.*”]
});
![Page 15: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/15.jpg)
Defining Modules
• Need to include a dojo.provide() statement
• “.*” is special
• All lookups are relative to the Dojo root
• You can define your own namespaces
dojo.setModulePrefix(”name”, “../relative/path/”);
dojo.require(”name.foo.*”);
![Page 16: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/16.jpg)
The Lookup Order
dojo.require(”dojo.foo.*”);
http://.../dojo/src/foo/__package__.js
http://.../dojo/src/foo.js
http://.../dojo/src/__package__.js
http://.../dojo/src.js
http://.../dojo/__package__.js
![Page 17: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/17.jpg)
Builds
• Builds transparently replace your source version of Dojo
<script src=”path/to/dojo.js”>
becomes
<script src=”path/to/release/dojo.js”>
• Builds combine required files in the right order
![Page 18: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/18.jpg)
Walkthrough:Builds and Profiles
![Page 19: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/19.jpg)
Language Utilities
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
![Page 20: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/20.jpg)
dojo.lang.*
• Wrappers for common idioms
• Not replacements for language constructs!
• Functional programming APIs
• Forward-compatibility shims
• dojo.lang.is*
![Page 21: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/21.jpg)
The Handiest Ones• dojo.lang.forEach
• dojo.lang.map
• dojo.lang.declare
• dojo.lang.hitch
• dojo.lang.extend
• dojo.lang.mixin
• dojo.lang.setTimeout
• dojo.lang.delayThese
• dojo.lang.curry
• dojo.lang.assert
![Page 22: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/22.jpg)
Event System
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
![Page 23: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/23.jpg)
“Like crack for web developers”
![Page 24: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/24.jpg)
Eavesdropping
• Dojo’s event system is runtime AOP
• before, after, and around advice
• Any function can be notified when any other function fires
dojo.event.connect(obj1, “func”,
obj2, “func”);
obj1.func(); // now calls obj2.func()
![Page 25: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/25.jpg)
Sources And Targets Can Be DOM Nodes...
![Page 26: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/26.jpg)
...Or Arrays Of Nodes
dojo.event.connect(
[”id1, “id2”, “id3”], “onclick”,
listenerObj, “handleOnClick”);
![Page 27: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/27.jpg)
• We fix the event object!
• dojo.event.connect() prevents leaks
• Alternate advice types via same API
• kwConnect for complex cases
![Page 28: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/28.jpg)
UI Utilities
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
![Page 29: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/29.jpg)
Lots of Goodies!
dojo.io.*
dojo.html.*
dojo.style.*
dojo.dnd.*
dojo.lfx.*
dojo.dom.*
![Page 30: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/30.jpg)
Obligatory Ajax Slide• dojo.io.bind() packs a big punch
• Handles text encodings
• Auto-encodes URL components
• Submits forms
• Sync or async
• Coerces return data
• Pluggable back-ends
![Page 31: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/31.jpg)
Other I/O Goodies
• dojo.require(”dojo.io.ScriptSrcIO”);
• Cross-domain and JSON-P
• dojo.require(”dojo.io.IframeIO”)
• Background uploads, plugs right into bind()!
• dojo.io.updateNode()
• dojo.io.encodeForm()
![Page 32: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/32.jpg)
Drag and Drop
![Page 33: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/33.jpg)
• Every drag operation involves three parties
• DragSource
• DragObject
• DropTarget
• DragSources and DropTargets have types
• The drag manager handles all low-level events
![Page 34: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/34.jpg)
Drag And Drop Demo
![Page 35: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/35.jpg)
Animations and Effects
![Page 36: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/36.jpg)
dojo.lfx.*
• New in 0.3.0
• Replaces dojo.fx.* and dojo.animation.*
• Includes many “canned” effects:
• fadeIn, fadeShow, fadeOut, fadeHide, wipeIn, wipeOut, slideTo, explode, implode, highlight, unhighlight
![Page 37: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/37.jpg)
Powerful Primitives
// wipe two elements out, one after
// the other, following a 300ms delay
var anim1 = dojo.lfx.wipeOut(”foo”, 300);
var anim2 = dojo.lfx.wipeOut(”bar”, 500);
var composed = dojo.lfx.chain(anim1, anim2);
composed.play(300);
![Page 38: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/38.jpg)
Contd.
// fade out three nodes together, using
// acceleration
dojo.lfx.fadeOut(
[”foo”, “bar”, “baz”],
300,
dojo.lfx.easeInOut
).play();
![Page 39: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/39.jpg)
The Widget System
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
![Page 40: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/40.jpg)
What’s A Widget?
• Encapsulated, reusable rendering and behavior
• HTML+CSS bound by JavaScript
• Can be built from markup
• Subclass of dojo.widget.Widget
• Usually derives from dojo.widet.HtmlWidget
![Page 41: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/41.jpg)
Dojo Already Has Lots of Useful Widgets!
Rich Text Editor
ContentPane
SplitPanel
Tabs
Fisheye List
Sorting Table
Google/Yahoo Maps
Tree
Dialog/Wizard
![Page 42: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/42.jpg)
Using Widgets
<script>
dojo.require(”dojo.widget.Editor2”);
</script>
<!-- ... -->
<textarea dojoType=”Editor2”>
...
</textarea>
![Page 43: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/43.jpg)
Passing Parameters
<textarea dojoType=”Editor2”
minHeight=”40em”
relativeImageUrls=”true”
toolbarAlwaysVisible=”true”
htmlEditing=”true”>
...
</textarea>
![Page 44: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/44.jpg)
Custom Widgets
Dojo
Widget System
Custom Widgets
UI Utilities
Event System
Language Utilities
Package System/Bootstrap
![Page 45: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/45.jpg)
Anatomy Of A Widget
src/
widget/
templates/
Foo.html
Foo.css
Foo.js
![Page 46: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/46.jpg)
Foo.jsdojo.provide(”dojo.widget.Foo”);
dojo.require(”dojo.widget.*”);
dojo.widget.defineWidget(
”dojo.widget.Foo”,
dojo.widget.HtmlWidget,
{ // widget properties
templatePath: “src/widget/templates/Foo.html”,
templateCssPath: “src/widget/templates/Foo.css”
}
);
![Page 47: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/47.jpg)
Foo.html<div dojoAttachPoint=”domNode”
class=”DojoFoo”>
<em dojoOnClick=”hide”>Foo!!!!</em>
</div>
Foo.css
.DojoFoo em {
font-weight: bold;
}
![Page 48: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/48.jpg)
Using it!
<script>
dojo.require(”dojo.widget.Foo”);
</script>
<!-- ... -->
<span dojoType=”Foo”>Bar</span>
![Page 49: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/49.jpg)
Questions?
![Page 50: ø ø - Infrequently](https://reader030.vdocuments.mx/reader030/viewer/2022020623/61f0f13354dfc44ed071fa83/html5/thumbnails/50.jpg)
¯¯