google web toolkit - spatineo€¦ · since gwt 2.0: dev mode code is run in the browser as java...

25
Google Web Toolkit Introduction to GWT Development GeoMashup CodeCamp 2011 University of Helsinki Department of Computer Science Ilkka Rinne & Sampo Savolainen / Spatineo Oy 24. lokakuuta 11

Upload: others

Post on 21-May-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google Web ToolkitIntroduction to GWT Development

GeoMashup CodeCamp 2011University of Helsinki

Department of Computer Science

Ilkka Rinne & Sampo Savolainen / Spatineo Oy

24. lokakuuta 11

Page 2: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google Web Toolkit

24. lokakuuta 11

Page 3: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google Web ToolkitCode your browser apps in Java

24. lokakuuta 11

Page 4: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google Web ToolkitCode your browser apps in Java

Test your app locally in your browser

24. lokakuuta 11

Page 5: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google Web ToolkitCode your browser apps in Java

Test your app locally in your browser

Debug your code using regular IDE debuggers

24. lokakuuta 11

Page 6: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google Web ToolkitCode your browser apps in Java

Test your app locally in your browser

Debug your code using regular IDE debuggers

24. lokakuuta 11

Page 7: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google Web ToolkitCode your browser apps in Java

GWT compiles your app into optimized JavaScript

Test your app locally in your browser

Debug your code using regular IDE debuggers

24. lokakuuta 11

Page 8: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google Web ToolkitCode your browser apps in Java

GWT compiles your app into optimized JavaScript

Test your app locally in your browser

Debug your code using regular IDE debuggers

24. lokakuuta 11

Page 9: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google Web ToolkitCode your browser apps in Java

GWT compiles your app into optimized JavaScript

Test your app locally in your browser

Debug your code using regular IDE debuggers

Deploy anywhere (it’s just JS + CSS + HTML)

24. lokakuuta 11

Page 10: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Don’t Worry About

24. lokakuuta 11

Page 11: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Don’t Worry AboutCoding in JavaScript (embed JavaScript code

with JSNI if you really have to)

24. lokakuuta 11

Page 12: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Don’t Worry AboutCoding in JavaScript (embed JavaScript code

with JSNI if you really have to)

Developing in browser (use the Java IDE you like)

24. lokakuuta 11

Page 13: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Don’t Worry AboutCoding in JavaScript (embed JavaScript code

with JSNI if you really have to)

Developing in browser (use the Java IDE you like)

Implementation details of client-server communication over HTTP

24. lokakuuta 11

Page 14: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Don’t Worry AboutCoding in JavaScript (embed JavaScript code

with JSNI if you really have to)

Developing in browser (use the Java IDE you like)

Implementation details of client-server communication over HTTP

Writing cross-browser compatible JavaScript + DOM

24. lokakuuta 11

Page 15: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Development ModeSince GWT 2.0: dev mode code is run in the

browser as Java (GWT Dev Plugin)

IDE Java debugging, code hot swapping as you save & refresh. Speeds things up!

Dev mode also runs a local server to simulate your server side GWT code

(RPC Servlets)

24. lokakuuta 11

Page 16: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

UI ComponentsBasic components for building “Java-like”

GUIs for browser applications:

Page & panel layouts

Buttons, trees, tables, input fields, etc.

24. lokakuuta 11

Page 17: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

UI ComponentsBasic components for building “Java-like”

GUIs for browser applications:

Page & panel layouts

Buttons, trees, tables, input fields, etc.

24. lokakuuta 11

Page 18: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

UI ComponentsBasic components for building “Java-like”

GUIs for browser applications:

Page & panel layouts

Buttons, trees, tables, input fields, etc.

24. lokakuuta 11

Page 19: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

UI ComponentsBasic components for building “Java-like”

GUIs for browser applications:

Page & panel layouts

Buttons, trees, tables, input fields, etc.

24. lokakuuta 11

Page 20: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

UI ComponentsBasic components for building “Java-like”

GUIs for browser applications:

Page & panel layouts

Buttons, trees, tables, input fields, etc.

24. lokakuuta 11

Page 21: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

UI Components

Demo: http://gwt.google.com/samples/Showcase/Showcase.html

Basic components for building “Java-like” GUIs for browser applications:

Page & panel layouts

Buttons, trees, tables, input fields, etc.

Extended by third party developers to provide more elaborate components

24. lokakuuta 11

Page 22: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Google API IntegrationGoogle API integration using separate libraries

Gears API Library 1.3

Gadgets API Library 1.2

Google AJAX Search API Library 1.1

Google Maps API Library 1.1

Google Chart Tools (aka Visualization) Library 1.1

Google Language API Library 1.1

Google Ajax Loader API Library 1.1

Google+ API Library 0.2-alpha

Google Books API Library 0.2-alpha

Google Latitude API Library 0.2-alpha

etc.

Note: use 1.1.1-RC1 for now!

http://code.google.com/p/gwt-google-apis/

Currentlyreleased:

24. lokakuuta 11

Page 23: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

JRE Emulation LibraryFinal GWT apps run in JavaScript (without JRE)

GWT Provides JRE emulation forJRE 1.5 basic functionality, but not all of it.

http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsCompatibility.html

Be especially careful with time/date handling, regular expressions, number formatting, timers

24. lokakuuta 11

Page 24: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Java-to-JavaScript Compiler

When you’re ready to deploy your code, ask GWT to compile

GWT generates JS, HTML, CSS, packages them into a WAR file with image resources etc.

Ready to be deployed on a Java Servlet Containeror Google App Engine

Note: Extract <appname>.nocache.js and <md5>.cache.html + resources from the WAR file to run without a Servlet Container

24. lokakuuta 11

Page 25: Google Web Toolkit - Spatineo€¦ · Since GWT 2.0: dev mode code is run in the browser as Java (GWT Dev Plugin) IDE Java debugging, code hot swapping as you save & refresh. Speeds

Let’s see some code!

GWT Development in Eclipse

Codecamp demo application

Deployment to Google App Engine

24. lokakuuta 11