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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (14)

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie Ria with dojo

Ähnlich wie Ria with dojo (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Ria with dojo