An introduction to GWT and Ext GWT
4 likes1,518 views
This document introduces Google Web Toolkit (GWT) and Ext GWT. It discusses why they are useful for building rich internet applications with Java, and summarizes their main features which include compiling to optimized JavaScript, server communication, UI development tools, widgets, templates, layouts, data binding, drag and drop, charts, accessibility support and more. Live demos and example code are provided to illustrate GWT and Ext GWT.
An introduction to GWT and Ext GWT
- 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