Más contenido relacionado
La actualidad más candente (20)
Similar a Zero To Dojo (20)
Zero To Dojo
- 5. Notes about Dojo
Long Standing Development
Large, Active Developer Base
Friendly Professional Community
Liberally Licensed, Clean IP
© SitePen, Inc. 2008. All Rights Reserved
- 6. Notes about Dojo
Comprised of Base, Core,
Dijit, and DojoX
Uni ed Tools and
Components
Extras: ShrinkSafe, Build
Utils
D.O.H.
© SitePen, Inc. 2008. All Rights Reserved
- 8. Using Dojo Base
<html>
<head>
<title>Hello, Dojo</title>
<!-- load Dojo from a CDN: -->
<script type=quot;text/javascriptquot;
src=quot;http://o.aolcdn.com/dojo/1.2/dojo/dojo.xd.jsquot;>
</script>
</head>
<body>
</body>
</html>
© SitePen, Inc. 2008. All Rights Reserved
- 9. Aka: dojo.js (26KB of Joy)
Ajax: dojo.xhr, dojo.xhrGet, dojo.xhrPost ...
Events: normalization, keys, Objects or Nodes
DOM/CSS: dojo.byId, dojo.style, dojo.place, dojo.attr
Animation: dojo.fadeIn/Out, dojo.animateProperty
Query/NodeList: CSS3 Selectors. aka: All of the Above
Advanced JS: dojo.delegate, .hitch, .partial, .exists ...
dojo.declare
Native JS: forEach, map, lter, some, every, indexOf ...
Browser Sni ng: dojo.isIE < 7, isFF, isWebKit ...
© SitePen, Inc. 2008. All Rights Reserved
- 10. Patterns in Dojo
// style and add class to a node:
dojo.addClass(“someNode”, “someClass”);
dojo.style(“someNode”, { opacity:0.5, lineHeight:”1.3em” });
dojo.attr(“someNode”, { id:”newId” });
// or chained
dojo.query(“#someNode”)
.addClass(“someClass”)
.attr({ id:”newId” })
.style({ opacity:0.5, lineHeight:”1.3em” })
// connect:
dojo.connect(dojo.byId(“foo”), “onclick”, function(e){...});
// or connect:
dojo.query(“#foo”).connect(“onclick”, function(e){ ... });
// or sugar:
dojo.query(“#foo”).onclick(function(e){ ... });
© SitePen, Inc. 2008. All Rights Reserved
- 11. Simple OO, Simulated Inheritance
dojo.declare(“some.Person”, null, {
name: ”default”,
constructor: function(args){
dojo.mixin(this, args);
}
});
dojo.declare(“some.Employee”, some.Person, {
employeeId: 0
});
var bob = new some.Person({ name:”Bob Bobson” });
var joy = new some.Employee({ name:”Joy”, employeeId:24 });
© SitePen, Inc. 2008. All Rights Reserved
- 12. Package System == modular code
And more... Works with Dojo and custom code
Local:
dojo.require(“dojo.io.script”);
dojo.require(“my.Widget”);
Robust:
dojo.registerModulePath(“external”, “/external/js”);
dojo.require(“external.Thinger”);
Easy:
dojo.provide(“my.Widget”);
Ready: dojo.addOnLoad, .addOnUnLoad ...
© SitePen, Inc. 2008. All Rights Reserved
- 13. The Core
© SitePen, Inc. 2008. All Rights Reserved
- 14. More Patterns
Use at will - everything additive.
No dependency tracking - just dojo.require(“it”)
Few, if any, “rules”
Scale: Grows to t your needs
© SitePen, Inc. 2008. All Rights Reserved
- 15. Added Joy - a require() away
dojo.data - Uni ed Data API
dojo.dnd - Drag and Drop API
dojo.fx / dojo.NodeList-fx - Additional Advanced FX
dojo.i18n - Internationalization tools
dojo.string, dojo.date, dojo.regexp - Common utility
dojo.io.iframe, dojo.io.script, dojo.rpc - Advanced IO
... more: dojo.behavior, dojo.html, dojo.gears,
dojo.cookie, dojo.parser, dojo.jaxer ...
© SitePen, Inc. 2008. All Rights Reserved
- 16. Additional Debugging
FireBug Lite Shipped
console.* provided in less
sane browsers
Load with djCon g =
{ isDebug:true }
if(dojo.con g.isDebug){ .. }
© SitePen, Inc. 2008. All Rights Reserved
- 18. Take Your Pick
Compartmentalized Behavior using Existing Markup
Fully dynamic, reusable Templated components
Extend existing or Create ...
© SitePen, Inc. 2008. All Rights Reserved
- 19. Includes Suite of Widgets
Layouts - Accordions, Tabs
Form - Validation and
more ...
WYSIWYG Editor
Tree, Sliders, ProgressBar ...
© SitePen, Inc. 2008. All Rights Reserved
- 20. Setup is Easy
<html>
<head>
<title>index.html</title>
<!-- some css -->
<link rel=”stylesheet”
href=”dojotoolkit/dijit/themes/tundra/tundra.css”>
<script type=quot;text/javascriptquot;
src=quot;dojotoolkit/dojo/dojo.jsquot;></script>
</head>
<body class=”tundra”>
</body>
</html>
© SitePen, Inc. 2008. All Rights Reserved
- 21. Flexible Instantiation
// load the resource:
dojo.require(“dijit.dijit”); // Base Dijit
dojo.require(“dijit.Dialog”); // Dialog Code
// create programatically:
var myDialog = new dijit.Dialog({
title:”Login”
}, “formArea”);
<!-- or declaratively in markup -->
<div id=”formArea” dojoType=”dijit.Dialog” title=”Login”>
<p>...</p>
</div>
// access the instance:
dijit.byId(“formArea”).show(); // myDialog.show();
© SitePen, Inc. 2008. All Rights Reserved
- 22. CSS Driven Skinning
Three full themes:
Tundra
Soria
Nihilo
Fully customizable
Even easier with
constraints:
Embedded WebKit ?
© SitePen, Inc. 2008. All Rights Reserved
- 24. Full Accessibility (a11y) Support
Screen reader support
High contrast mode support
Keyboard navigation
... with every Dijit
© SitePen, Inc. 2008. All Rights Reserved
- 25. Custom Widgets
dojo.provide(“my.Widget”);
dojo.require(“dijit._Widget”);
dojo.require(“dijit._Templated”);
// define:
dojo.declare(“my.Widget”, [dijit._Widget, dijit._Templated], {
value:”default”,
templatePath: dojo.moduleUrl(“my.templates”, “Widget.html”,
postCreate: function(args){
// init code
}
});
// instantiate:
new my.Widget({ value:”bar” }, “someNode”);
// declarative way:
<input id=”someNode” dojoType=”my.Widget” value=”Foo”>
© SitePen, Inc. 2008. All Rights Reserved
- 26. Custom Extensions
Leverage the Dijit widget
system for speci c purposes
Reuse Existing a11y and i18n
code in Dijit
© SitePen, Inc. 2008. All Rights Reserved
- 27. Custom Widgets: Subclassing
dojo.require(“dijit.Dialog”);
// “subclassing”:
dojo.declare(“my.Dialog”, dijit.Dialog, {
canShow: true,
show: function(){
if(this.canShow){
// then call inherited:
this.inherited(arguments);
}
}
});
var showable = new my.Dialog({ canShow: false });
© SitePen, Inc. 2008. All Rights Reserved
- 28. Ultra Rapid Prototyping
<div id=”foo” dojoType=”dijit.Dialog” title=”Hello”>
<p> ... </p>
<script type=”dojo/method” event=”hide”>
// override instance’s hide() method ... test.
</script>
<script type=”dojo/connect” event=”show”>
// monitor instance’s show() method ...
</script>
</div>
© SitePen, Inc. 2008. All Rights Reserved
- 29. Helping Designers
/* Convenience Rules added to <html> element */
.mybox {
width:250px;
}
/* love the quirks: */
.dj_ie6 .mybox {
margin-right:1px
}
.dj_ie7 .mybox {
margin-right:2px;
}
.dj_quirks .mybox {
margin:3px;
}
© SitePen, Inc. 2008. All Rights Reserved
- 31. Extensions, Extras, Experiments
Extend Dijit:
dojox.widget, dojox.layout, dojox.form
Additional FX: dojox.fx
Morph, Text, Extras ...
Image Gadgets:
FlickrBadge, Lightbox (Nano), SlideShow ...
Comet: dojox.cometd
Advanced IO:
RPC, REST, SMD, ScriptFrame ...
© SitePen, Inc. 2008. All Rights Reserved
- 32. ... there’s more: DojoX GFX
Cross-browser vector graphics
GFX API, Charting: 2d / 3d, GFX Animation
© SitePen, Inc. 2008. All Rights Reserved
- 33. DojoX: DataGrid
Fully dojo.data-Ready
Lazy Row Selection,Virtual Scrolling
Simplified Use: Layout Ready, Easy instantiation
© SitePen, Inc. 2008. All Rights Reserved
- 34. dojox.data Stores
AndOrReadStore GoogleSearchStore
AppStore HtmlStore
AtomReadStore jsonPathStore
CouchDBRestStore jsonRestStore
CssRuleStore OpmlStore
CsvStore QueryReadStore
FileStore ServiceStore
FlickrRestStore / S3Store
FlickrStore WikipediaStore
GoogleFeedStore XmlStore
© SitePen, Inc. 2008. All Rights Reserved
- 35. Other Goodies
dojox.av - Audio / Video helpers
dojox.dtl - django templating system implementation
dojox.o , dojox.storage - O ine helpers
dojox.lang - Advanced JS techniques
dojox.xmpp - Full protocol implementation
dojox.validate - Regexps + Functions
... much, much more!
© SitePen, Inc. 2008. All Rights Reserved
- 36. Simple Gems: Google Analytics
Why Write This?
<script type=quot;text/javascriptquot;>
var gaJsHost = ((quot;https:quot; == document.location.protocol) ?
quot;https://ssl.quot; : quot;http://www.quot;);
document.write(unescape(quot;%3Cscript src='quot; + gaJsHost + quot;google-
analytics.com/ga.js' type='text/javascript'%3E%3C/script%3Equot;));
</script>
<script type=quot;text/javascriptquot;>
var pageTracker = _gat._getTracker(quot;UA-xxxxxx-xquot;);
pageTracker._trackPageview();
</script>
© SitePen, Inc. 2008. All Rights Reserved
- 37. Simple Gems: Google Analytics with Dojo
Just Write This:
// load the resource
dojo.require(“dojox.analytics.Urchin”);
<!-- and create in markup -->
<div dojoType=”dojox.analytics.Urchin”
acct=”12345-UA-23”></div>
// or in script:
new dojox.analytics.Urchin({ acct:”UA-xxxxx-x” });
© SitePen, Inc. 2008. All Rights Reserved
- 39. Dojo Build System
Reduce number of HTTP requests
Template Interning and resource concatenation
Reduce JavaScript le size:
Remove Comments and whitespace
Variable obfuscation (ShrinkSafe)
CSS Optimization
Comment Removal
@import “...” concatenation
StripConsole options
© SitePen, Inc. 2008. All Rights Reserved
- 40. Advanced Builds
Stubs Dojo (6k dojo.js)
Custom Base
“Layers”
Automatic dependency tracking
Cross-dependent layers
RestoreRequire
X-Domain Dojo - Local CDN
BuildExclude syntax
© SitePen, Inc. 2008. All Rights Reserved
- 41. D.O.H - Unit test Suite
Supports Build Up, Tear Down, sync or async Testing
doh.robot - Automated UI Unit testing
© SitePen, Inc. 2008. All Rights Reserved
- 43. Basic Documentation
Full API Docs:
http://api.dojotoolkit.org
Full On-Line Docs:
http://docs.dojocampus.org
O ine Docs:
http://sitepen.com/labs/toolbox
Tutorials, Blogs, Examples:
http://dojocampus.org
© SitePen, Inc. 2008. All Rights Reserved