More Related Content
Ria with dojo
- 1. Rich Internet Applications with Dojo Tom Mahieu 24 - 04 - 2010
- 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. Outline •Evolution in WebApplications •Why dojo •Showcase •Future 3
- 4.
- 5.
- 6. Web app evolution Browsertier Web tier Static HTML Internet files JavaScript HTML 6
- 7. Web App Evolution Browsertier Web tier HTML PHP ASP Servlets Data tier Internet JSP JSF JavaScript Spring HTML ... 7
- 8. Web App Evolution Browsertier Web tier HTML PHP ASP Servlets JSP JSF Spring Internet Web Services Data tier JavaScript REST HTML 8
- 9. Web App Evolution •Browserincompatibilities • 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. JavaScript library goals •EliminateBrowser 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.
- 12.
- 13. Outline •Evolution in WebApplications •Why dojo •Showcase •Future 13
- 14. Why dojo •Server sidetechnology independent •Software engineering paradise • Layered • Modular • Extensible • Optimizable • Testable •Large Open Source Community •Dojo foundation 14
- 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. 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. Modular •Declaratively add functionality •Selectcomponents <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. Modular •Add components toyour 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.
- 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;"> </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. 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. 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. Testable •Built-in unit testframework •DOH: Dojo Objective Harness 23
- 24. Community •Forum • http://dojotoolkit.org/community •Chat(IRC) • http://dojotoolkit.org/chat •dojo.beer() 24
- 25. Dojo foundation •http://www.dojofoundation.org •Hosts opensource projects •Goal: promote the Open Web • open, non-proprietary web technologies •Some Projects •Some (large) Contributors 25
- 26. Outline •Evolution in WebApplications •Why dojo •Showcase • Photo Gallery • CRUD applications • Facebook demo • WaveMaker •Future 26
- 27. Photo Gallery • http://hypocrates.peopleware.be:8080/Scroller • http://www.mahieu.org/Scroller 27
- 28. CRUD applications •Custom dojocomponents • 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.
- 30. Facebook demo http://hypocrates.peopleware.be:8080/ FacebookDemo 30
- 31.
- 32.
- 33.
- 34. Outline •Evolution in WebApplications •Why dojo •Showcase •Future 34
- 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. Future •Towards an openweb • 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.