Presentation given at Devoxx 2009 in a BOF session on the dojo toolkit

1. Dojo CRUD
Components
by Tom Mahieu
PeopleWare

2. Overall presentation goal
Why did we choose dojo as browser technology
How have we experienced dojo
How have we evolved from dojo user to dojo
developer: dojo CRUD components
www.devoxx.com

3. Agenda
PeopleWare
The road to dojo @ PeopleWare
CRUD Components in dojo
Summary
www.devoxx.com

4. PeopleWare
Custom software development
Desktop apps, Web apps, Mobile apps, EAI, ...
Technology: Java, .NET, Delphi
Business Intelligence
Microsoft BI, Pentaho
Content Management
Plone, Sharepoint, ...
www.devoxx.com
Training

5. Java @ PeopleWare
Desktop Applications
Eclipse RCP
Web Applications
Emphasis on information-handling administrative apps
PPWCode (http://www.ppwcode.org)
Captures coding style, programming idioms, architectural
decisions, ...
Reusable components (emphasis on semantics rather
than technology)
www.devoxx.com

6. The road to dojo @ PeopleWare
End 2007, beginning of 2008
Web Interface technologies: JSF, Struts, ..
Move towards RIA
Drag and drop, animation, single page applications, ...
Look at JavaScript libraries
www.devoxx.com

7. The road to dojo @ PeopleWare
GWT
At the time only Java 1.4 EJB3
WaveMaker
Monolithic, automatically generated server-side war
Dojo
Pure client side JavaScript (steeper learning curve)
Mature component model + UI widget set
Development tools: unit testing, custom builds, ...
www.devoxx.com
Open source with a large community

8. The learning curve
JavaScript
OO language + prototype inheritance + closures
Dojo
Thorough JavaScript knowledge required
Learn Dijit framework
Learn development tools: unit testing, custom builds, ...
Distilled our knowledge in training courses
JavaScript, the language
www.devoxx.com
Dojo

9. Dojo powered applications

10. Dojo powered applications
Administrative applications
CRUD of Objects
Business entities: Create an Order, Update an Invoice, Delete a Stock Item
entities & business rules developed in Java (POJOs), stored in a database (ORM)
Custom Workflow
Implemented in JavaScript
Custom Dojo Components
CRUD User Interface
www.devoxx.com
CRUD Ajax “scenarios”

11. Agenda
PeopleWare
The road to dojo @ PeopleWare
CRUD Components in Dojo
Master-Detail
Form Components
MVC on the browser
n-tier Architecture
Attention points
www.devoxx.com
Summary

12. Master view
List of objects
without loss of typing
superclass + subclasses
Retrieve
App. specific search criterium
Parent-child relations
to-many relation
Second Master view
MV1.selectedItem determines content
Create button
www.devoxx.com
Select specific type

13. Master view
List of objects
without loss of typing
superclass + subclasses
Retrieve
App. specific search criterium
Parent-child relations
to-many relation
Second Master view
MV1.selectedItem determines content
Create button
www.devoxx.com
Select specific type

14. Detail view
Displays (all) properties
Related object properties
Possible form states
View, update, create mode
Optional delete button
Internationalization
Button labels
www.devoxx.com

15. Form widgets
Specialized widgets
usually based on existing Dijits
Examples
Multi-valued attributes
Localized textbox
text in a particular locale
AddressBox
Address fields encapsulated in one Dijit
www.devoxx.com
...

16. Model - View - Controller
Master & Detail export events
ItemSelect, CreateButtonClick, SaveButtonClick, ...
Override to add application specific functionality
Off-the-shelf CRUD Controllers
Attach to events
Coordinate between Master and Detail
Implement CRUD scenarios
www.devoxx.com
Master - Detail View consistency
Encapsulate Ajax call handling

17. Event driven programming
ViewViewController ViewFormController
Ajax/
DWR

18. Architecture
Dojo components show object graphs
Parent-child relations in Master View
(Complex) properties in forms
Multivalued attributes, postal addresses, pictures
Object graphs must be exchanged with browser
Classes implemented in Java
DWR: marshals Java objects to JavaScript objects
maintains object graph structure (object references)
www.devoxx.com
maintains (basic) typing

19. Architecture
Dojo components show object graphs A
Parent-child relations in Master View B
(Complex) properties in forms
C
Multivalued attributes, postal addresses, pictures
Object graphs must be exchanged with browser
Classes implemented in Java
DWR: marshals Java objects to JavaScript objects
maintains object graph structure (object references)
www.devoxx.com
maintains (basic) typing

20. Architecture
Browser tier Web tier Business tier Data tier

21. Architecture
Browser tier Web tier Business tier Data tier
A
B
C

22. Architecture
Browser tier Web tier Business tier Data tier
A
B
C
JPA

23. Architecture
Browser tier Web tier Business tier Data tier
Persistence Context
A
A
B
B
C C
JPA

24. Architecture
Browser tier Web tier Business tier Data tier
Persistence Context
A
A
B
B
C C
EJB3,
JPA
RMI

25. Architecture
Browser tier Web tier Business tier Data tier
Persistence Context
A
A Detach A
B
B B
C C C
EJB3,
JPA
RMI

26. Architecture
Browser tier Web tier Business tier Data tier
Persistence Context
A
A A Detach A
B
B B B
C C C C
Ajax, EJB3,
JPA
DWR RMI

27. Architecture
Browser tier Web tier Business tier Data tier
Persistence Context
A
A A Detach A
B
B B B
C C C C
Ajax, EJB3,
JPA
DWR RMI

28. Architecture
Browser tier Web tier Business tier Data tier
Persistence Context
A
A A Detach A
B
B B B
C C C C
Ajax, EJB3,
JPA
DWR RMI

29. Architecture
Browser tier Web tier Business tier Data tier
Persistence Context
A
A A Detach A
B
B B B
Merge
C C C C
Ajax, EJB3,
JPA
DWR RMI

30. Architecture
Browser tier Web tier Business tier Data tier
Persistence Context
A
A A Detach A
B
B B B
Merge
C C C C
Ajax, EJB3,
JPA
DWR RMI

31. Architecture (2)
Browser tier Web tier Data tier
Persistence Context
A
A
Detach A
B
B B
Merge C
C C
JavaScript Ajax, Java Java
JPA
DWR

32. Architecture: attention points
Grids need custom dojo.data stores
data store may alter objects for bookkeeping purposes
add properties (add an ID, tracking changes, ...)
Objects are sent back to the server
bookkeeping properties must be removed.
Semantics on detached objects
Enforce all business constraints on browser is not possible
partial checks are possible
www.devoxx.com
Checks must be repeated on the server side

33. Architecture: attention points(2)
DWR
Browser side: only dumb objects with properties
no automatic business constraint checks on client side
getters, setters, business methods are not “compiled” to JavaScript
must be translated manually to JavaScript
www.devoxx.com

34. Agenda
PeopleWare
The road to dojo @ PeopleWare
CRUD Components in dojo
Summary
www.devoxx.com

35. Summary
CRUD components in Dojo
Implemented & tested on IE, FireFox, Safari, Chrome
DOH: Unit tests
mainly correct rendering and API tests
no UI event test (yet, doh.robot?)
no CI (yet)
Open Source
http://www.ppwcode.org
www.devoxx.com

36. Summary
Advantages
MVC: Ajax technology independent
Server side independent
Should work as well with PHP or .NET Technology
Disadvantages
No automatic business constraints checks on all tiers
Only tested with DWR/Java backend
www.devoxx.com

37. Thanks for your attention!
http://www.peopleware.be
http://www.ppwcode.org
http://www.dojofoundation.org
http://www.dojotoolkit.org
http://www.directwebremoting.org
www.devoxx.com