introducing ext gwt 3

Ext GWT 3An Introduction to Ext GWT 3 Features

and Functionality

DARRELL MEYER, SENCHA

Monday, November 29, 2010

OverviewExt GWT 3.0 GoalsNew GWT Features

3.0 ChangesRelease Timeline

Questions


Name Games

Google Web Toolkit “G-W-T” “Gwit”

Ext GWT “E-X-T-G-W-T” “X-Gwit” “G-X-T”


Ext GWT 3.0 Goals


Ext GWT 3.0 GoalsSync the Ext GWT design with GWTIncorporate new GWT featuresBetter interoperability with GWTIntegrate and support best practices of GWT

+ =


Syncing With GWT

GXT 2.0 GXT 3.0

Events & Listeners Custom GWT

Lazy Rendering Yes No

Interface Based No Yes

UIBinder Support No Yes


New GWT Features in Ext GWT 3.0


GWT 2.1 New Features


RequestFactoryAlternative to GWT-RPCFocus on data operationsPersistence on both client and serverTracks deltas for smallest payload

Integrates with other GWT featuresEditorsEvent BusMVP Activities & Places

Database

Server

Domain

RequestFactory

Client

RequestFactory

EntityProxy


GXT Request Factory SupportRequestFactoryProxy DataProxy to load dataEntityProxy’s will be used with GXT Model & Store API


AutoBeanAutomatically generated from bean like interfacesSupports easy encoding / decoding to JSON structuresProvides reflection like supportRequestFactory uses AutoBeanhttp://code.google.com/p/google-web-toolkit/wiki/AutoBean


http://code.google.com/p/google-web-toolkit/wiki/AutoBean

http://code.google.com/p/google-web-toolkit/wiki/AutoBean

GWT AutoBeanExt GWT 3.0 will replace Models with AutoBeanStores will work with AutoBeans directly


MVPGWT built in frameworkEventBus for dispatching eventsIntegrated with GWT History APIMultiple view implementations

Model

Presenter

View 1 View 2

EventBus


GXT MVP SupportFully support interfaced based designReuse existing GWT interfaces where applicableApplications can be written and tested using GWT patterns


UIBinderBuild Widget and DOM structures from XMLClean separation of code from viewCompile time checks and cross-referencesPerformance improvements


UI Binder Panel Code


UI Binder Events & Styles


GXT UIBinder SupportComponents will support UI BinderExt GWT will provide XML Schema for it’s componentsContainers and Layouts will be able to be configured using UIBinderContainers support both GWT Widgets and GXT Components


LoggingEmulates java.util.loggingSame syntax and same behavior as serverShare logging code between client and server codeSupports remote logging

Supports di!erent logging handlersSystemLogHandlerDevelopmentModuleHandlerConsoleLogHandlerFirebugLogHandlerPopupLogHandlerSimpleRemoteLogHandler


Logging Example Code

<set-property name="gwt.logging.logLevel" value="SEVERE" /><set-property name="gwt.logging.enabled" value="FALSE" /><set-property name="gwt.logging.consoleHandler" value="DISABLED" />

// Log a message to the logger @UiHandler("logButton") void handleLogClick(ClickEvent e) { Level level = Level.parse(logTextBox.getItemText(logTextBox .getSelectedIndex())); logger.log(level, "This is a client log message"); }

// Trigger an exception and log it to the logger @UiHandler("exceptionButton") void handleExceptionClick(ClickEvent e) { try { Level n = null; n.getName(); } catch (NullPointerException ex) { logger.log(Level.SEVERE, "Null Exception Hit", ex); } }

GXT Logging SupportExt GWT will incorporate GWT Logging into the the Ext GWT LibraryDevelopers will be able to enable logging for Ext GWTProvide better insight into Ext GWT code


SafeHTMLDeals with Cross-Site-Scripting (XSS) vulnerabilitiesUntrusted data that is interpreted as HTMLUse SafeHtml when dealing with untrusted contentAll GWT Widgets have been changed to use SafeHtml rather than Strings


GXT SafeHTML SupportAll GXT Components will use SafeHtml internallyAll GXT Components will expose SafeHtml rather than Strings


Other GWT FeaturesEditorsClientBundle


3.0 Changes From 2.0


Component LifecycleChanges


DOM Elements not created at constructionDOM created when component added to the pageLazy rendering causes much confusionGWT does not lazy render its Widgets

Lazy Rendering


Ext GWT Components now work the same as GWT WidgetsDOM elements are created at constructiongetElement always works

New Design


Handlers & Events


Current DesignBased on Observable patternTyped and Untyped APISupports both DOM events and application eventsSame event type used for multiple eventsMust read docs to see what members are filled for the given eventEvents and listeners in GXT works di!erently than GWT


GWT Handlers & EventsReplace current design with GWT Handlers & EventBusGXT will now work the same as GWT WidgetsStrongly typed with event type per event (no sharing events)GXT will also support aggregate handlersHandlers will extend one to many single event handlersComponents support removing listeners without the HandlerRegistration


Container Changes


Containers refactored in GXT 3Now implement GWT panel interfacesHasWidgetsHasWidgets.ForIsWidgetIndexedPanelCan be used with MVP and unit tests

Container Changes


Loader generics were problematic in designMost generics removed from the Loading APINew code is cleaner and easier to implement

Loader Generic Refactoring


All Ext GWT 2.0 deprecated code will be removed for 3.0Complete binding package com.extjs.gxt.ui.client.binderComplete tree package com.extjs.gxt.ui.client.treeComplete treetable package com.extjs.gxt.ui.client.treetable

Deprecated Code


New Theme


Charts


Charts

Canvas/SVG/VMLExtremely customizable


Charts


AccessibilityARIAFocusManagerAccess Theme


DocumentationBetter JavaDocsNew comprehensive manualWiki


New WidgetsPivotGridLiveTreeGridMultiSelect (Facebook)Tri-State TreePanel & TreeGrid


Release Timeline


GWT 2.1 Released Oct 19, 2010Ext GWT 2.2.1 Current ReleaseExt GWT 2.3 December 2010Ext GWT 3.0 Alpha Q1 2011Ext GWT 3.0 Final Q2 2011

Release Timeline


Questions?


Thanks!Twitter @darrellmeyer

Portions of this presentation from the GWT documentation licensed under the Creative Commons Attribution 3.0 License


introducing ext gwt 3

Documents

gwt autobeanext gwt

overviewext gwt

gwt widgets

gwt patternsmonday

ext gwt design

ui binderext gwt

goalsnew gwt features3

best practices of gwt