Richard Paul
Kiwiplan NZ Ltd
 17 Feb 2009
Dojo Tookit
http://dojotoolkit.org/



The Dojo Toolkit is an open source modular JavaScript library
[...] designed to eas...
dojo.query

Returns nodes which match the given CSS3 selector,
searching the entire document by default but optionally tak...
dojo.NodeList
dojo.NodeList is as subclass of Array which adds syntactic
sugar for chaining, common iteration operations, ...
dojo.NodeList-fx
Fancy animations for your nodelist


// Include the NodeList animation package
dojo.require(quot;dojo.Nod...
Declaring Classes
Creating your own classes in Dojo


dojo.declare('className', superClass, property map)
dojo.declare('Lo...
dojo.connect

Allows function to be trigger when event occur.

// Call logger.clear() when terminal.load() is called
dojo....
dojo.behavior
Unobtrusive javascript (note the US spelling)


dojo.behavior.add({
   '#snippetList a': {
      'onclick': ...
Dojo Topics
dojo.publish, dojo.subscribe


Anonymous communication is available in Dojo via topics.

// Set up subsciber
d...
dojo.xhrGet
Simple AJAX calls


dojo.xhrGet({
   url: 'service/sessions/1',
   load: function(data) {
     logger.log(data...
dojo.xhrPost
Posting data using Dojo


dojo.xhrPost({
   url: 'service/addSession',
   content: {
      name: 'Groovy',
  ...
dojo.xhrPost form submission
Posting a form using xhrPost


dojo.xhrPost({
   url: 'service/addSession',
   form: 'formId'...
Dijit
Widgets for Dojo

Dojo provides a wide range of widgets including:
   Layout widgets (tabs, accordion, content pane,...
Creating tabs
Using dijit.layout.TabContainer


<html>
 ...
 <div id=quot;tabsquot;>
   <div id=quot;Runquot;>...</div>
  ...
Widgets from code

dojo.require(quot;dijit.layout.TabContainerquot;);
dojo.require(quot;dijit.layout.ContentPanequot;);
do...
Widgets from markup

<div id=quot;parseMequot;>
  <div id=quot;tabsquot; dojoType=quot;dijit.layout.TabContainerquot;>
   ...
Validated forms
<input id=quot;newSessionStartDatequot; name=quot;startDatequot; type=quot;textquot;
    dojoType=quot;dij...
DojoX
quot;The future, todayquot;



Includes new and innovative code that isn't deemed stable
enough for dojo or dijit.

...
Charting
Browser independent support for vector graphics.
    IE = VML
    Firefox, Safari, Opera = SVG
Provides an abstra...
Grid
Grid/table widget that has support for editing, sorting and
continuous scrolling.




http://dojocampus.org/explorer/...
Including Dojo in your web page

AOL CDN
<script type=quot;text/javascriptquot; src=quot;http://o.aolcdn.com/dojo/1.
2.3/d...
Using Dijit Themes

To have dijits show up correctly you need to include the CSS file for the
theme. Either from a CDN or ...
Dojo Web Performance




Each dojo.require() pulls in files one by one causing a slow client.
Baking a Profile
Dojo supports layers, where additional functionality can be baked into
a single javascript file to be ser...
Useful links/feeds

  http://www.dojotoolkit.org
  http://api.dojotoolkit.org
  http://dojocampus.org/explorer/
  http://d...
Upcoming SlideShare
Loading in...5
×

Using Dojo

8,657

Published on

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
  • A live javascript console is also available to accompany these slides at: http://www.rapaul.com/2009/02/15/using-dojo/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,657
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
352
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Using Dojo"

  1. 1. Richard Paul Kiwiplan NZ Ltd 17 Feb 2009
  2. 2. Dojo Tookit http://dojotoolkit.org/ The Dojo Toolkit is an open source modular JavaScript library [...] designed to ease the rapid development of cross platform, JavaScript/Ajax based applications and web sites. -- http://en.wikipedia.org/wiki/Dojo_Toolkit Current version: 1.2.3 Next version: 1.3.0
  3. 3. dojo.query Returns nodes which match the given CSS3 selector, searching the entire document by default but optionally taking a node to scope the search by. Returns an instance of dojo. NodeList. -- http://api.dojotoolkit.org/ // Find all nodes with the class 'draggable' var draggable = dojo.query('.draggable') // Search in the subtree of an existing node var myList = dojo.byId('myList') var items = dojo.query('li', myList) // Advanced CSS 3 selectors (regardless of browser) :nth-child(odd), :not(...)
  4. 4. dojo.NodeList dojo.NodeList is as subclass of Array which adds syntactic sugar for chaining, common iteration operations, animation, and node manipulation. NodeLists are most often returned as the result of dojo.query() calls. -- http://api.dojotoolkit.org/ // Set onclick handler for all lists (ordered and unordered) dojo.query('ol, ul').onclick(function(event) { }) // Iterator over items in list dojo.query('ol li, ul li').forEach(function() { }) // Empty the snippet list dojo.query('#snippets').empty() // Use camel-case naming to set CSS properties dojo.query('#snippets li').style('backgroundColor', 'blue')
  5. 5. dojo.NodeList-fx Fancy animations for your nodelist // Include the NodeList animation package dojo.require(quot;dojo.NodeList-fxquot;); // Fade out all items dojo.query('.items').fadeOut() // Opposite is fadeIn // Wipe out all items dojo.query('.items').wipeOut() // Opposite is wipeIn // Animate CSS properties dojo.query('#item').anim({width: '800', height: '300'}) // Even works for colours and for custom durations dojo.query('#output').anim({backgroundColor: '#afa'}, 4000)
  6. 6. Declaring Classes Creating your own classes in Dojo dojo.declare('className', superClass, property map) dojo.declare('Logger', null, { constructor: function(outputId) { this.node = dojo.byId(outputId) }, log: function(text) { if (text == undefined) return this.node.innerHTML += '<br/>' + text }, clear: function() { new dojo.NodeList(this.node).empty() } }) var logger = new Logger('output')
  7. 7. dojo.connect Allows function to be trigger when event occur. // Call logger.clear() when terminal.load() is called dojo.connect(terminal, 'load', logger, 'clear') Passes the same arguments as passed to load to the clear function. terminal.load('mySnippet') // => log is cleared
  8. 8. dojo.behavior Unobtrusive javascript (note the US spelling) dojo.behavior.add({ '#snippetList a': { 'onclick': function(e) { terminal.load(e.target.id) } }, '#run': { 'onclick': function(e) { terminal.run() } }, '#clear': { 'onclick': function() { logger.clear() } } }) dojo.behavior.apply()
  9. 9. Dojo Topics dojo.publish, dojo.subscribe Anonymous communication is available in Dojo via topics. // Set up subsciber dojo.subscribe('topic', object, 'method') // Publish data to the topic dojo.publish('topic', ['a message']) // Multiple arguments (mapped using apply) dojo.subscribe('topic', null, function(a, b) { alert(a + ':' + b) }) dojo.publish('topic', ['one', 'two']) // => one:two // Unsubscribing var handle = dojo.subscribe(...) dojo.unsubscribe(handle)
  10. 10. dojo.xhrGet Simple AJAX calls dojo.xhrGet({ url: 'service/sessions/1', load: function(data) { logger.log(data) } }) // Compared with a raw request var request = new XMLHttpRequest() request.open('GET', 'service/sessions/1', true) request.onreadystatechange = function () { if (request.readyState == 4) { // 4 = loaded if (request.status == 200) { // 200 = success logger.log(request.responseText) // or responseXML } } } request.send(null)
  11. 11. dojo.xhrPost Posting data using Dojo dojo.xhrPost({ url: 'service/addSession', content: { name: 'Groovy', speaker: 'Kugan', date: '17 April 2009 15:00' }, load: function(data) { logger.log(data) } })
  12. 12. dojo.xhrPost form submission Posting a form using xhrPost dojo.xhrPost({ url: 'service/addSession', form: 'formId', load: function(data) { logger.log(data) } }) This approach takes a regular HTML form and submits it via XHR. Using dojo. connect can override default form behaviour. dojo.connect(myForm, 'onsubmit', null, function(e) { e.preventDefault() // Cancel regular submit dojo.xhrPost(...) // Submit via XHR }
  13. 13. Dijit Widgets for Dojo Dojo provides a wide range of widgets including: Layout widgets (tabs, accordion, content pane, ...) Form widgets (drop down button, number spinner, date pickers, popups) Strong internationalisation support. http://dojocampus.org/explorer/ for more examples All widgets are themeable with Dojo including 3 default themes: Nihilo Soria Tundra
  14. 14. Creating tabs Using dijit.layout.TabContainer <html> ... <div id=quot;tabsquot;> <div id=quot;Runquot;>...</div> <div id=quot;Instructionsquot;>...</div> ... </div> </html>
  15. 15. Widgets from code dojo.require(quot;dijit.layout.TabContainerquot;); dojo.require(quot;dijit.layout.ContentPanequot;); dojo.addOnLoad(function() { // Construct tab content panes dojo.query(quot;#tabs > divquot;).forEach(function(n) { new dijit.layout.ContentPane({ title: dojo.attr(n,quot;titlequot;) // Use node title }, n); }); // Create outer tab container var container = new dijit.layout.TabContainer( {},quot;tabsquot;); container.startup(); });
  16. 16. Widgets from markup <div id=quot;parseMequot;> <div id=quot;tabsquot; dojoType=quot;dijit.layout.TabContainerquot;> <div id=quot;Tab 1quot; dojoType=quot;dijit.layout.ContentPanequot;> Tab 1 content </div> <div id=quot;Tab 2quot; dojoType=quot;dijit.layout.ContentPanequot;> Tab 2 content </div> </div> </div> dojo.require('dojo.parser') dojo.addOnLoad(function() { dojo.parser.parse(dojo.byId('parseMe')) })
  17. 17. Validated forms <input id=quot;newSessionStartDatequot; name=quot;startDatequot; type=quot;textquot; dojoType=quot;dijit.form.DateTextBoxquot; required=quot;truequot; constraints=quot;{ datePattern:'dd MMM yyyy', strict:true,max:new Date() }quot; invalidMessage=quot;Please enter a date in the format of 'dd MMM yyyy'quot; promptMessage=quot;Please enter a date.quot; rangeMessage=quot;Please enter a non-future date.quot; />
  18. 18. DojoX quot;The future, todayquot; Includes new and innovative code that isn't deemed stable enough for dojo or dijit. Charting Grid Comet (server push) Offline support / Google gears
  19. 19. Charting Browser independent support for vector graphics. IE = VML Firefox, Safari, Opera = SVG Provides an abstraction API over the underlying drawing libraries. http://dojocampus.org/explorer/#Dojox_Charting_2D_Updating
  20. 20. Grid Grid/table widget that has support for editing, sorting and continuous scrolling. http://dojocampus.org/explorer/#Dojox_Grid_Edit%20Dijit
  21. 21. Including Dojo in your web page AOL CDN <script type=quot;text/javascriptquot; src=quot;http://o.aolcdn.com/dojo/1. 2.3/dojo/dojo.xd.jsquot;></script> http://dev.aol.com/dojo Google CDN <script type=quot;text/javascriptquot; src=quot;http://ajax.googleapis. com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.jsquot;></script> http://code.google.com/apis/ajaxlibs/documentation/#dojo Can also use google.load(1.2) to get latest 1.2 release. Local <script type=quot;text/javascriptquot; src=quot;/path/to/my/dojo.jsquot;></script>
  22. 22. Using Dijit Themes To have dijits show up correctly you need to include the CSS file for the theme. Either from a CDN or from a local copy. <head> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;http://o.aolcdn.com/dojo/1.2.3 /dijit/themes/tundra/tundra.cssquot;/> ... </head> <div class=quot;tundraquot;> <div dojoType=quot;dijit.Xxxquot;></div> </div>
  23. 23. Dojo Web Performance Each dojo.require() pulls in files one by one causing a slow client.
  24. 24. Baking a Profile Dojo supports layers, where additional functionality can be baked into a single javascript file to be served efficiently to the client. This file can then be cached by browsers to makes the page load even faster. dependencies = { layers: [ { name: quot;mylayer.jsquot;, dependencies: [ quot;dojo.behaviorquot;, quot;dijit.layout.TabContainerquot;, quot;dijit.layout.ContentPanequot; ] } ], prefixes: [ [ quot;dijitquot;, quot;../dijitquot; ], [ quot;dojoxquot;, quot;../dojoxquot; ] ] };
  25. 25. Useful links/feeds http://www.dojotoolkit.org http://api.dojotoolkit.org http://dojocampus.org/explorer/ http://dojocampus.org/content/category/dojo-cookies/ http://dev.opera.com/articles/view/introducing-the-dojo- toolkit/ http://www.javaworld.com/javaworld/jw-01-2009/jw-01- introduction-to-dojo-1.html Any questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×