SlideShare une entreprise Scribd logo
1  sur  39
Google Web Toolkit (GWT)  Yiguang Hu ,[object Object],[object Object],[object Object]
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Introduction to AJAX ,[object Object]
 
 
What is GWT? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GWT setup ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Demo ,[object Object]
Why Use Java for AJAX Dev? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Why GWT? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
GWT Architecture JRE Emulation Library (java.lang and java.util) GWT Web UI Class library Class Libraries Java-to-JavaScript Compiler hosted web browser Designer Development tools
GWTApplication Development Process ,[object Object],[object Object],[object Object],[object Object],[object Object]
GWT Widget Gallery
GWT Widget Gallery
GWT Widget Gallery
GWT Widget Gallery
GWT Application Development Process ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Demo 2 ,[object Object]
Events and Listeners ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Example: Event Listener public class ListenerExample extends Composite  implements ClickListener  { private FlowPanel fp = new FlowPanel(); private Button b1 = new Button("Button 1"); public ListenerExample() { setWidget(fp); fp.add(b1); b1.addClickListener(this); } // Event listener method from the ClickListener interface public void onClick(Widget sender) { // handle event: Read input, interact with server, update page }
Remore Procedure Call (RPC)
GWT RPC Plumbing Architecture
Steps for Implementing GWT RPC ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
1. Write Two Service Interface Files ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
2. Implement the Service ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
4. Make a call from Client  ,[object Object],[object Object],[object Object]
a. Instantiate Service Interface using GWT.create() ‏ public void menuCommandsayHello(String msg) { MyHelloServiceAsync myhelloService = GWT.create(MyHelloService.class);
b. Make the Call with an asynchronous callback object  public void menuCommandsayhello(String msg) { ... // (d) Make the call. Control flow will continue immediately and later // 'callback' will be invoked when the RPC completes. myhelloService.sayHello(msg, new AsyncCallback() { public void  onSuccess (Object result) { // update page with server response data } public void  onFailure (Throwable caught) { // handle failure } }); }
Demo 3 ,[object Object]
Remote Procedure Call (RPC) Sub-topic:  Serializable Types
Remote Procedure Call (RPC)  Sub-topic: Handling Exceptions
Handling Exceptions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Checked Exceptions ,[object Object],[object Object]
Unchecked Exceptions ,[object Object],[object Object],[object Object],[object Object],[object Object]
Other ways to interact with Server ,[object Object],[object Object],[object Object]
JSON-Creating overlay type ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JSON-Convert JSON String into JavaScript object ,[object Object],[object Object],[object Object],[object Object]
JSON-Requesting JSON ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
? ,[object Object],[object Object]

Contenu connexe

Tendances

Gerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRxGerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRxLoiane Groner
 
FullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + AngularFullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + AngularLoiane Groner
 
Callbacks and control flow in Node js
Callbacks and control flow in Node jsCallbacks and control flow in Node js
Callbacks and control flow in Node jsThomas Roch
 
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018Loiane Groner
 
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019Loiane Groner
 
Avoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promisesAvoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promisesAnkit Agarwal
 
Pushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax WPushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax Wrajivmordani
 
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConfFull-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConfLoiane Groner
 
Code generation with javac plugin
Code generation with javac pluginCode generation with javac plugin
Code generation with javac pluginOleksandr Radchykov
 
Understanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptUnderstanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptjnewmanux
 
Avoiding callback hell with promises
Avoiding callback hell with promisesAvoiding callback hell with promises
Avoiding callback hell with promisesTorontoNodeJS
 
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...How to Implement Basic Angular Routing and Nested Routing With Params in Angu...
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...Katy Slemon
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!Nir Kaufman
 
Angular - injection tokens & Custom libraries
Angular - injection tokens & Custom librariesAngular - injection tokens & Custom libraries
Angular - injection tokens & Custom librariesEliran Eliassy
 
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java GirlFull-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java GirlLoiane Groner
 

Tendances (20)

React on es6+
React on es6+React on es6+
React on es6+
 
Gerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRxGerenciamento de estado no Angular com NgRx
Gerenciamento de estado no Angular com NgRx
 
FullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + AngularFullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + Angular
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
Ngrx meta reducers
Ngrx meta reducersNgrx meta reducers
Ngrx meta reducers
 
Callbacks and control flow in Node js
Callbacks and control flow in Node jsCallbacks and control flow in Node js
Callbacks and control flow in Node js
 
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
 
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
 
Avoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promisesAvoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promises
 
Angular 2 introduction
Angular 2 introductionAngular 2 introduction
Angular 2 introduction
 
Pushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax WPushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax W
 
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConfFull-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
 
Code generation with javac plugin
Code generation with javac pluginCode generation with javac plugin
Code generation with javac plugin
 
Understanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptUnderstanding Asynchronous JavaScript
Understanding Asynchronous JavaScript
 
Avoiding callback hell with promises
Avoiding callback hell with promisesAvoiding callback hell with promises
Avoiding callback hell with promises
 
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...How to Implement Basic Angular Routing and Nested Routing With Params in Angu...
How to Implement Basic Angular Routing and Nested Routing With Params in Angu...
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
 
Angular - injection tokens & Custom libraries
Angular - injection tokens & Custom librariesAngular - injection tokens & Custom libraries
Angular - injection tokens & Custom libraries
 
Svelte JS introduction
Svelte JS introductionSvelte JS introduction
Svelte JS introduction
 
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java GirlFull-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
 

Similaire à Google Web Toolkits

Google Web Toolkits
Google Web ToolkitsGoogle Web Toolkits
Google Web ToolkitsYiguang Hu
 
GWT training session 3
GWT training session 3GWT training session 3
GWT training session 3SNEHAL MASNE
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitIMC Institute
 
softshake 2014 - Java EE
softshake 2014 - Java EEsoftshake 2014 - Java EE
softshake 2014 - Java EEAlexis Hassler
 
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand DwrJoe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwrdeimos
 
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEAGoogle Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEAnerazz08
 
Gwt session
Gwt sessionGwt session
Gwt sessionMans Jug
 
Vaadin 7 CN
Vaadin 7 CNVaadin 7 CN
Vaadin 7 CNjojule
 
Google Wave API: Now and Beyond
Google Wave API: Now and BeyondGoogle Wave API: Now and Beyond
Google Wave API: Now and BeyondMarakana Inc.
 
Enterprise Guice 20090217 Bejug
Enterprise Guice 20090217 BejugEnterprise Guice 20090217 Bejug
Enterprise Guice 20090217 Bejugrobbiev
 
Building Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.PptxBuilding Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.PptxIgor Moochnick
 
Workshop: Building Vaadin add-ons
Workshop: Building Vaadin add-onsWorkshop: Building Vaadin add-ons
Workshop: Building Vaadin add-onsSami Ekblad
 

Similaire à Google Web Toolkits (20)

Google Web Toolkits
Google Web ToolkitsGoogle Web Toolkits
Google Web Toolkits
 
GWT training session 3
GWT training session 3GWT training session 3
GWT training session 3
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
 
softshake 2014 - Java EE
softshake 2014 - Java EEsoftshake 2014 - Java EE
softshake 2014 - Java EE
 
Gwt RPC
Gwt RPCGwt RPC
Gwt RPC
 
JavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto
JavaCro'14 - Building interactive web applications with Vaadin – Peter LehtoJavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto
JavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto
 
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand DwrJoe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
 
React native by example by Vadim Ruban
React native by example by Vadim RubanReact native by example by Vadim Ruban
React native by example by Vadim Ruban
 
Google Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEAGoogle Web Toolkit Introduction - eXo Platform SEA
Google Web Toolkit Introduction - eXo Platform SEA
 
Gwt session
Gwt sessionGwt session
Gwt session
 
Gwt session
Gwt sessionGwt session
Gwt session
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Vaadin 7 CN
Vaadin 7 CNVaadin 7 CN
Vaadin 7 CN
 
Google Wave API: Now and Beyond
Google Wave API: Now and BeyondGoogle Wave API: Now and Beyond
Google Wave API: Now and Beyond
 
GWT MVP Case Study
GWT MVP Case StudyGWT MVP Case Study
GWT MVP Case Study
 
Enterprise Guice 20090217 Bejug
Enterprise Guice 20090217 BejugEnterprise Guice 20090217 Bejug
Enterprise Guice 20090217 Bejug
 
Android dev 3
Android dev 3Android dev 3
Android dev 3
 
Building Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.PptxBuilding Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.Pptx
 
Workshop: Building Vaadin add-ons
Workshop: Building Vaadin add-onsWorkshop: Building Vaadin add-ons
Workshop: Building Vaadin add-ons
 

Plus de Yiguang Hu

Data analysis scala_spark
Data analysis scala_sparkData analysis scala_spark
Data analysis scala_sparkYiguang Hu
 
Java8 and Functional Programming
Java8 and Functional ProgrammingJava8 and Functional Programming
Java8 and Functional ProgrammingYiguang Hu
 
Introduction to Vert.x
Introduction to Vert.xIntroduction to Vert.x
Introduction to Vert.xYiguang Hu
 
Cross platform Mobile development on Titanium
Cross platform Mobile development on TitaniumCross platform Mobile development on Titanium
Cross platform Mobile development on TitaniumYiguang Hu
 

Plus de Yiguang Hu (9)

Data analysis scala_spark
Data analysis scala_sparkData analysis scala_spark
Data analysis scala_spark
 
Java8 and Functional Programming
Java8 and Functional ProgrammingJava8 and Functional Programming
Java8 and Functional Programming
 
Introduction to Vert.x
Introduction to Vert.xIntroduction to Vert.x
Introduction to Vert.x
 
Cross platform Mobile development on Titanium
Cross platform Mobile development on TitaniumCross platform Mobile development on Titanium
Cross platform Mobile development on Titanium
 
Phone Gap
Phone GapPhone Gap
Phone Gap
 
Clojure
ClojureClojure
Clojure
 
Why Grails
Why GrailsWhy Grails
Why Grails
 
Why Grails?
Why Grails?Why Grails?
Why Grails?
 
Gsword
GswordGsword
Gsword
 

Google Web Toolkits

  • 1.
  • 2.
  • 3.
  • 4.  
  • 5.  
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11. GWT Architecture JRE Emulation Library (java.lang and java.util) GWT Web UI Class library Class Libraries Java-to-JavaScript Compiler hosted web browser Designer Development tools
  • 12.
  • 17.
  • 18.
  • 19.
  • 20. Example: Event Listener public class ListenerExample extends Composite implements ClickListener { private FlowPanel fp = new FlowPanel(); private Button b1 = new Button("Button 1"); public ListenerExample() { setWidget(fp); fp.add(b1); b1.addClickListener(this); } // Event listener method from the ClickListener interface public void onClick(Widget sender) { // handle event: Read input, interact with server, update page }
  • 22. GWT RPC Plumbing Architecture
  • 23.
  • 24.
  • 25.
  • 26.
  • 27. a. Instantiate Service Interface using GWT.create() ‏ public void menuCommandsayHello(String msg) { MyHelloServiceAsync myhelloService = GWT.create(MyHelloService.class);
  • 28. b. Make the Call with an asynchronous callback object public void menuCommandsayhello(String msg) { ... // (d) Make the call. Control flow will continue immediately and later // 'callback' will be invoked when the RPC completes. myhelloService.sayHello(msg, new AsyncCallback() { public void onSuccess (Object result) { // update page with server response data } public void onFailure (Throwable caught) { // handle failure } }); }
  • 29.
  • 30. Remote Procedure Call (RPC) Sub-topic: Serializable Types
  • 31. Remote Procedure Call (RPC) Sub-topic: Handling Exceptions
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.

Notes de l'éditeur

  1. Java dev framework for complex web Java-to-JavaScript compiler Designer(Widget, event, styling, code generation) Hosted mode When app deploy to prod compiler translates Java application to browser-compliant JavaScript, CSS, and HTML
  2. Use GWT commandline tool IDE plugins: intellij, eclipse, Netbean etc Install GWT plugin Create a java application, select GWT in the process Create a sample GWT application Install gwt development plugin for browsers IE, Firefox, Safari.-No chrome plugin yet
  3. Static type checking in the Java boosts productivity while reducing errors. Common JavaScript errors (typos, type mismatches) are easily caught at compile time Code prompting/completion (through IDE) ‏ Automated Java refactoring Java-based OO designs are easier to communicate and understand, thus making AJAX code base more comprehensible.
  4. No need to code JavaScript No need to handle browser incompatibilities No need to use DOM APIs No need to build commonly used Widgets Java Tools JUnit integration Internationalization Designer
  5. GWT Java-to-JavaScript Compiler GWT Hosted Web Browser GWT Designer JRE emulation library GWT contains JavaScript implementations of the most widely used classes in the Java standard class library GWT Web UI class library Similar to Swing UI Parses the original Java code Full parser, almost all Java constructs will be parsed correctly. Generates a full Abstract Syntax Tree (AST) ‏ GWT's compiler isn't a parlor trick, it's a real code parser and cross-language compiler Performs optimization, dead-code elimination, dynamic analysis, and other code fixups The generated JS is fast and efficient, sometimes faster than what you might write yourself Optimization All code is optimized, including some unusual tricks (like turning some methods into wrapped statics) ‏ Dead-Code Elimination Remove any code that cannot be reached, or always returns the same value(s) ‏ Javascript Generation Generate Javascript, including all necessary browser-specific checks and workarounds Javascript obfuscation and size reduction Javascript is (optionally) obfuscated to protect your trade-secrets, and to reduce it's size
  6. Swing like Event Driven UI frameworks Far easier to manipulate DOM using Java classes than using DOM API Much easier to quickly build interfaces that works correctly on all browsers using widgets
  7. Swing like Event Driven UI frameworks Far easier to manipulate DOM using Java classes than using DOM API Much easier to quickly build interfaces that works correctly on all browsers using widgets
  8. A mechanism for interacting with the server by invoking a method asynchronously Makes it easy for the client and server to pass Java objects back and forth over HTTP You could move all UI logic to the client improved performance, reduced bandwidth, reduced web server load, and a pleasant user experience