SlideShare a Scribd company logo
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




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
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
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
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
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
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
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
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
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
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
Internationalization & Formatting
     •   Static and dynamic substitution

     •   Localized property files
     •   Date Formatting
     •   Number Formatting




Monday, October 11, 2010
Introduction Ext GWT
     •   Widgets

     •   Templates

     •   Layouts

     •   Loaders & Stores

     •   Drag and Drop

     •   Data Binding

     •   MVC

     •   Charts

     •   Accessibility



Monday, October 11, 2010
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
Data Widgets
     •   Row, cell, simple selection models

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




Monday, October 11, 2010
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
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
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
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
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
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
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
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
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

More Related Content

What's hot

Html5-Web-Storage
Html5-Web-StorageHtml5-Web-Storage
Html5-Web-Storage
Mindfire Solutions
 
Html5 phillycc
Html5 phillyccHtml5 phillycc
Html5 phillycc
Jennifer Kenderdine
 
WordPress Widgets - Widget Summit 2008
WordPress Widgets - Widget Summit 2008WordPress Widgets - Widget Summit 2008
WordPress Widgets - Widget Summit 2008
alexkingorg
 
Web Storage & Web Workers
Web Storage & Web WorkersWeb Storage & Web Workers
Web Storage & Web Workers
Inbal Geffen
 
Entwickler camp2012 make the impossible possible with x_pages
Entwickler camp2012 make the impossible possible with x_pagesEntwickler camp2012 make the impossible possible with x_pages
Entwickler camp2012 make the impossible possible with x_pages
Frank van der Linden
 
Web Tools for GemStone/S
Web Tools for GemStone/SWeb Tools for GemStone/S
Web Tools for GemStone/S
ESUG
 
Html5 storage suggestions for challenges.pptx
Html5 storage   suggestions for challenges.pptxHtml5 storage   suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptx
deepmoteria
 
Html5 web storage
Html5 web storageHtml5 web storage
Html5 web storage
Mindfire Solutions
 
OW2 Exo Platform Open Social Portal Linuxtag09
OW2 Exo Platform Open Social Portal Linuxtag09OW2 Exo Platform Open Social Portal Linuxtag09
OW2 Exo Platform Open Social Portal Linuxtag09
Catherine Nuel
 
Ajax Zf
Ajax ZfAjax Zf
Ajax Zf
arshadka
 
SQL Queries on Smalltalk Objects
SQL Queries on Smalltalk ObjectsSQL Queries on Smalltalk Objects
SQL Queries on Smalltalk Objects
ESUG
 

What's hot (11)

Html5-Web-Storage
Html5-Web-StorageHtml5-Web-Storage
Html5-Web-Storage
 
Html5 phillycc
Html5 phillyccHtml5 phillycc
Html5 phillycc
 
WordPress Widgets - Widget Summit 2008
WordPress Widgets - Widget Summit 2008WordPress Widgets - Widget Summit 2008
WordPress Widgets - Widget Summit 2008
 
Web Storage & Web Workers
Web Storage & Web WorkersWeb Storage & Web Workers
Web Storage & Web Workers
 
Entwickler camp2012 make the impossible possible with x_pages
Entwickler camp2012 make the impossible possible with x_pagesEntwickler camp2012 make the impossible possible with x_pages
Entwickler camp2012 make the impossible possible with x_pages
 
Web Tools for GemStone/S
Web Tools for GemStone/SWeb Tools for GemStone/S
Web Tools for GemStone/S
 
Html5 storage suggestions for challenges.pptx
Html5 storage   suggestions for challenges.pptxHtml5 storage   suggestions for challenges.pptx
Html5 storage suggestions for challenges.pptx
 
Html5 web storage
Html5 web storageHtml5 web storage
Html5 web storage
 
OW2 Exo Platform Open Social Portal Linuxtag09
OW2 Exo Platform Open Social Portal Linuxtag09OW2 Exo Platform Open Social Portal Linuxtag09
OW2 Exo Platform Open Social Portal Linuxtag09
 
Ajax Zf
Ajax ZfAjax Zf
Ajax Zf
 
