SlideShare a Scribd company logo
1 of 26
The google web toolkit Stefaan Ternier
Classic web application model (synchronous)
Ajax web application model (asynchronous)
Asynchronous JavaScript and XML (AJAX) Server - side Client – side Javascript -> Firefox/IE <html> [...] <script type=&quot;text/javascript&quot;> [...] xmlhttp.open(&quot;POST&quot;, url, true); xmlhttp.onreadystatechange = function(func) { if (xmlhttp.readyState == 4) { [...] } } xmlhttp.setRequestHeader('MessageType', 'CALL'); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); </script> <body>[...]</body> </html> JAVA -> Tomcat package com.mycompany.server; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com.mycompany.client.MyAddService; public class MyAddServiceImpl extends  RemoteServiceServlet implements MyAddService{ public int add(int a, int b) { return a + b; } }
Asynchronous JavaScript and XML (AJAX) Server - side Client – side Javascript JAVA ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Google Web Toolkit (GWT) @ deployment time @ development time <html> [...] <script type=&quot;text/javascript&quot;> [...] xmlhttp.open(&quot;POST&quot;, url, true); xmlhttp.onreadystatechange = function(func) { if (xmlhttp.readyState == 4) { [...] } } xmlhttp.setRequestHeader('MessageType', 'CALL'); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); </script> <body>[...]</body> </html> JAVA/eclipse javascript Hosted mode JVM IDE Compile to  JAVA bytecode Compile to Javascript
GWT: create project in eclipse ,[object Object],[object Object],[object Object]
GWT: Build your first app GWT JAVA Code HTML Host page
GWT: Build your first app final  Label resultaatLabel =  new  Label(); final  TextBox aBox=  new  TextBox(); final  TextBox bBox=  new  TextBox(); final  Button button =  new  Button(&quot;Click me&quot;); button.addClickListener( new  ClickListener() { public   void  onClick(Widget sender) { resultaatLabel.setText(&quot;hier komt het resultaat&quot;); } }); RootPanel. get (&quot;inputboxa&quot;).add(aBox); RootPanel. get (&quot;inputboxb&quot;).add(bBox); RootPanel. get (&quot;resultaat&quot;).add(resultaatLabel); RootPanel. get (&quot;bereken&quot;).add(button); GWT Widgets Bind to HTML page
GWT: project structure Client-side source files and subpackages com/mycompany/client/ The project root package contains module XML files  com/mycompany/ Server-side code and subpackages  com/mycompany/server/ Static resources that can be served publicly com/mycompany/public/  Purpose Package
GWT: module XML files ,[object Object],[object Object],[object Object],[object Object],[object Object]
GWT: module example com/mycompany/public/MyApplication.html com/mycompany/MyApplication.gwt.xml com/mycompany/client/MyApplication.java
GWT Widgets ,[object Object],[object Object],[object Object],[object Object]
 
