an introduction to gwt and ext gwt
TRANSCRIPT
An introduction to Google Web Toolkit and Ext GWTDarrell Meyer
Monday, October 11, 2010
• Why GWT and Ext GWT
• Introduction of the Google Web Toolkit (GWT)
• Introduction of Ext GWT (GXT)
• Demos & Example Code
• Questions
Overview
Monday, October 11, 2010
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
• 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
Overview
Monday, October 11, 2010
• 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
GWT Compiler
Monday, October 11, 2010
• 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
Server Communications
Monday, October 11, 2010
• 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
Developing
Monday, October 11, 2010
• 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
Developing
Monday, October 11, 2010
• Builds Widget and DOM structure and XML markup
• Makes it easier to collaborate with designers
• Clean separation of Java code and HTML / CSS
UI Binder
Monday, October 11, 2010
• 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
ClientBundle
Monday, October 11, 2010
• 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
Testing and Performance
Monday, October 11, 2010
• 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
JavaScript Native Interface (JSNI)
Monday, October 11, 2010
• Static and dynamic substitution
• Localized property files
• Date Formatting
• Number Formatting
Internationalization & Formatting
Monday, October 11, 2010
• Widgets
• Templates
• Layouts
• Loaders & Stores
• Drag and Drop
• Data Binding
• MVC
• Charts
• Accessibility
Introduction Ext GWT
Monday, October 11, 2010
• 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
Ext GWT Widgets
Monday, October 11, 2010
• Row, cell, simple selection models
• Full keyboard support
• Bound to data stores
• Fast rendering
Data Widgets
Monday, October 11, 2010
• Feature rich forms
• Auto complete / assist combo box
• Validation and Error support
• Labels on left or top
• Multi column support
• HTML Editor
Forms
Monday, October 11, 2010
ToolBars and Menus• Feature rich set of toolbars, button bars, and menus
• Embed any widgets into toolbars and menu
Monday, October 11, 2010
Panel, Windows, and Dialogs• Moveable and resizable panels
• Collapse / Expand
• Button bar
• Modal support
Monday, October 11, 2010
• 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
Templates
Monday, October 11, 2010
• 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
Ext GWT Layouts
Monday, October 11, 2010
• 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
Loaders & Stores
Monday, October 11, 2010
• Out of the box drag and drop support
• Custom support for trees, grids, and lists
• Drag data to and from all widgets
Drag and Drop
Monday, October 11, 2010
• Allow models and fields to be "bound"
• Create a 2-way relationship
• Support for explicit bindings and automatic binding
Data Binding
Monday, October 11, 2010
• 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
MVC
Monday, October 11, 2010
Charts• Flash based charts using Open Flash Chart
• Tight integration with Ext GWT Models & Stores
• Listen for events from charts
Monday, October 11, 2010
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
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