Dojo: Getting Started Today

4,816 views

Published on

Introduction to the Dojo Javascript Toolkit, http://dojotoolkit.org.
Originally presented at the Denver Open Source User's Group, http://www.denveropensource.org

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • You may also like my Dojo 1.4 update http://www.slideshare.net/matthewmccullough/new-features-in-dojo-14
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,816
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
133
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Dojo: Getting Started Today

  1. 1. Dojo: Getting Started Today Gabe Hamilton
  2. 2. Gabe Hamilton <ul><li>Web Developer: C#, Java
  3. 3. Never really liked javascript.
  4. 4. But I like dojo.
  5. 5. Send your dojo questions to
  6. 6. [email_address] </li></ul>
  7. 7. What is Dojo? <ul><li>A javascript toolkit
  8. 8. For doing things like this... </li></ul>
  9. 9. 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://www.sitepen.com/labs/code/dnd/intro/dnd/5-dnd.html Drag & Drop, Title panes
  10. 10. 60 mins of Dojo <ul><li>Live coding – start using dojo today
  11. 11. How can you use dojo?
  12. 12. How dojo is organized. </li><ul><li>Dojo core - dojo
  13. 13. Widgets - dijit
  14. 14. Cool stuff - dojox </li></ul><li>Datastores & Dojo Grid
  15. 15. Resources </li></ul>
  16. 16. Not covered in this talk <ul><li>Only summarizing what is in </li><ul><li>dojo core
  17. 17. dijit
  18. 18. dojox </li></ul><li>Won't go into detail
  19. 19. Dojo tools: shrinksafe, DOH (unit testing)
  20. 20. Dojo inheritance features
  21. 21. Touch of Death </li></ul>
  22. 22. Where is the Dojo? <ul><li>http://dojotoolkit.org
  23. 23. http://o.aolcdn.com/ dojo/1.3/dojo/dojo.xd.js
  24. 24. http://ajax.googleapis.com/ajax/libs/ dojo/1.3/dojo/dojo.xd.js </li></ul>
  25. 25. dojo.js <ul><li>dojo.js, shrunk, 79KB
  26. 26. or gzipped, only 28K
  27. 27. Uncompressed for development
  28. 28. dojo.xd.js.uncompressed.js
  29. 29. or download the source
  30. 30. http://download.dojotoolkit.org/release-1.3.2/ </li></ul>
  31. 31. Documentation <ul><li>http://api.dojotoolkit.org
  32. 32. http://docs.dojocampus.org </li></ul>
  33. 34. 2 Paths <ul><li>Markup
  34. 35. djConfig=”parseOnLoad: true”
  35. 36. <div dojoType=”dijit.layout.TabContainer”/>
  36. 37. Javascript
  37. 38. var tc = new dijit.layout.TabContainer();
  38. 39. tc.startup(); </li></ul>
  39. 40. Markup demo <div dojoType=&quot;dijit.layout.TabContainer&quot; style=&quot;width:80%; height: 500px&quot;> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Mojo&quot;>mojo here</div> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Pojo&quot;> get, set, is</div> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;dosug&quot;>presents</div> </div>
  40. 41. Javascript demo var tc = new dijit.layout.TabContainer({ style: &quot;height: 500px; width: 80%;&quot; }, &quot;stuff&quot;); var c = new dijit.layout.ContentPane({ title: &quot;Food&quot;, content: &quot;We offer amazing food&quot; }); tc.addChild(c); var c2 = new dijit.layout.ContentPane({ title: &quot;Drinks&quot;, content: &quot;We have drinks.&quot; }); tc.addChild(c2); tc.startup();
  41. 42. About Dojo <ul><li>Started in 2004 as a project at Informatica
  42. 43. Now is a 501(c)6, the Dojo Foundation
  43. 44. Download page gets ½ million visits per year
  44. 45. Open Source: Choice of BSD or AFL
  45. 46. Version 1.3.2 </li></ul>
  46. 47. Who is Dojo Individuals: Anyone who signs a CLA can be a contributor. Including some who work for: Aol, IBM, Google, BEA, PIXAR, Redhat, Sun... Companies can sign a CLA and pay for their employees to work on dojo. Dojo contains several contributed code bases: nWidgets, Burstlib, f(m), TurboGrid. Commercial support available from SitePen.
  47. 48. When/How to use Dojo <ul><li>Basic Self Defense </li><ul><li>get rid of bugs from browser differences </li></ul><li>Mixed Martial Arts </li><ul><li>use it alongside jQuery, YUI, etc </li></ul><li>Organize your javascript tangle with the dojo package system. </li></ul>
  48. 49. In toolkits Project Dojo version jMaki 1.2 GWT (Tatami) 1.2.3 Struts 2 Grails plugin 1.3.0
  49. 50. Organization <ul><li>dojo (core)
  50. 51. dijit (widgits)
  51. 52. dojox (experimental & new) </li></ul>
  52. 53. Modules: Require and Provide <ul><li>Namespace system
  53. 54. dojo.require issues a request for the file. Files get cached like any http request.
  54. 55. dojo.provide(“dosug.examples.jackalope”);
  55. 56. dojo.declare(“dosug.examples.jackalope”, null, { </li><ul><li>// body of new object
  56. 57. }); </li></ul><li>dojo.registerModulePath(“dosug”, “../dosug”); </li></ul>
  57. 58. Modules: file structure <ul><li>File structure matches require statements
  58. 59. dojo/
  59. 60. dijit/
  60. 61. layout/
  61. 62. TabContainer.js
  62. 63. dojox/ </li></ul>
  63. 64. Dojo core <ul><li>Basic Browser self Defense </li><ul><li>dojo.byId
  64. 65. array indexOf </li></ul><li>DRY Lots of handy javascript functions </li><ul><li>isArray
  65. 66. trim
  66. 67. addClass </li></ul></ul>
  67. 68. Dojo core <ul>World spanning power. Itty bitty living space <li>effects
  68. 69. events
  69. 70. xhr (XmlHttpRequest)
  70. 71. json
  71. 72. dojo.query
  72. 73. Browser detection </li></ul>
  73. 74. Dijit <ul><li>Widget library
  74. 75. Accessible, Internationalizable </li><ul><li>High Contrast mode
  75. 76. Gracefully degrade in older browsers
  76. 77. Right to Left text </li></ul><li>dijit.form
  77. 78. dijit.layout </li></ul>
  78. 79. Dijit: Themes <ul><li>3 Themes: </li><ul><li>Tundra white & blue
  79. 80. Nihilo most basic
  80. 81. Soria light yellow and orange </li></ul><li>All are subtle, designed to drop in next to your existing work.
  81. 82. Want something flashier? Easy to override, custom themes available on internet. </li></ul>
  82. 83. Dojox <ul><li>“I know secret-kung-fu” </li><ul><li>Video / Graphics
  83. 84. Charting
  84. 85. RSS
  85. 86. Advanced Datastores and Offline storage </li></ul><li>dojox.grid.DataGrid
  86. 87. dojox.charting.DataChart </li></ul>
  87. 88. Datastores: dojo.data <ul><li>Client side object to hold data </li><ul><li>Basically an array of items, with lots of functionality wrapped around it. </li></ul><li>Support for many types of data </li><ul><li>Easiest way to start is with JSON </li></ul></ul>
  88. 89. Datastores: JSON <ul><li>JavaScript Object Notation
  89. 90. var myObject = { </li><ul><li>firstName: 'Gabe',
  90. 91. lastName: 'Hamilton',
  91. 92. favorite-color: 'blue... no, red' }; </li></ul><li>var myArray = </li><ul><li>[ myObject, {firstName: 'Bob'}]; </li></ul></ul>
  92. 93. Datastores: dojo.data.api <ul><li>dojo.data.api defines basic operations
  93. 94. Read
  94. 95. Write
  95. 96. Identity
  96. 97. Notification
  97. 98. ItemFileReadStore implements Read and Identity
  98. 99. ServiceStore implements all 4 </li></ul>
  99. 100. Datastores: dojo x .data <ul><li>CSVStore
  100. 101. XMLStore
  101. 102. ServiceStore </li><ul><li>QueryReadStore
  102. 103. JsonRestStore
  103. 104. AtomReadStore </li></ul><li>ServiceStores based on public API </li><ul><li>Flickr, S3, Wikipedia, Google, Persevere, etc... </li></ul></ul>
  104. 105. dojox.data.JsonRestStore <ul>var store = new dojox.data.JsonRestStore({ <ul>target: &quot;/users/&quot;, idAttribute: &quot;id&quot; </ul>}); <li>Put, Post, Delete, Get
  105. 106. [ user: { name: Gabe, id: 1 },
  106. 107. user: { name: Bob, id: 2 } ] </li></ul>
  107. 108. dojox.grid.DataGrid Demo
  108. 109. Demo pages <ul><li>http://www.sitepen.com/labs/code/grid/new_grid_features/column_hiding_context_markup.html
  109. 110. https://user.sitepen.com/~mwilcox/dojotoolkit/dojox/charting/tests/test_DataChart.html </li></ul>
  110. 111. Resources <ul><li>http://dojotoolkit.org
  111. 112. http://api.dojotoolkit.org
  112. 113. Great Examples </li><ul><li>http://docs.dojocampus.org
  113. 114. http://sitepen.com/blog/category/dojo </li></ul><li>Amazon search has 94 book results of which the top 8 were books just on dojo. </li></ul>
  114. 115. Acknowlegements <ul>Thanks to the photographers of the following Creative Commons pictures http://commons.wikimedia.org/wiki/File:Zen_Dojo_Sarbacana1.jpg http://commons.wikimedia.org/wiki/File:Demonstrating_Kung_Fu_at_Daxiangguo_Monestary,_Kaifeng,_Henan.JPG http://commons.wikimedia.org/wiki/File:Shadow_Karate_Kick.jpg http://commons.wikimedia.org/wiki/File:Reloading_tools.jpg http://commons.wikimedia.org/wiki/File:Grue_migration_Lake_Agmon_Hula_Valley.JPG </ul>
  115. 116. Questions <ul>[email_address] </ul>

×