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

1. Dojo: Getting Started Today Gabe Hamilton

3. Never really liked javascript.

4. But I like dojo.

5. Send your dojo questions to

6. [email_address]

8. For doing things like this...

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

11. How can you use dojo?

13. Widgets - dijit

15. Resources

17. dijit

19. Dojo tools: shrinksafe, DOH (unit testing)

20. Dojo inheritance features

21. Touch of Death

23. http://o.aolcdn.com/ dojo/1.3/dojo/dojo.xd.js

24. http://ajax.googleapis.com/ajax/libs/ dojo/1.3/dojo/dojo.xd.js

26. or gzipped, only 28K

27. Uncompressed for development

28. dojo.xd.js.uncompressed.js

29. or download the source

30. http://download.dojotoolkit.org/release-1.3.2/

32. http://docs.dojocampus.org

35. djConfig=”parseOnLoad: true”

36. <div dojoType=”dijit.layout.TabContainer”/>

37. Javascript

38. var tc = new dijit.layout.TabContainer();

39. tc.startup();

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>

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();

43. Now is a 501(c)6, the Dojo Foundation

44. Download page gets ½ million visits per year

45. Open Source: Choice of BSD or AFL

46. Version 1.3.2

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.

49. In toolkits Project Dojo version jMaki 1.2 GWT (Tatami) 1.2.3 Struts 2 Grails plugin 1.3.0

51. dijit (widgits)

52. dojox (experimental & new)

54. dojo.require issues a request for the file. Files get cached like any http request.

55. dojo.provide(“dosug.examples.jackalope”);

59. dojo/

60. dijit/

61. layout/

62. TabContainer.js

63. dojox/

66. trim

67. addClass

69. events

70. xhr (XmlHttpRequest)

71. json

72. dojo.query

73. Browser detection

76. Gracefully degrade in older browsers

78. dijit.layout

80. Nihilo most basic

82. Want something flashier? Easy to override, custom themes available on internet.

84. Charting

85. RSS

87. dojox.charting.DataChart

91. lastName: 'Hamilton',

94. Read

95. Write

96. Identity

97. Notification

98. ItemFileReadStore implements Read and Identity

99. ServiceStore implements all 4

101. XMLStore

103. JsonRestStore

106. [ user: { name: Gabe, id: 1 },

107. user: { name: Bob, id: 2 } ]

108. dojox.grid.DataGrid Demo

110. https://user.sitepen.com/~mwilcox/dojotoolkit/dojox/charting/tests/test_DataChart.html

112. http://api.dojotoolkit.org