An introduction to GWT and Ext GWT

An introduction to Google Web Toolkit
and Ext GWT
Darrell Meyer

Monday, October 11, 2010

Overview
• Why GWT and Ext GWT

• Introduction of the Google Web Toolkit (GWT)
• Introduction of Ext GWT (GXT)
• Demos & Example Code
• Questions


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 difﬁcult
• 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


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


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


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


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


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


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


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 ﬁlenames 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


Testing and Performance
• GWT provides ﬁrst class support with JUnit

• Easy to implement unit testing
• Speed Tracer tool allows you to analyze, visualize, and tune your application
code


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 ﬁelds from JavaScript


Internationalization & Formatting
• Static and dynamic substitution

• Localized property ﬁles
• Date Formatting
• Number Formatting


Introduction Ext GWT
• Widgets

• Templates

• Layouts

• Loaders & Stores

• Drag and Drop

• Data Binding

• MVC

• Charts

• Accessibility


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


Data Widgets
• Row, cell, simple selection models

• Full keyboard support
• Bound to data stores
• Fast rendering


Forms
• Feature rich forms

• Auto complete / assist combo box
• Validation and Error support
• Labels on left or top
• Multi column support
• HTML Editor


ToolBars and Menus
• Feature rich set of toolbars, button bars, and menus

• Embed any widgets into toolbars and menu


Panel, Windows, and Dialogs
• Moveable and resizable panels

• Collapse / Expand
• Button bar
• Modal support


Templates
• Represents an HTML fragment template

• Can be used to customize the display of data within GXT
• Supports advanced features such as:
• Autoﬁlling 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


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 speciﬁc layout class
• Nested containers can each contain a separate layout, allowing for
extremely complex user interfaces


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


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


Data Binding
• Allow models and ﬁelds to be "bound"

• Create a 2-way relationship
• Support for explicit bindings and automatic binding


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


Charts
• Flash based charts using Open Flash Chart

• Tight integration with Ext GWT Models & Stores
• Listen for events from charts


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


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


An introduction to GWT and Ext GWT

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (11)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie An introduction to GWT and Ext GWT

Ähnlich wie An introduction to GWT and Ext GWT (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

An introduction to GWT and Ext GWT