Google Maps – import api
Google Maps public void onModuleLoad() { GMap2Widget mapWidget = new GMap2Widget(&quot;300&quot;, &quot;400&quot;); final GMap2 gmaps = mapWidget.getGmap();  RootPanel.get(&quot;slot1&quot;).add(mapWidget); } <module> <inherits name='com.google.gwt.user.User'/> <inherits name='com.mapitz.gwt.googleMaps.GoogleMaps' /> <entry-point class='com.mycompany.client.MyMapsApplication'/>  </module> Module XML JAVA code
Google Maps - Geocoder ,[object Object]
Google Maps - Geocoder ,[object Object]
RPC plumbing diagram
RPC plumbing diagram package com.mycompany.client; import com.google.gwt.user.client.rpc.RemoteService; public interface MyAddService extends RemoteService { public int add(int a, int b); }
RPC plumbing diagram package com.mycompany.server; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com.mycompany.client.MyAddService; public class MyAddServiceImpl  extends RemoteServiceServlet implements MyAddService{ public int add(int a, int b) { int z = a + b; return z; } }
RPC plumbing diagram package com.mycompany.client; import com.google.gwt.user.client.rpc.AsyncCallback; public interface MyAddServiceAsync { public void add(int a, int b, AsyncCallback callback); }
Deploy service ,[object Object],[object Object],<module> <inherits name='com.google.gwt.user.User'/> <entry-point class='com.mycompany.client.MyApplication'/> <servlet path=&quot;/addService&quot;    class=&quot;com.mycompany.server.MyAddServiceImpl“/> </module>
Actually making a call button.addClickListener( new ClickListener() { public void onClick(Widget sender) { MyAddServiceAsync addService = (MyAddServiceAsync) GWT.create(MyAddService.class);   ServiceDefTarget endpoint = (ServiceDefTarget) addService;   String moduleRelativeURL = GWT.getModuleBaseURL() + &quot;addService“;   endpoint.setServiceEntryPoint(moduleRelativeURL); AsyncCallback callback = new AsyncCallback(){ public void onSuccess(Object result){   resultaatLabel.setText(result.toString());   } public void onFailure(Throwable caught) {   resultaatLabel.setText(caught.getMessage());   } }; addService.add(Integer.parseInt(aBox.getText()),      Integer.parseInt(bBox.getText()),      callback); }  } );
References ,[object Object],[object Object],[object Object],[object Object],[object Object]
Computerklas ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot

Grails Plugin
Grails PluginGrails Plugin
Grails Plugin
guligala
 
Week32
Week32Week32
Week32
H K
 
Zarafa SummerCamp 2012 - Basic Introduction WebApp plugin development
Zarafa SummerCamp 2012 - Basic Introduction WebApp plugin developmentZarafa SummerCamp 2012 - Basic Introduction WebApp plugin development
Zarafa SummerCamp 2012 - Basic Introduction WebApp plugin development
Zarafa
 

What's hot (18)

Spring AOP @ DevClub.eu
Spring AOP @ DevClub.euSpring AOP @ DevClub.eu
Spring AOP @ DevClub.eu
 
Grails Plugin
Grails PluginGrails Plugin
Grails Plugin
 
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
 
Week32
Week32Week32
Week32
 
Zarafa SummerCamp 2012 - Basic Introduction WebApp plugin development
Zarafa SummerCamp 2012 - Basic Introduction WebApp plugin developmentZarafa SummerCamp 2012 - Basic Introduction WebApp plugin development
Zarafa SummerCamp 2012 - Basic Introduction WebApp plugin development
 
Print function in PHP
Print function in PHPPrint function in PHP
Print function in PHP
 
GraphQL in Symfony
GraphQL in SymfonyGraphQL in Symfony
GraphQL in Symfony
 
Client server part 12
Client server part 12Client server part 12
Client server part 12
 
Ngrx meta reducers
Ngrx meta reducersNgrx meta reducers
Ngrx meta reducers
 
Simple Markdown with Ecto and Protocols
Simple Markdown with Ecto and ProtocolsSimple Markdown with Ecto and Protocols
Simple Markdown with Ecto and Protocols
 
Net conf BG xamarin lecture
Net conf BG xamarin lectureNet conf BG xamarin lecture
Net conf BG xamarin lecture
 
Introduction To Angular's reactive forms
Introduction To Angular's reactive formsIntroduction To Angular's reactive forms
Introduction To Angular's reactive forms
 
Angular2 + rxjs
Angular2 + rxjsAngular2 + rxjs
Angular2 + rxjs
 
Styling recipes for Angular components
Styling recipes for Angular componentsStyling recipes for Angular components
Styling recipes for Angular components
 
Monoids, Store, and Dependency Injection - Abstractions for Spark Streaming Jobs
Monoids, Store, and Dependency Injection - Abstractions for Spark Streaming JobsMonoids, Store, and Dependency Injection - Abstractions for Spark Streaming Jobs
Monoids, Store, and Dependency Injection - Abstractions for Spark Streaming Jobs
 
