Ria with dojo

Rich Internet Applications
with Dojo
Tom Mahieu
24 - 04 - 2010

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

Outline
•Evolution in Web Applications
•Why dojo
•Showcase
•Future

3

Web app evolution
Browser tier Web tier

Static
HTML
Internet ﬁles
JavaScript
HTML

6

Web App Evolution


HTML

PHP ASP
Servlets Data tier
Internet JSP
JSF
JavaScript
Spring
HTML ...

7

Web App Evolution
HTML PHP
ASP
Servlets
JSP
JSF
Spring

Internet
Web Services
Data tier
JavaScript
REST
HTML

8

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

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

JavaScript libraries

11

Dojo
•http://dojotoolkit.org

12

Outline
•Why dojo
•Showcase
•Future

13

Why dojo
•Server side technology independent
•Software engineering paradise
• Layered
• Modular
• Extensible
• Optimizable
• Testable
•Large Open Source Community
•Dojo foundation
14

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

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

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

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

Modular
•There are many

19

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

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

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

Testable
•Built-in unit test framework
•DOH: Dojo Objective Harness

23

Community
•Forum
• http://dojotoolkit.org/community
•Chat (IRC)
• http://dojotoolkit.org/chat
•dojo.beer()

24

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

Outline
•Why dojo
•Showcase
• Photo Gallery
• CRUD applications
• Facebook demo
• WaveMaker
•Future

26

Photo Gallery
• http://hypocrates.peopleware.be:8080/Scroller
• http://www.mahieu.org/Scroller

27

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

CRUD applications

29

Facebook demo
http://hypocrates.peopleware.be:8080/
FacebookDemo

30

Outline
•Why dojo
•Showcase
•Future

34

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

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

Ria with dojo

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (14)

En vedette

En vedette (9)

Similaire à Ria with dojo

Similaire à Ria with dojo (20)

Dernier

Dernier (20)

Ria with dojo