SQL Queries on Smalltalk Objects
SQL Queries on Smalltalk ObjectsSQL Queries on Smalltalk Objects
SQL Queries on Smalltalk Objects
 

Viewers also liked

20 year marketing plan
20 year marketing plan20 year marketing plan
20 year marketing plan
hdoromal
 
Hwn Wos V2.0 (1)
Hwn Wos V2.0 (1)Hwn Wos V2.0 (1)
Hwn Wos V2.0 (1)
therobbutler
 
Home for sale central Amsterdam, The Netherlands
Home for sale central Amsterdam, The NetherlandsHome for sale central Amsterdam, The Netherlands
Home for sale central Amsterdam, The Netherlands
Tobias Wasmuht
 
Law enforcement
Law enforcementLaw enforcement
Law enforcement
Fakru Bashu
 
Drupal SEO - Optimise your Drupal website for search engines and customers
Drupal SEO - Optimise your Drupal website for search engines and customersDrupal SEO - Optimise your Drupal website for search engines and customers
Drupal SEO - Optimise your Drupal website for search engines and customers
Symphony3
 
New SmmS Rollout March 2011
New SmmS Rollout March 2011New SmmS Rollout March 2011
New SmmS Rollout March 2011
Explosive Commerce, LLC
 

Viewers also liked (6)

20 year marketing plan
20 year marketing plan20 year marketing plan
20 year marketing plan
 
Hwn Wos V2.0 (1)
Hwn Wos V2.0 (1)Hwn Wos V2.0 (1)
Hwn Wos V2.0 (1)
 
Home for sale central Amsterdam, The Netherlands
Home for sale central Amsterdam, The NetherlandsHome for sale central Amsterdam, The Netherlands
Home for sale central Amsterdam, The Netherlands
 
Law enforcement
Law enforcementLaw enforcement
Law enforcement
 
Drupal SEO - Optimise your Drupal website for search engines and customers
Drupal SEO - Optimise your Drupal website for search engines and customersDrupal SEO - Optimise your Drupal website for search engines and customers
Drupal SEO - Optimise your Drupal website for search engines and customers
 
New SmmS Rollout March 2011
New SmmS Rollout March 2011New SmmS Rollout March 2011
New SmmS Rollout March 2011
 

Similar to An introduction to GWT and Ext GWT

Introducing apache pivot 2010 06-11
Introducing apache pivot 2010 06-11Introducing apache pivot 2010 06-11
Introducing apache pivot 2010 06-11
ConchiLebron
 
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
Aaron Saunders
 
Full stack development using javascript what and why - ajay chandravadiya
Full stack development using javascript   what and why - ajay chandravadiyaFull stack development using javascript   what and why - ajay chandravadiya
Full stack development using javascript what and why - ajay chandravadiya
ajayrcgmail
 
SuiteHelp 3.2.5 Latest Features
SuiteHelp 3.2.5 Latest FeaturesSuiteHelp 3.2.5 Latest Features
SuiteHelp 3.2.5 Latest Features
Suite Solutions
 
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Arun Gupta
 
Overview of SuiteHelp 3.1 for DITA
Overview of SuiteHelp 3.1 for DITAOverview of SuiteHelp 3.1 for DITA
Overview of SuiteHelp 3.1 for DITA
Suite Solutions
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
FITC
 
uPortal Roadmap Community Call: uPortal 3.2 and Beyond
uPortal Roadmap Community Call: uPortal 3.2 and BeyonduPortal Roadmap Community Call: uPortal 3.2 and Beyond
uPortal Roadmap Community Call: uPortal 3.2 and Beyond
Jasig uPortal Project
 
Google web toolkit gwt training
Google web toolkit gwt trainingGoogle web toolkit gwt training
Google web toolkit gwt training
FuturePoint Technologies
 
Creating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
Creating a Global E-Commerce Website With E-Business Suite and Fusion MiddlewareCreating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
Creating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
Brian Huff
 
Going Mobile with HTML5
Going Mobile with HTML5Going Mobile with HTML5
Going Mobile with HTML5
John Reiser
 
Building Real-World Dojo Web Applications
Building Real-World Dojo Web ApplicationsBuilding Real-World Dojo Web Applications
Building Real-World Dojo Web Applications
Andrew Ferrier
 
