¯¯ An Introduction Alex Russell <[email protected]> Project Lead, The Dojo Toolkit http://alex.dojotoolkit.org/06/ AjaxExperience/IntroToDojo.pdf Great Apps Need Great Tools (C) 2005 Flickr user ndrwfgg What Is Dojo? Dojo Is... The Standard Library JavaScript Never Had A Set Of Layered Libraries Liberally Licensed AFL or BSD 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 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 Layers of Dojo Custom Widgets Widget System UI Utilities Event System Language Utilities Package System/Bootstrap Dojo 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 Pulling In Other Code dojo.require(”package.*”); dojo.requireIf(condition, “package.*”); dojo.requireAfterIf(condition, “package.*”); dojo.kwCompoundRequire({ browser: [”foo.bar”, “baz.*”], common: [”thud.*”] }); 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.*”); 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 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 Walkthrough: Builds and Profiles Language Utilities Custom Widgets Widget System UI Utilities Event System Language Utilities Package System/Bootstrap Dojo dojo.lang.* • Wrappers for common idioms • Not replacements for language constructs! • Functional programming APIs • Forward-compatibility shims • dojo.lang.is* The Handiest Ones • dojo.lang.forEach • dojo.lang.mixin • dojo.lang.map • dojo.lang.setTimeout • dojo.lang.declare • dojo.lang.delayThese • dojo.lang.hitch • dojo.lang.curry • dojo.lang.extend • dojo.lang.assert Event System Custom Widgets Widget System UI Utilities Event System Language Utilities Package System/Bootstrap Dojo “Like crack for web developers” 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() Sources And Targets Can Be DOM Nodes... ...Or Arrays Of Nodes dojo.event.connect( [”id1, “id2”, “id3”], “onclick”, listenerObj, “handleOnClick”); • We fix the event object! • dojo.event.connect() prevents leaks • Alternate advice types via same API • kwConnect for complex cases UI Utilities Custom Widgets Widget System UI Utilities Event System Language Utilities Package System/Bootstrap Dojo Lots of Goodies! dojo.io.* dojo.dnd.* dojo.html.* dojo.lfx.* dojo.style.* dojo.dom.* 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 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() Drag and Drop • Every drag operation involves three parties • DragSource • DragObject • DropTarget • DragSources and DropTargets have types • The drag manager handles all low-level events Drag And Drop Demo Animations and Effects 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 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); Contd. // fade out three nodes together, using // acceleration dojo.lfx.fadeOut( [”foo”, “bar”, “baz”], 300, dojo.lfx.easeInOut ).play(); The Widget System Custom Widgets Widget System UI Utilities Event System Language Utilities Package System/Bootstrap Dojo 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 Dojo Already Has Lots of Useful Widgets! Rich Text Editor Sorting Table ContentPane Google/Yahoo Maps SplitPanel Tree Tabs Dialog/Wizard Fisheye List Using Widgets <script> dojo.require(”dojo.widget.Editor2”); </script> <!-- ... --> <textarea dojoType=”Editor2”> ... </textarea> Passing Parameters <textarea dojoType=”Editor2” minHeight=”40em” relativeImageUrls=”true” toolbarAlwaysVisible=”true” htmlEditing=”true”> ... </textarea> Custom Widgets Custom Widgets Widget System UI Utilities Event System Language Utilities Package System/Bootstrap Dojo Anatomy Of A Widget src/ widget/ templates/ Foo.html Foo.css Foo.js Foo.js dojo.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” } ); Foo.html <div dojoAttachPoint=”domNode” class=”DojoFoo”> <em dojoOnClick=”hide”>Foo!!!!</em> </div> Foo.css .DojoFoo em { font-weight: bold; } Using it! <script> dojo.require(”dojo.widget.Foo”); </script> <!-- ... --> <span dojoType=”Foo”>Bar</span> Questions? ¯¯.