2. Gabe Hamilton Web Developer: Grails, Java, C#, others For the
past 10 years that has meant a lot ofjavascript. Send your dojo
questions to [email protected] 3. What is Dojo?A javascript
toolkitFor doing things like this... 4.
Demoshttp://demos.dojotoolkit.org/demos/Map data (in
mobile)http://demos.dojotoolkit.org/demos/mobileGeoCharting/demo.htmlImageshttp://demos.dojotoolkit.org/demos/cropper/demo.htmlWidgetshttp://demos.dojotoolkit.org/demos/mail
5. Demo sites Stocker http://persevere.sitepen.com/stocker.html
DataChart, data stores, events
http://demos.dojotoolkit.org/demos/mail/ Widgets: The sort of thing
we tend to use dojo for http://demos.dojotoolkit.org/demos/castle/
With a different look, Accordion widget, FishEye widget, some
content panes http://demos.dojotoolkit.org/demos/flashCards/Timers,
svg, http://sitepen.github.com/sp-dnd-demo/4-dnd.html Drag &
Drop, Title panes 6. Or if your name is Bruce LeeWhat would be a
real challenge?How could we prove that Rich Web Apps have
arrived?Well, you could build a desktop
environment...http://www.lucid-desktop.org/demo/http://localhost/lucid
7. 60 mins of Dojo Live coding start using dojo today How can you
use dojo? How dojo is organized. Dojo core - dojo Widgets- dijit
Cool stuff - dojox Datastores & Dojo Grid Resources 8. Not
covered in this talk Only summarizing what is in dojo core dijit
dojox Wont go into detail Dojo tools: builds, DOH (unit testing)
Dojo class structure and inheritance Touch of Death 9. Where is the
Dojo? http://dojotoolkit.org Or for your html page 10. dojo.js
dojo.js 47kb or use async mode aka dojo nano 3.8kb Uncompressed for
development dojo.js.uncompressed.js or download the source
http://dojotoolkit.org/download/ 11. Documentation Tutorials
http://dojotoolkit.org/documentation/ API docs
http://dojotoolkit.org/api/ Reference Guide
http://dojotoolkit.org/reference-guide/1.7/index.html 12. Live
Coding Demo 13. 2 PathsMarkupdjConfig=parseOnLoad: true
Javascriptvar tc = new
dijit.layout.TabContainer();tc.startup(); 14. Markup demo
core here
great widgets
#winning
15. Javascript
demorequire(["dijit/layout/TabContainer","dijit/layout/ContentPane",
"dojo/domReady!"],function(TabContainer, ContentPane) {var tc = new
TabContainer({ style: "height: 500px; width: 80%;" },
"iWishIWereTabbed");var c = new ContentPane({ title: "Food",
content: "We offer amazing food" });tc.addChild(c);var c2 = new
ContentPane({ title: "Drinks", content: "We have drinks."
});tc.addChild(c2);tc.startup();}); 16. About Dojo Started in 2004
as a project at Informatica Now is a 501(c)6, the Dojo Foundation
Open Source: Choice of BSD or AFL Version 1.7.2 17. Who is Dojo
Individuals: Anyone who signs a CLA can be a contributor. Including
some who work for: Mozilla, IBM, Google, Oracle, PIXAR, Redhat...
Companies can sign a company CLA for their employees whocontribute
to dojo. Dojo contains several contributed code bases:
nWidgets,Burstlib, f(m), TurboGrid, Sizzle (from jQuery).
Commercial support available from SitePen. 18. When / How to use
Dojo Rich Internet Applications Desktop style and One Page apps
Mixed Martial Arts use it alongside jQuery, YUI, etc Organize your
javascript tangle with the dojopackage system aka AMD aka
require.js 19. With JQueryThey collaborate on CSS selector
libraries that can be swapped in and out.Many jQuery projects are
hosted by the Dojo FoundationJQuery compatiblity layer: run jQuery
UI on dojo 20. With Node.jsBoth use the same CommonsJS package
management and Asynchronous Module Definitions (AMD) for
loading.Dojo can be run directly in node.js rather than in a
browser to provide GUI components.Dojo build system now uses
node.js 21. In toolkitsdojotoolkit.org/features/integrationsOther
projectsversion GWT (Tatami)1.3.2 Grails plugin 1.7.2 22. For
MinimalistsAsync modeFully asynchronous, run code when your require
statement is done loading.3.8kbJust require and defineGreat for
mobile or non dojo applications 23. Modules: Require and Define
Namespace system require issues a request for the file. Files get
cached like any http request. define(dosug.examples.jackalope);
dojo.declare(dosug.examples.jackalope, null, { // body of new
object }); dojo.registerModulePath(dosug, ../dosug); 24. Modules:
file structureFile structure matches require
statementsdojo/dijit/layout/TabContainer.jsdojox/ 25. Dojo core
Basic Browser self Defense dojo.byId array indexOf DRY Lots of
handy javascript functions isArray trim addClass 26. Dojo core
World spanning power. Itty bitty living space effects events xhr
(XmlHttpRequest) json dojo.query Browser detection 27. Dijit Widget
library Accessible, InternationalizableHigh Contrast modeGracefully
degrade in older browsersRight to Left text dijit.form dijit.layout
28. Dijit: Themes Themes:ClaroblueTundra whiteNihilomost
basicSorialight yellow and orange? All are subtle, designed to work
with existing look. Want something flashier? Easy to override,
custom themesavailable on internet. No themeroller. jQuery wins
this round. 29. Dojox I know secret-kung-fu Video / Graphics
Charting RSS Advanced Datastores and Offline storage
dojox.grid.DataGrid dojox.charting.DataChart 30. Datastores:
dojo.dataClient side object to hold dataBasically an array of
items, with lots of functionality wrapped around it.Support for
many types of dataEasiest way to start is with JSON 31. Datastores:
JSON JavaScript Object Notation var myObject = { firstName: Gabe,
lastName: Hamilton, favorite-color: blue... no, red }; var myArray
= [ myObject, {firstName: Bob}]; 32. Datastores: dojo.data.api
dojo.data.api defines basic operations Read Write Identity
Notification ItemFileReadStore implements Read and Identity
ServiceStore implements all 4 33. Datastores: dojox.data CSVStore
XMLStore ServiceStore QueryReadStore JsonRestStore AtomReadStore
ServiceStores based on public API Flickr, S3, Wikipedia, Google,
Persevere, etc... 34. dojox.data.JsonRestStore var store = new
dojox.data.JsonRestStore({ target: "/users/", idAttribute: "id" });
Put, Post, Delete, Get[ user: { name: Gabe, id: 1 }, user: { name:
Bob, id: 2 } ] 35. dojox.grid.DataGrid Demo 36. Other Resources
http://www.slideshare.net/sitepen/top-ways-
dojo-can-improve-your-mapping-app
https://www.ibm.com/developerworks/mydevelo
perworks/bookmarks/html? sort=date&tag=dojo&lang=en 37.
Resources http://dojotoolkit.org
http://dojotoolkit.org/documentation Great Examples
http://livedocs.dojotoolkit.org/
http://sitepen.com/blog/category/dojo Amazon search has 94 book
results for dojojavascript of which the top 8 were books juston
dojo. 38. AcknowlegementsThanks to the photographers of the
following Creative
Commonspictureshttp://commons.wikimedia.org/wiki/File:Zen_Dojo_Sarbacana1.jpghttp://commons.wikimedia.org/wiki/File:Demonstrating_Kung_Fu_at_Daxiangguo_Monestary,_Kaifeng,_http://commons.wikimedia.org/wiki/File:Shadow_Karate_Kick.jpghttp://commons.wikimedia.org/wiki/File:Reloading_tools.jpghttp://commons.wikimedia.org/wiki/File:Grue_migration_Lake_Agmon_Hula_Valley.JPG
39. Questions
[email protected]
