Google Web Toolkit

1. Google Web Toolkit Productivity for developers, performance for users. MOD250 HiB  16 November 2010

2. Overview • Google Wave Demo • Google Web Toolkit • Concepts worth knowing • What is GWT • Components • Features • Basics • Compared • Traditional web applications •  GWT advantages/drawbacks • Getting started with GWT  • Prototype

3. Google Wave

4.       Google Wave Features Panels Live conversation

5. Google Web Toolkit

6.     Google Web Toolkit Concepts worth knowing JavaScript

7.     Google Web Toolkit Concepts worth knowing JavaScript

8.     Google Web Toolkit Concepts worth knowing JavaScript

9. Concepts worth knowing     Google Web Toolkit AJAX

10. Concepts worth knowing     Google Web Toolkit AJAX

11. What is GWT Framework for building AJAX Web Applications in JAVA     Google Web Toolkit • Client: • Pure JavaScript • No JVM • Server: • Java bytecode • Runs on java webserver

12. What is GWT Solution for AJAX challenges     Google Web Toolkit Asynchronous RPC

13. What is GWT Solution for AJAX challenges     Google Web Toolkit History management and bookmarking

14. What is GWT Solution for AJAX challenges     Google Web Toolkit Internationalization

15. What is GWT Solution for AJAX challenges     Google Web Toolkit Cross-browser portability

16. Components • GWT Java-to-JavaScript Compiler • Translates the Java programming language to the JavaScript programming language. • GWT Development Mode • Supported through the use of a native-code plugin called the Google Web Toolkit Developer Plugin for many popular browsers. • GWT Web UI class library • A set of custom interfaces and classes for creating widgets.     Google Web Toolkit

17. Features • Basic API for creating Graphical User Interfaces (GUI) • Java-to-JavaScript compiler • GWT Developer Mode • Simulated mode • Run entirely from Eclipse • Java run-as-is • JUnit integration • GWT Web Mode • Deployment mode • Java compiled to JavaScript • Can be deployed on a true Web container     Google Web Toolkit

18. Inside the toolbox     Google Web Toolkit SDK Speed Tracer Eclipse Plugin GWT Designer

19. Inside the toolbox • The Google Web Toolkit SDK  contains: • Core libraries • Compiler • Development server to run web applications • The SDK can easily be installed with the eclipse plugin.     Google Web Toolkit SDK

20. Inside the toolbox     Google Web Toolkit Eclipse Plugin Demo later

21. Inside the toolbox     Google Web Toolkit Speed Tracer

22. Inside the toolbox     Google Web Toolkit GWT Designer

23. Basics Client-Side Code     Google Web Toolkit EntryPoint Class Demo

24. Basics • Compatibility with Java Language and Libraries • Intrinsic types • Boolean, byte, int, Object, arrays... •  Exceptions • Try, catch, finally • Assertions     Google Web Toolkit

25. Basics History Kitchen Sink History Tokens     Google Web Toolkit Embed iframe into host HTML page History.newItem(token) History.addValueChangeHandler()

26. Basics JavaScript Native Interface (JSNI)     Google Web Toolkit Integrate JavaScript directly into Java source Accessing Java methods from JavaScript

27. Basics Layouts and Widgets GWT Showcase Accessing Browser's DOM     Google Web Toolkit

28. Basics • Communicate with a Server • RPC  • Make calls to Java servlets • Use the built in optimized GWT-RPC • Or roll your own JSON/XML RPC • HTTP client classes • Custom HTTP requests     Google Web Toolkit

29. Basics Communicate with a Server RPC Plumbing     Google Web Toolkit

30. Basics Communicate with a Server GWT RPC structure     Google Web Toolkit

31. Basics Communicate with a Server HTTP client types     Google Web Toolkit

32. Basics Internationalization Demo     Google Web Toolkit

33. GWT Dojo jQuery Feature detection No No Yes Server push retrieval No Yes Yes Other data retrieval XML, HTML. CSV, ATOM RPC XML, HTML History management Yes Yes W/plugins Offline storage Via Google Gears No No Compared     Google Web Toolkit

34. Traditional web applications     Google Web Toolkit Each page is loaded form scratch  Resubmitting formdata Applications are bandwidth hungry, even when cached Creating a seamless user experience with background loading of data is complicated

35. Traditional web applications     Google Web Toolkit

36. GWT Advantages     Google Web Toolkit Clients are now stateful UI Event handling only clients responsibility Easy deployment (JavaScript)  No more needle in haystack bugs  x.compnent = document.getElementById("x") Static checking Find common run-time errors in Java programs at compile time   Applications are cross-browser capable  Widgets in straight Java GWT compiles the JavaScript Well documented

37. GWT Drawbacks     Google Web Toolkit Large JavaScript applications can sometimes become unpredictable and sluggish. Only JavaScript enabled browsers can run the application Can take long time to load and heavily uses the client resources

38. Getting started with GWT 1. Install the GWT plug-in for Eclipse 2. Create an application 3. Compile 4. Deploy to server

39. 1. Install the GWT plug-in for Eclipse

40. 1. Install the GWT plug-in for Eclipse

41. 1. Install the GWT plug-in for Eclipse

42. 1. Install the GWT plug-in for Eclipse

43. 1. Install the GWT plug-in for Eclipse

44. 1. Install the GWT plug-in for Eclipse

45. 2. Create a new application

46. 2. Create a new application

47. 2. Create a new application

48. 2. Create a new application Create a button Create a textbox Edit the textbox                                                                      

49. 2. Create a new application

50. 2. Create a new application