Advanced Data Widgets and Server Integration
-
Upload
sencha -
Category
Technology
-
view
1.005 -
download
2
description
Transcript of Advanced Data Widgets and Server Integration
![Page 1: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/1.jpg)
Ext GWTAdvanced Data Widgets
DARRELL MEYER, SENCHA
Monday, November 29, 2010
![Page 2: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/2.jpg)
OverviewConference AppRequestFactory
RequestFactory SupportStore Updates
Rendering & FormattingQuestions
Monday, November 29, 2010
![Page 3: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/3.jpg)
Conference App
Monday, November 29, 2010
![Page 4: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/4.jpg)
Ext GWT 2.2.1GWT 2.1
Java Persistence API (JPA)Google App Engine (GAE)
RequestFactoryGWT MVPDependency Injection with Gin
Download at http://dev.sencha.com/playpen/gxt/conference-app.zip
Technology Stack
Monday, November 29, 2010
![Page 5: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/5.jpg)
Eclipse IDE for Java EE Developers (Helios 3.6.1)http://www.eclipse.org/downloads/
PluginsMaven Integration for Eclipsehttp://m2eclipse.sonatype.org/sites/m2e
Maven Integration for Eclipse WTP Integrationhttp://m2eclipse.sonatype.org/sites/m2e-extras
Google Eclipsehttp://code.google.com/eclipse/
IDE & Plugins
Monday, November 29, 2010
![Page 6: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/6.jpg)
RequestFactory
Monday, November 29, 2010
![Page 7: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/7.jpg)
Implements data access on client & serverManages changes to dataSupports batching and caching
EntityEntity ProxyRequestFactory InterfaceServer ImplementationWiring it together
RequestFactoryDatabase
Server
Domain
RequestFactory
Client
RequestFactory
EntityProxy
Monday, November 29, 2010
![Page 8: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/8.jpg)
Domain class in an application
RequestFactory Entity
Monday, November 29, 2010
![Page 9: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/9.jpg)
Client-side representation of an entity
RequestFactory EntityProxy
Monday, November 29, 2010
![Page 10: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/10.jpg)
Interface between server and client code
RequestFactory Interface
Monday, November 29, 2010
![Page 11: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/11.jpg)
Methods in service interface implemented in class with @Service
RequestFactory Server
Monday, November 29, 2010
![Page 12: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/12.jpg)
Create RequestFactory instance using GWT.create()
RequestFactory Wiring
Monday, November 29, 2010
![Page 13: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/13.jpg)
RequestFactory Usage
Monday, November 29, 2010
![Page 14: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/14.jpg)
RequestFactory Support
Monday, November 29, 2010
![Page 15: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/15.jpg)
EntityProxyModel wraps EntityProxyHandles setting model properties from proxyHandles updating proxy from model
EntityProxyModel
Monday, November 29, 2010
![Page 16: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/16.jpg)
Automatically call the server on Store data changesEntityProxyUpdateListenerEntityProxyRemoveListener
EntityProxy Listeners
Monday, November 29, 2010
![Page 17: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/17.jpg)
Store Updates
Monday, November 29, 2010
![Page 18: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/18.jpg)
3 ways the update event is fired by Store1. Store monitor changes enabled and model fires change event2. Store.update(model) called3. Changes made to Record and commit called on Record or Store
Store Update Event
Monday, November 29, 2010
![Page 19: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/19.jpg)
RequestFactoryStore Example
Monday, November 29, 2010
![Page 20: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/20.jpg)
Create EntityProxyModel using EntityProxy
Store Updates
Monday, November 29, 2010
![Page 21: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/21.jpg)
Add models to storeListen for Store events
Store Updates
Monday, November 29, 2010
![Page 22: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/22.jpg)
Record commit causes server to be updatedRemoving from store causes server to be updated
Store Updates
Monday, November 29, 2010
![Page 23: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/23.jpg)
Rendering & Formatting
Monday, November 29, 2010
![Page 24: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/24.jpg)
Use XTemplate to generate HTMLXTemplate supports GWT DateTimeFormat & NumberFormatUse GridCellRenderer for Grid / TreeGridUse UIBinder with HTML
Rendering & Formatting
Monday, November 29, 2010
![Page 25: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/25.jpg)
Rendering & Formatting
Monday, November 29, 2010
![Page 26: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/26.jpg)
Questions?
Monday, November 29, 2010
![Page 27: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/27.jpg)
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
![Page 28: Advanced Data Widgets and Server Integration](https://reader034.fdocuments.in/reader034/viewer/2022052622/558d24c4d8b42a2c478b4638/html5/thumbnails/28.jpg)
Thanks!Twitter @darrellmeyer
Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 License
Monday, November 29, 2010