GWT HJUG Presentation
GWT HJUG PresentationGWT HJUG Presentation
GWT HJUG Presentation
Derrick Bowen
 
ExtJS: La piattaforma vincente
ExtJS: La piattaforma vincenteExtJS: La piattaforma vincente
ExtJS: La piattaforma vincente
Eugenio Minardi
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
netc2012
 
Eudoxus Technology & Architecture - JHUG May 2011 Meeting
Eudoxus Technology & Architecture - JHUG May 2011 MeetingEudoxus Technology & Architecture - JHUG May 2011 Meeting
Eudoxus Technology & Architecture - JHUG May 2011 Meeting
Fotis Stamatelopoulos
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
Prueba ppt
Prueba pptPrueba ppt
Prueba ppt
Ulises Torelli
 
Html5v1
Html5v1Html5v1
Drupal 8 introduction
Drupal 8 introductionDrupal 8 introduction
Drupal 8 introduction
Aditya Ghan
 

Similar to An introduction to GWT and Ext GWT (20)

Introducing apache pivot 2010 06-11
Introducing apache pivot 2010 06-11Introducing apache pivot 2010 06-11
Introducing apache pivot 2010 06-11
 
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
 
Full stack development using javascript what and why - ajay chandravadiya
Full stack development using javascript   what and why - ajay chandravadiyaFull stack development using javascript   what and why - ajay chandravadiya
Full stack development using javascript what and why - ajay chandravadiya
 
SuiteHelp 3.2.5 Latest Features
SuiteHelp 3.2.5 Latest FeaturesSuiteHelp 3.2.5 Latest Features
SuiteHelp 3.2.5 Latest Features
 
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
 
Overview of SuiteHelp 3.1 for DITA
Overview of SuiteHelp 3.1 for DITAOverview of SuiteHelp 3.1 for DITA
Overview of SuiteHelp 3.1 for DITA
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
 
uPortal Roadmap Community Call: uPortal 3.2 and Beyond
uPortal Roadmap Community Call: uPortal 3.2 and BeyonduPortal Roadmap Community Call: uPortal 3.2 and Beyond
uPortal Roadmap Community Call: uPortal 3.2 and Beyond
 
Google web toolkit gwt training
Google web toolkit gwt trainingGoogle web toolkit gwt training
Google web toolkit gwt training
 
Creating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
Creating a Global E-Commerce Website With E-Business Suite and Fusion MiddlewareCreating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
Creating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
 
Going Mobile with HTML5
Going Mobile with HTML5Going Mobile with HTML5
Going Mobile with HTML5
 
Building Real-World Dojo Web Applications
Building Real-World Dojo Web ApplicationsBuilding Real-World Dojo Web Applications
Building Real-World Dojo Web Applications
 
GWT HJUG Presentation
GWT HJUG PresentationGWT HJUG Presentation
GWT HJUG Presentation
 
ExtJS: La piattaforma vincente
ExtJS: La piattaforma vincenteExtJS: La piattaforma vincente
ExtJS: La piattaforma vincente
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
 
Eudoxus Technology & Architecture - JHUG May 2011 Meeting
Eudoxus Technology & Architecture - JHUG May 2011 MeetingEudoxus Technology & Architecture - JHUG May 2011 Meeting
Eudoxus Technology & Architecture - JHUG May 2011 Meeting
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
Prueba ppt
Prueba pptPrueba ppt
Prueba ppt
 
Html5v1
Html5v1Html5v1
Html5v1
 
Drupal 8 introduction
Drupal 8 introductionDrupal 8 introduction
Drupal 8 introduction
 

Recently uploaded

Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
operationspcvita
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
c5vrf27qcz
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
christinelarrosa
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 

Recently uploaded (20)

Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
The Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptxThe Microsoft 365 Migration Tutorial For Beginner.pptx
The Microsoft 365 Migration Tutorial For Beginner.pptx
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Y-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PPY-Combinator seed pitch deck template PP
Y-Combinator seed pitch deck template PP
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Christine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptxChristine's Supplier Sourcing Presentaion.pptx
Christine's Supplier Sourcing Presentaion.pptx
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 

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