Ria with dojo

4,919 views

Published on

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • thanx for sharing. it would be a better share if you let us download the file
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,919
On SlideShare
0
From Embeds
0
Number of Embeds
910
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Ria with dojo

  1. 1. Rich Internet Applications with Dojo Tom Mahieu 24 - 04 - 2010
  2. 2. About •Tom Mahieu • http://www.mahieu.org • SW Engineer, Phd Computer Science •PeopleWare • http://www.peopleware.be • Custom software development • Desktop/Web/Mobile apps, EAI • Technology: Java, .NET, Delphi • Business Intelligence • Training 2
  3. 3. Outline •Evolution in Web Applications •Why dojo •Showcase •Future 3
  4. 4. Web App Evolution 4
  5. 5. Web App Evolution 5
  6. 6. Web app evolution Browser tier Web tier Static HTML Internet files JavaScript HTML 6
  7. 7. Web App Evolution Browser tier Web tier HTML PHP ASP Servlets Data tier Internet JSP JSF JavaScript Spring HTML ... 7
  8. 8. Web App Evolution Browser tier Web tier HTML PHP ASP Servlets JSP JSF Spring Internet Web Services Data tier JavaScript REST HTML 8
  9. 9. Web App Evolution •Browser incompatibilities • Javascript • Document Object Model (DOM) •In-browser software development • SW Engineering support • Testing JavaScript code? • cross-browser? • Good debugging tools • Browser plugins: Firebug • Built in development tools • IE8, Safari 9
  10. 10. JavaScript library goals •Eliminate Browser incompatibilities •JavaScript language enhancements • Class based concepts •Library of common functionality • Ajax • DOM querying • DOM animation • UI (User Interface) widgets • Form controls • Layout controls 10
  11. 11. JavaScript libraries 11
  12. 12. Dojo •http://dojotoolkit.org 12
  13. 13. Outline •Evolution in Web Applications •Why dojo •Showcase •Future 13
  14. 14. Why dojo •Server side technology independent •Software engineering paradise • Layered • Modular • Extensible • Optimizable • Testable •Large Open Source Community •Dojo foundation 14
  15. 15. Layered dijit dojoX • Declarative • Page Layout • Extensions • Forms • Tabs container • Extra’s • validation • Border container • Experimental • widgets • CSS Themes dojo core • Internationalization • Animation effects • Cookie management • Drag & Drop • History management • ... dojo base • Browser detection • JavaScript • Animations • DOM Querying (CSS3) • inheritance emulation • JSON Tools • Events, Publish/Subscribe • address incompatibilities • Ajax communication 15
  16. 16. Layered •Dojo-enable your page: dojo base <html> <body> <script type="text/javascript" src="js/dojo/dojo/dojo.js"> </script> </body> </html> •Content Delivery Networks <html> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"> </script> </body> </html> 16
  17. 17. Modular •Declaratively add functionality •Select components <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.form.Form"); dojo.require("dijit.form.Slider"); dojo.require("dijit.form.DateTextBox"); dojo.require("dijit.layout.TabContainer"); ... </script> •Select a theme <link rel="stylesheet" type="text/css" href="dojo/dojo/resources/dojo.css"; <link rel="stylesheet" type="text/css" href="dojo/dijit/themes/tundra/tundra.css"; <body class="tundra"></body> 17
  18. 18. Modular •Add components to your page <form dojoType="dijit.form.Form"> <div dojoType="dijit.layout.TabContainer" class="tabcontainer"> <div dojoType="dijit.layout.ContentPane" title="Main"> <input dojoType="dijit.form.DateTextBox" name="releasedate" type="text"> </div> </div> </form> 18
  19. 19. Modular •There are many 19
  20. 20. Extensible •Build Custom Components <form dojoAttachEvent="onreset:_onReset,onsubmit:_onSubmit" name="${name}"> @CHARSET "UTF-8"; <div dojoAttachPoint="containerNode"></div> HTML Template <div style="height: 1em;">&nbsp;</div> .CrudFormBusyPanel { <div dojoAttachPoint="errorMessagesNode"></div> text-align: center; <div dojoAttachPoint="buttonContainerNode"></div> position: absolute; </form> top: 50%; width: 100%; CSS dojo.provide("ppwcode.form.CrudForm"); margin-top: -1ex; } dojo.require("ppwcode.form.ObjectForm"); dojo.require("dijit.form.Button"); .CrudFormBusyMessage { dojo.require("dijit.Tooltip"); display: inline; dojo.require("dojo.i18n"); vertical-align: middle; dojo.requireLocalization("ppwcode.form", "CrudForm"); margin-left: 0.5em; } Dojo class dojo.declare( .CrudFormErrorBox { "ppwcode.form.CrudForm", margin-top: 1.5ex; ppwcode.form.ObjectForm, padding: 0.5ex; (JavaScript) { background-color: #FFEEEE; constructor: function() { border: 1px solid red; this._tooltips = new Object(); } this._localizationbundle = dojo.i18n.getLocalization("ppwcode.form", "CrudForm"); .CrudFormErrorBoxTitle { }, font-weight: bold; postMixInProperties: function() { } ... }, .CrudFormError { ... color: red; }); } 20
  21. 21. Extensible •register component library <script type="text/javascript" src="js/dojo-release/dojo/dojo.js" djConfig="modulePaths: {ppwcode: '../ppwcode'}”> </script> •Include them in your dojo page <form id="frmYourMovie" dojoType="ppwcode.form.CrudForm" constructorFunction="Movie"> ... </form> 21
  22. 22. Optimizable •Download components • 1 component = 1 file •Custom dojo builds • collect components in layers • 1 layer = 1 file •JavaScript Optimization • Shrinksafe or Google closure • Compression rates to about 60% • shorten local variable names • remove comments, line breaks, ... 22
  23. 23. Testable •Built-in unit test framework •DOH: Dojo Objective Harness 23
  24. 24. Community •Forum • http://dojotoolkit.org/community •Chat (IRC) • http://dojotoolkit.org/chat •dojo.beer() 24
  25. 25. Dojo foundation •http://www.dojofoundation.org •Hosts open source projects •Goal: promote the Open Web • open, non-proprietary web technologies •Some Projects •Some (large) Contributors 25
  26. 26. Outline •Evolution in Web Applications •Why dojo •Showcase • Photo Gallery • CRUD applications • Facebook demo • WaveMaker •Future 26
  27. 27. Photo Gallery • http://hypocrates.peopleware.be:8080/Scroller • http://www.mahieu.org/Scroller 27
  28. 28. CRUD applications •Custom dojo components • HTML Forms with CRUD semantics • DWR communication (Ajax) • Open Source • http://www.ppwcode.org •Talk on Devoxx • http://www.mahieu.org/?p=424 28
  29. 29. CRUD applications 29
  30. 30. Facebook demo http://hypocrates.peopleware.be:8080/ FacebookDemo 30
  31. 31. Facebook demo 31
  32. 32. WaveMaker 32
  33. 33. WaveMaker 33
  34. 34. Outline •Evolution in Web Applications •Why dojo •Showcase •Future 34
  35. 35. Future •Mobile Devices • Mobile applications • Native vs. Mobile web app • Dojo • E.g. http://eventninja.net • Access hardware • PhoneGap (http://phonegap.com/) • Titanium (http://www.appcelerator.com) • E.g. http://humanapi.org 35
  36. 36. Future •Towards an open web • Standardization! • W3C Widgets • Similar to Dojo widgets • download once, store on device. • http://www.quirksmode.org/blog/archives/ 2009/04/introduction_to.html • HTML 5 • Scripting API’s • drag and drop, offline data storage, history mgt. • SVG support, canvas element, timed media elements • E.g. http://www.youtube.com/html5 36
  37. 37. Thanks! Questions? 37

×