Using Dojo


Published on

Published in: Technology
1 Comment
  • A live javascript console is also available to accompany these slides at:
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Using Dojo

  1. 1. Richard Paul Kiwiplan NZ Ltd 17 Feb 2009
  2. 2. Dojo Tookit 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. -- 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. -- // 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. -- // 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( } }, '#run': { 'onclick': function(e) { } }, '#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()'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. 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.
  20. 20. Grid Grid/table widget that has support for editing, sorting and continuous scrolling.
  21. 21. Including Dojo in your web page AOL CDN <script type=quot;text/javascriptquot; src=quot; 2.3/dojo/dojo.xd.jsquot;></script> Google CDN <script type=quot;text/javascriptquot; src=quot;http://ajax.googleapis. com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.jsquot;></script> 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; /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 toolkit/ introduction-to-dojo-1.html Any questions?