1 / 38

Google Web Toolkit

Google Web Toolkit. By Sri Lakshmi Ramya Sreedharan. Agenda for today . GWT Features GWT Client Application with Eclipse RPC Advantages. Why GWT?. Writing dynamic web applications is tedious Subtle incompatibilities between web browsers and platforms JavaScript's lack of modularity.

parry
Download Presentation

Google Web Toolkit

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Google Web Toolkit By Sri Lakshmi Ramya Sreedharan

  2. Agenda for today • GWT Features • GWT Client Application with Eclipse • RPC • Advantages

  3. Why GWT? • Writing dynamic web applications is tedious • Subtle incompatibilities between web browsers and platforms • JavaScript's lack of modularity

  4. What is GWT? • Open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy • Has a Java-to-JavaScript compiler and a special web browser that helps you debug your GWT applications. • Developers can design the UI and event model using familiar Java techniques

  5. Features • Communicate between the client and server using Java objects. • Unlike traditional HTML web applications, GWT applications do not need to fetch new HTML pages as they execute, they do in fact need to get data from the server. This mechanism is better known as Remote Procedure Call (RPC) and enables interaction with the server across a network. • GWT is a compiler that converts the Java code into JavaScript code that is then inserted into the HTML page and used to run the client side of your application. • Frees you from the details of supporting JavaScript code on multiple browsers.

  6. How to use GWT? • Write client-side code using the usual core Java classes + GWT classes. • Additional bunch of Java classes for adding widgets to the page, from simple buttons to complex drop-down menus and trees. • All of these widgets offer events and write Java code to respond to them.

  7. How to use GWT? (contd.) • To test on a browser, compile classes in a Java IDE and launch the GWT Shell, which pops up a specialized browser window and loads the application. • Allows application’s client-side logic to run within the browser even though it is implemented in Java, not JavaScript.

  8. GWT Architecture

  9. GWT Components • A set of standard UI widgets compatible with major browsers. • An event mechanism for catching and responding to events completely on the client side. • A framework for managing the asynchronous calls between your Web application and the server. • A mechanism for creating stateful browser history.

  10. Installing GWT • http://code.google.com/webtoolkit/gettingstarted.html#Install

  11. Downloadables • Extract it, and then place the resulting directory • Three .jar files: • gwt-user.jar • gwt-dev-windows.jar or gwt-dev-linux.jar. • gwt-servlet.jar Three command-line utilities: applicationCreator, junitCreator, and projectCreator. • A directory of sample code.

  12. A Sample Project • Replica of the UI of an email application.

  13. GWT with Eclipse • projectCreator -eclipse MyProject This command creates a new src subdirectory and new .project and .classpath files • applicationCreator -eclipse MyProject com.mycompany.client.MyApplication The -eclipse MyProject argument is the name of the Eclipse project and must be the same as what you used in projectCreator. The final argument is the fully qualified class name of what will be your application's main class.

  14. GWT with Eclipse(contd.)

  15. GWT with Eclipse(contd.)

  16. MyApplication.gwt.xml • <module> • <!-- Inherit the core Web Toolkit stuff. --> • <inherits name='com.google.gwt.user.User'/> • <!-- Specify the app entry point class. --> • <entry-point class='com.mycompany.client.MyApplication'/> • </module>

  17. MyApplication.html • <html> • <head> • <title>Wrapper HTML for MyApplication</title> • <style> • body,td,a,div,.p{font-family:arial,sans-serif} • div,td{color:#000000} • a:link,.w,.w a:link{color:#0000cc} • a:visited{color:#551a8b} • a:active{color:#ff0000} • </style> • <meta name='gwt:module' content='com.mycompany.MyApplication'> • </head> • <body> • <script language="javascript" src="gwt.js"></script> • <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> • <h1>MyApplication</h1> • <p> • This is an example of a host page for the MyApplication application. • You can attach a Web Toolkit module to any HTML page you like, • making it easy to add bits of AJAX functionality to existing pages • without starting from scratch. • </p> • <table align=center> • <tr> • <td id="slot1"></td><td id="slot2"></td> • </tr> • </table> • </body> • </html>

  18. Java Startup class • package com.mycompany.client; • import com.google.gwt.core.client.EntryPoint; • import com.google.gwt.user.client.ui.Button; • import com.google.gwt.user.client.ui.ClickListener; • import com.google.gwt.user.client.ui.Label; • import com.google.gwt.user.client.ui.RootPanel; • import com.google.gwt.user.client.ui.Widget; • publicclass MyApplication implements EntryPoint { • publicvoid onModuleLoad() { • final Button button = new Button("Click me"); • final Label label = new Label(); • button.addClickListener(new ClickListener() { • publicvoid onClick(Widget sender) { • if (label.getText().equals("")) • label.setText("Hello World!"); • else • label.setText(""); • } • }); • RootPanel.get("slot1").add(button); • RootPanel.get("slot2").add(label); • } • }

  19. Run MyProject • Hosted mode • GWT application is implemented as a pure Java application running within a single JVM. • Provides a simple web server like component (the GWT Development shell) and special web browser. • Web mode • full deployment mode; it's what you would use after you compile your GWT program to JavaScript code

  20. Invoke Hosted Mode

  21. Google Web Toolkit Development Shell / Port 8888

  22. Simulated Browser

  23. Hosted Mode Simulated Browser

  24. Customizing your application • Widgets and panels are client-side Java classes used to build user interfaces . • Widgets are rendered using dynamically-created HTML rather than pixel-oriented graphics. • Create a variety of custom widgets - http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.UserInterface.CreatingCustomWidgets.html

  25. Project Structure • it’s mandatory that you define a global package for your application. The last part of the package name must be the name of the application (such as global.package.yourApplicationName). • The XML file describing your application must be found at the root of this global package. • In addition, you must create three sub-packages: • “client”, which contains the Java code of the client side • “server”, which contains the Java code of the server side • “public”, which contains the HTML pages, CSS, and images of your application

  26. Server Side Application • Data exchange between the client and the server using RPC-The mechanism for interacting with a server across a network . • The server-side code that gets invoked from the client is often referred to as a service, • so the act of making a remote procedure call is sometimes referred to as invoking a service.

  27. Data exchange between client and server com.google.gwt.user.client.rpc: Classes used in client-side implementation of remote procedure calls. com.google.gwt.user.server.rpc: Classes used in server-side implementation of remote procedure calls. Visit http://code.google.com/webtoolkit/documentation/gwt.html

  28. RPC architecture

  29. RPC Example(contd) Suppose you want to call a method on a service interface defined as follows: public interface MyEmailService extends RemoteService { void emptyMyInbox(String username, String password); }

  30. RPC Example(contd) Its corresponding asynchronous interface will look like this: public interface MyEmailServiceAsync { void emptyMyInbox(String username, String password, AsyncCallback callback); }

  31. The client-side call will look like this • public void menuCommandEmptyInbox() • { • MyEmailServiceAsync emailService = (MyEmailServiceAsync) GWT.create(MyEmailService.class); • ServiceDefTarget endpoint = (ServiceDefTarget) emailService; • String moduleRelativeURL = GWT.getModuleBaseURL() + "email"; • endpoint.setServiceEntryPoint(moduleRelativeURL); • AsyncCallback callback = new AsyncCallback() { • public void onSuccess(Object result) { • // do some UI stuff to show success • } • public void onFailure(Throwable caught) { • // do some UI stuff to show failure • } • }; • emailService.emptyMyInbox(fUsername, fPassword, callback); • }

  32. Making a call • Instantiate the service interface using GWT.create(). • Specify a service entry point URL for the service proxy using ServiceDefTarget. • Create an asynchronous callback object to be notified when the RPC has completed. • Make the call.

  33. Advantages • Dynamic, reusable UI components • Really simple RPC • Real debugging

  34. Advantages (contd) • Browser compatible • Browser history management • Completely Open Source

  35. Try it out !!! • Try to create a simple GWT web application that involves client server interaction. • Get help from • http://blogs.sun.com/insidemyhead/entry/google_web_toolkit_modules_as • http://www.oracle.com/technology/pub/articles/dubois-gwt.html

  36. References • http://code.google.com/webtoolkit/ • http://www.oracle.com/technology/pub/articles/dubois-gwt.html • http://www-128.ibm.com/developerworks/library/os-ad-gwt2/

  37. Thank you !

More Related