Webdesing lab part-b__java_script_
Webdesing lab part-b__java_script_Webdesing lab part-b__java_script_
Webdesing lab part-b__java_script_
 
UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh
UI Framework Development using GWT and HTML Canvas - By Iarosla KobyliukhUI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh
UI Framework Development using GWT and HTML Canvas - By Iarosla Kobyliukh
 
Sharing Data Between Angular Components
Sharing Data Between Angular ComponentsSharing Data Between Angular Components
Sharing Data Between Angular Components
 

Similar to Gooogle Web Toolkit

Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Roel Hartman
 

Similar to Gooogle Web Toolkit (20)

Interoperable Web Services with JAX-WS
Interoperable Web Services with JAX-WSInteroperable Web Services with JAX-WS
Interoperable Web Services with JAX-WS
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentation
 
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...Developing A Real World Logistic Application With Oracle Application - UKOUG ...
Developing A Real World Logistic Application With Oracle Application - UKOUG ...
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Ajax ppt
Ajax pptAjax ppt
Ajax ppt
 
GWT Training - Session 3/3
GWT Training - Session 3/3GWT Training - Session 3/3
GWT Training - Session 3/3
 
Yahoo Query Language: Select * from Internet
Yahoo Query Language: Select * from InternetYahoo Query Language: Select * from Internet
Yahoo Query Language: Select * from Internet
 
Gwt RPC
Gwt RPCGwt RPC
Gwt RPC
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Google Web Toolkits
Google Web ToolkitsGoogle Web Toolkits
Google Web Toolkits
 
Aug Xml Net Forum Dynamics Integration
Aug Xml Net Forum Dynamics IntegrationAug Xml Net Forum Dynamics Integration
Aug Xml Net Forum Dynamics Integration
 
Introduction to AJAX and DWR
Introduction to AJAX and DWRIntroduction to AJAX and DWR
Introduction to AJAX and DWR
 
Client-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesClient-side JavaScript Vulnerabilities
Client-side JavaScript Vulnerabilities
 
Ajax
AjaxAjax
Ajax
 
Php
PhpPhp
Php
 
Google Web Toolkits
Google Web ToolkitsGoogle Web Toolkits
Google Web Toolkits
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
 
Forms With Ajax And Advanced Plugins
Forms With Ajax And Advanced PluginsForms With Ajax And Advanced Plugins
Forms With Ajax And Advanced Plugins
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
 

More from Sanjeev Kulkarni (7)

Orcale Presentation
Orcale PresentationOrcale Presentation
Orcale Presentation
 
Jfreereport and Charts an essential Report generation tool for Java Developers
Jfreereport and Charts an essential Report generation tool for Java DevelopersJfreereport and Charts an essential Report generation tool for Java Developers
Jfreereport and Charts an essential Report generation tool for Java Developers
 
H2 Database New generation embeded database
H2 Database New generation embeded databaseH2 Database New generation embeded database
H2 Database New generation embeded database
 
Only In India
Only In IndiaOnly In India
Only In India
 
The Woman
The Woman The Woman
The Woman
 
Sweet Girl...
Sweet Girl...Sweet Girl...
Sweet Girl...
 
What is meant by Love???
What is meant by Love???What is meant by Love???
What is meant by Love???
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 

