advanced data widgets and server integration
DESCRIPTION
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.TRANSCRIPT
Ext GWTAdvanced Data Widgets
DARRELL MEYER, SENCHA
Monday, November 29, 2010
OverviewConference AppRequestFactory
RequestFactory SupportStore Updates
Rendering & FormattingQuestions
Monday, November 29, 2010
Conference App
Monday, November 29, 2010
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
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
RequestFactory
Monday, November 29, 2010
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
Domain class in an application
RequestFactory Entity
Monday, November 29, 2010
Client-side representation of an entity
RequestFactory EntityProxy
Monday, November 29, 2010
Interface between server and client code
RequestFactory Interface
Monday, November 29, 2010
Methods in service interface implemented in class with @Service
RequestFactory Server
Monday, November 29, 2010
Create RequestFactory instance using GWT.create()
RequestFactory Wiring
Monday, November 29, 2010
RequestFactory Usage
Monday, November 29, 2010
RequestFactory Support
Monday, November 29, 2010
EntityProxyModel wraps EntityProxyHandles setting model properties from proxyHandles updating proxy from model
EntityProxyModel
Monday, November 29, 2010
Automatically call the server on Store data changesEntityProxyUpdateListenerEntityProxyRemoveListener
EntityProxy Listeners
Monday, November 29, 2010
Store Updates
Monday, November 29, 2010
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
RequestFactoryStore Example
Monday, November 29, 2010
Create EntityProxyModel using EntityProxy
Store Updates
Monday, November 29, 2010
Add models to storeListen for Store events
Store Updates
Monday, November 29, 2010
Record commit causes server to be updatedRemoving from store causes server to be updated
Store Updates
Monday, November 29, 2010
Rendering & Formatting
Monday, November 29, 2010
Use XTemplate to generate HTMLXTemplate supports GWT DateTimeFormat & NumberFormatUse GridCellRenderer for Grid / TreeGridUse UIBinder with HTML
Rendering & Formatting
Monday, November 29, 2010
Rendering & Formatting
Monday, November 29, 2010
Questions?
Monday, November 29, 2010
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
Thanks!Twitter @darrellmeyer
Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 License
Monday, November 29, 2010