Dojo CRUD Components

5,260
-1

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,260
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Web applications: * CRUD + Workflow in User interface. * Business semantics checking coded in Java. * Design by contract: as prescribed by PPWCode
  • We have components... now we must get the data in the components Remember... Objects are written in Java, Interface is JavaScript
  • Dojo CRUD Components

    1. 1. Dojo CRUD Components by Tom Mahieu PeopleWare
    2. 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. 3. Agenda PeopleWare The road to dojo @ PeopleWare CRUD Components in dojo Summary www.devoxx.com
    4. 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. 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. 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. 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. 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. 9. Dojo powered applications
    10. 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. 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. 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. 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. 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. 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. 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. 17. Event driven programming ViewViewController ViewFormController Ajax/ DWR
    18. 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. 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. 20. Architecture Browser tier Web tier Business tier Data tier
    21. 21. Architecture Browser tier Web tier Business tier Data tier A B C
    22. 22. Architecture Browser tier Web tier Business tier Data tier A B C JPA
    23. 23. Architecture Browser tier Web tier Business tier Data tier Persistence Context A A B B C C JPA
    24. 24. Architecture Browser tier Web tier Business tier Data tier Persistence Context A A B B C C EJB3, JPA RMI
    25. 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. 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. 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. 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. 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. 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. 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. 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. 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. 34. Agenda PeopleWare The road to dojo @ PeopleWare CRUD Components in dojo Summary www.devoxx.com
    35. 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. 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. 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

    ×