Gooogle Web Toolkit

  • 1. The google web toolkit Stefaan Ternier
  • 2. Classic web application model (synchronous)
  • 3. Ajax web application model (asynchronous)
  • 4. Asynchronous JavaScript and XML (AJAX) Server - side Client – side Javascript -> Firefox/IE <html> [...] <script type=&quot;text/javascript&quot;> [...] xmlhttp.open(&quot;POST&quot;, url, true); xmlhttp.onreadystatechange = function(func) { if (xmlhttp.readyState == 4) { [...] } } xmlhttp.setRequestHeader('MessageType', 'CALL'); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); </script> <body>[...]</body> </html> JAVA -> Tomcat package com.mycompany.server; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com.mycompany.client.MyAddService; public class MyAddServiceImpl extends RemoteServiceServlet implements MyAddService{ public int add(int a, int b) { return a + b; } }
  • 5.
  • 6. Google Web Toolkit (GWT) @ deployment time @ development time <html> [...] <script type=&quot;text/javascript&quot;> [...] xmlhttp.open(&quot;POST&quot;, url, true); xmlhttp.onreadystatechange = function(func) { if (xmlhttp.readyState == 4) { [...] } } xmlhttp.setRequestHeader('MessageType', 'CALL'); xmlhttp.setRequestHeader('Content-Type', 'text/xml'); </script> <body>[...]</body> </html> JAVA/eclipse javascript Hosted mode JVM IDE Compile to JAVA bytecode Compile to Javascript
  • 7.
  • 8. GWT: Build your first app GWT JAVA Code HTML Host page
  • 9. GWT: Build your first app final Label resultaatLabel = new Label(); final TextBox aBox= new TextBox(); final TextBox bBox= new TextBox(); final Button button = new Button(&quot;Click me&quot;); button.addClickListener( new ClickListener() { public void onClick(Widget sender) { resultaatLabel.setText(&quot;hier komt het resultaat&quot;); } }); RootPanel. get (&quot;inputboxa&quot;).add(aBox); RootPanel. get (&quot;inputboxb&quot;).add(bBox); RootPanel. get (&quot;resultaat&quot;).add(resultaatLabel); RootPanel. get (&quot;bereken&quot;).add(button); GWT Widgets Bind to HTML page
  • 10. GWT: project structure Client-side source files and subpackages com/mycompany/client/ The project root package contains module XML files com/mycompany/ Server-side code and subpackages com/mycompany/server/ Static resources that can be served publicly com/mycompany/public/ Purpose Package
  • 11.
  • 12. GWT: module example com/mycompany/public/MyApplication.html com/mycompany/MyApplication.gwt.xml com/mycompany/client/MyApplication.java
  • 13.
  • 14.  
  • 15. Google Maps – import api
  • 16. Google Maps public void onModuleLoad() { GMap2Widget mapWidget = new GMap2Widget(&quot;300&quot;, &quot;400&quot;); final GMap2 gmaps = mapWidget.getGmap(); RootPanel.get(&quot;slot1&quot;).add(mapWidget); } <module> <inherits name='com.google.gwt.user.User'/> <inherits name='com.mapitz.gwt.googleMaps.GoogleMaps' /> <entry-point class='com.mycompany.client.MyMapsApplication'/> </module> Module XML JAVA code
  • 17.
  • 18.
  • 20. RPC plumbing diagram package com.mycompany.client; import com.google.gwt.user.client.rpc.RemoteService; public interface MyAddService extends RemoteService { public int add(int a, int b); }
  • 21. RPC plumbing diagram package com.mycompany.server; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import com.mycompany.client.MyAddService; public class MyAddServiceImpl extends RemoteServiceServlet implements MyAddService{ public int add(int a, int b) { int z = a + b; return z; } }
  • 22. RPC plumbing diagram package com.mycompany.client; import com.google.gwt.user.client.rpc.AsyncCallback; public interface MyAddServiceAsync { public void add(int a, int b, AsyncCallback callback); }
  • 23.
  • 24. Actually making a call button.addClickListener( new ClickListener() { public void onClick(Widget sender) { MyAddServiceAsync addService = (MyAddServiceAsync) GWT.create(MyAddService.class); ServiceDefTarget endpoint = (ServiceDefTarget) addService; String moduleRelativeURL = GWT.getModuleBaseURL() + &quot;addService“; endpoint.setServiceEntryPoint(moduleRelativeURL); AsyncCallback callback = new AsyncCallback(){ public void onSuccess(Object result){ resultaatLabel.setText(result.toString()); } public void onFailure(Throwable caught) { resultaatLabel.setText(caught.getMessage()); } }; addService.add(Integer.parseInt(aBox.getText()), Integer.parseInt(bBox.getText()), callback); } } );
  • 25.
  • 26.