1. An introduction to Google Web Toolkit
and Ext GWT
Darrell Meyer
Monday, October 11, 2010

2. Overview
• Why GWT and Ext GWT
• Introduction of the Google Web Toolkit (GWT)
• Introduction of Ext GWT (GXT)
• Demos & Example Code
• Questions
Monday, October 11, 2010

3. Why GWT and Ext GWT
• Applications moving from the desktop to the web
• Rich Internet Applications (RIA) changing the way web applications are
being built
• Page based applications being replaced with long running pages where
data and content is grabbed asynchronously via AJAX
• JavaScript is the language in the browser
• Managing large amounts of JavaScript is difficult
• Harder to maintain with large development teams
• Poor tooling support
• Code assist, code completion, refactoring, searching, etc
• With GWT and Ext GWT write in Java on both client and server
Monday, October 11, 2010

4. Overview
• Introduction of the Google Web Toolkit (GWT)
• Compiler
• Server Communications
• Development mode and debugging
• UI Binder
• ClientBundle
• JavaScript Native Interface (JSNI)
• I18N and Formatting
• Testing
Monday, October 11, 2010

5. GWT Compiler
• Compiler compiles Java source code to highly optimized JavaScript that runs across all
browsers
• Performs comprehensive optimizations across your codebase — in-lining methods,
removing dead code, optimizing strings, and more.
• Supports code splitting which segments your download into multiple JavaScript fragments,
splitting up large applications for faster startup time.
• JavaScript is minimized and obfuscated
Monday, October 11, 2010

6. Server Communications
• Remote Procedure Calls allow you to make server side method calls
passing Java objects over the wire.
• With RPC you do not need to deal with serialization and deserialization of
Java objects
• Supports JSON / XML
Monday, October 11, 2010

7. Developing
• Run, build, debug, and test all in Java
• GWT provides a “Development Mode” where you can debug and step
through your Java code before it has been translated to JavaScript
Monday, October 11, 2010

8. Developing
• Test your application from remote machines
• Code and debug in the IDE of your choice such as Eclipse or IntelliJ
• Code assist
• Code completion
• Refactoring
• Google plugin for Eclipse
Monday, October 11, 2010

9. UI Binder
• Builds Widget and DOM structure and XML markup
• Makes it easier to collaborate with designers
• Clean separation of Java code and HTML / CSS
Monday, October 11, 2010

10. ClientBundle
• Features
• No more uncertainty about whether your application is getting the right contents for program
resources.
• Enable more aggressive caching headers for program resources
• Eliminate mismatches between physical filenames and constants in Java code by performing
consistency checks during the compile
• Use 'data:' URLs, JSON bundles, or other means of embedding resources in compiled JS when
browser- and size-appropriate to eliminate unneeded round trips
Monday, October 11, 2010

11. Testing and Performance
• GWT provides first class support with JUnit
• Easy to implement unit testing
• Speed Tracer tool allows you to analyze, visualize, and tune your application
code
Monday, October 11, 2010

12. JavaScript Native Interface (JSNI)
• Allows full integration with existing handwritten JavaScript or with a third-
party JavaScript library
• JSNI can be used in many ways
• Implement a Java method directly in JavaScript
• Wrap type-safe Java method signatures around existing JavaScript
• Call from JavaScript code into Java code and vice-versa
• Throw exceptions across Java/JavaScript boundaries
• Read and write Java fields from JavaScript
Monday, October 11, 2010

13. Internationalization & Formatting
• Static and dynamic substitution
• Localized property files
• Date Formatting
• Number Formatting
Monday, October 11, 2010

14. Introduction Ext GWT
• Widgets
• Templates
• Layouts
• Loaders & Stores
• Drag and Drop
• Data Binding
• MVC
• Charts
• Accessibility
Monday, October 11, 2010

15. Ext GWT Widgets
• High performance data widgets
• Fully themed and customizable
• Data widgets
• Tree and TreeGrid
• Lists and Grids
• Forms and form widgets
• Menu, menu bars, and toolbars
• Panels, windows, and dialogs
Monday, October 11, 2010

16. Data Widgets
• Row, cell, simple selection models
• Full keyboard support
• Bound to data stores
• Fast rendering
Monday, October 11, 2010

17. Forms
• Feature rich forms
• Auto complete / assist combo box
• Validation and Error support
• Labels on left or top
• Multi column support
• HTML Editor
Monday, October 11, 2010

18. ToolBars and Menus
• Feature rich set of toolbars, button bars, and menus
• Embed any widgets into toolbars and menu
Monday, October 11, 2010

19. Panel, Windows, and Dialogs
• Moveable and resizable panels
• Collapse / Expand
• Button bar
• Modal support
Monday, October 11, 2010

20. Templates
• Represents an HTML fragment template
• Can be used to customize the display of data within GXT
• Supports advanced features such as:
• Autofilling arrays using templates and sub-templates
• Conditional processing with basic comparison operators
• Basic math function support
• Execute arbitrary inline code with special built-in template variables
Monday, October 11, 2010

21. Ext GWT Layouts
• Layouts manage the display of components added to them, eliminating box
model issues, scroll bar issues and other traditional complexities of
combining widgets into a UI
• Layout is delegated by containers to a specific layout class
• Nested containers can each contain a separate layout, allowing for
extremely complex user interfaces
Monday, October 11, 2010

22. Loaders & Stores
• Models - domain objects
• DataLoader - responsible for loading data with the help of proxies and
readers
• DataReader - responsible for parsing raw data and producing models
• DataProxy - responsible for retrieving remote data
• Stores & Records - stores are a client side cache of models while
records support the editing of models in a store
Monday, October 11, 2010

23. Drag and Drop
• Out of the box drag and drop support
• Custom support for trees, grids, and lists
• Drag data to and from all widgets
Monday, October 11, 2010

24. Data Binding
• Allow models and fields to be "bound"
• Create a 2-way relationship
• Support for explicit bindings and automatic binding
Monday, October 11, 2010

25. MVC
• Ext GWT provides a lightweight MVC implementation to manage an
application
• Core classes include the Dispatcher, Controllers, and Views
• Integrated with the GWT history API
Monday, October 11, 2010

26. Charts
• Flash based charts using Open Flash Chart
• Tight integration with Ext GWT Models & Stores
• Listen for events from charts
Monday, October 11, 2010

27. Accessibility!
• Full Section 508 and ARIA compliance for all components
• FocusManager API allows entire application to be navigated via keyboard
• High contrast theme and Window high contrast support
Monday, October 11, 2010

28. Thanks
• Darrell Meyer @darrellmeyer
• http://sencha.com
• http://sencha.com/products/gwt
• http://sencha.com/examples
• Some content from GWT documentation and licensed under the Creative
Commons Attribution 3.0 License
Monday, October 11, 2010