Dojo CRUD Components

Dojo CRUD Components by Tom Mahieu PeopleWare

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

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

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

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

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

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

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

Dojo powered applications

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 Workﬂow Implemented in JavaScript Custom Dojo Components CRUD User Interface www.devoxx.com CRUD Ajax “scenarios”

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

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

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

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

Model - View - Controller Master & Detail export events ItemSelect, CreateButtonClick, SaveButtonClick, ... Override to add application speciﬁc 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

Event driven programming ViewViewController ViewFormController Ajax/ DWR

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

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

Architecture Browser tier Web tier Business tier Data tier

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://www.mahieu.org	563
http://mahieu.org	32
http://www.slideshare.net	31
http://www.techgig.com	3
http://webcache.googleusercontent.com	2
http://techgig.in	1

Dojo CRUD Components

by Tom Mahieu

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 632

Statistics