¯¯ An Introduction
Alex Russell
(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 Passing Parameters
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
.DojoFoo em { font-weight: bold; } Using it!
Bar Questions? ¯¯