Ext GWT provides a rich set of data components including lists, trees, and grids. Rather than just covering the client-side implementation, this session will demonstrate how to manage your data and data updates from the server. In addition, you will advanced techniques to customize the display of your data.

1. Ext GWT
Advanced Data Widgets
DARRELL MEYER, SENCHA
Monday, November 29, 2010

2. Overview
Conference App
RequestFactory
RequestFactory Support
Store Updates
Rendering & Formatting
Questions
Monday, November 29, 2010

3. Conference App
Monday, November 29, 2010

4. Technology Stack
Ext GWT 2.2.1
GWT 2.1
Java Persistence API (JPA)
Google App Engine (GAE)
RequestFactory
GWT MVP
Dependency Injection with Gin
Download at http://dev.sencha.com/playpen/gxt/conference-app.zip
Monday, November 29, 2010

5. IDE & Plugins
Eclipse IDE for Java EE Developers (Helios 3.6.1)
http://www.eclipse.org/downloads/
Plugins
Maven Integration for Eclipse
http://m2eclipse.sonatype.org/sites/m2e
Maven Integration for Eclipse WTP Integration
http://m2eclipse.sonatype.org/sites/m2e-extras
Google Eclipse
http://code.google.com/eclipse/
Monday, November 29, 2010

6. RequestFactory
Monday, November 29, 2010

7. RequestFactory
Database
Implements data access on client & server
Manages changes to data
Supports batching and caching
Server
Domain
Entity
RequestFactory
Entity Proxy
RequestFactory Interface
Server Implementation
Wiring it together Client
RequestFactory
EntityProxy
Monday, November 29, 2010

8. RequestFactory Entity
Domain class in an application
Monday, November 29, 2010

9. RequestFactory EntityProxy
Client-side representation of an entity
Monday, November 29, 2010

10. RequestFactory Interface
Interface between server and client code
Monday, November 29, 2010

11. RequestFactory Server
Methods in service interface implemented in class with @Service
Monday, November 29, 2010

12. RequestFactory Wiring
Create RequestFactory instance using GWT.create()
Monday, November 29, 2010

13. RequestFactory Usage
Monday, November 29, 2010

14. RequestFactory Support
Monday, November 29, 2010

15. EntityProxyModel
EntityProxyModel wraps EntityProxy
Handles setting model properties from proxy
Handles updating proxy from model
Monday, November 29, 2010

16. EntityProxy Listeners
Automatically call the server on Store data changes
EntityProxyUpdateListener
EntityProxyRemoveListener
Monday, November 29, 2010

17. Store Updates
Monday, November 29, 2010

18. Store Update Event
3 ways the update event is fired by Store
1. Store monitor changes enabled and model fires change event
2. Store.update(model) called
3. Changes made to Record and commit called on Record or Store
Monday, November 29, 2010

19. RequestFactory
Store Example
Monday, November 29, 2010

20. Store Updates
Create EntityProxyModel using EntityProxy
Monday, November 29, 2010

21. Store Updates
Add models to store
Listen for Store events
Monday, November 29, 2010

22. Store Updates
Record commit causes server to be updated
Removing from store causes server to be updated
Monday, November 29, 2010

23. Rendering & Formatting
Monday, November 29, 2010

24. Rendering & Formatting
Use XTemplate to generate HTML
XTemplate supports GWT DateTimeFormat & NumberFormat
Use GridCellRenderer for Grid / TreeGrid
Use UIBinder with HTML
Monday, November 29, 2010

25. Rendering & Formatting
Monday, November 29, 2010

26. Questions?
Monday, November 29, 2010

27. Presentation Content
<!DOCTYPE ui:UiBinder SYSTEM
"http://dl.google.com/gwt/DTD/
xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
div {
! font-family: tahoma, arial, helvetica, sans-serif;
}
.avatar {
! float: right;
! margin: 5px;
! border: 1px solid #6e6e6f;
}
...........
.desc {
! clear: left;
}
</ui:style>
Monday, November 29, 2010

28. Thanks!
Twitter @darrellmeyer
Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 License
Monday, November 29, 2010