An introduction to GWT and Ext GWT

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


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


• 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


• 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


• 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


• 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

Developing


• 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


• 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


• 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


• 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)


• Static and dynamic substitution

• Localized property files

• Date Formatting

• Number Formatting

Internationalization & Formatting


• Widgets

• Templates

• Layouts

• Loaders & Stores

• Drag and Drop

• Data Binding

• MVC

• Charts

• Accessibility

Introduction Ext GWT


• 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


• Row, cell, simple selection models

• Full keyboard support

• Bound to data stores

• Fast rendering

Data Widgets


• Feature rich forms

• Auto complete / assist combo box

• Validation and Error support

• Labels on left or top

• Multi column support

• HTML Editor

Forms


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


• 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


• 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


• 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


• 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


• Allow models and fields to be "bound"

• Create a 2-way relationship

• Support for explicit bindings and automatic binding

Data Binding


• 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


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


http://sencha.com

http://sencha.com

http://sencha.com/products/gwt

http://sencha.com/products/gwt

http://sencha.com/examples

http://sencha.com/examples

An introduction to GWT and Ext GWT

Technology

Transcript of An introduction to GWT and Ext GWT