Google Web Toolkit - PowerPoint by pengxiang


									Google Web Toolkit
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
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

   Developers can design the UI and event model
    using familiar Java techniques
   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
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.
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.
GWT Architecture
GWT Components
   A set of standard UI widgets compatible with major
   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.
Installing GWT
   Extract it, and then place the resulting
   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.
A Sample Project
   Replica of the UI of an email application.
GWT with Eclipse
   projectCreator -eclipse MyProject
    This command creates a new src subdirectory and
    new .project and .classpath files

   applicationCreator -eclipse MyProject
    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.
GWT with Eclipse(contd.)
GWT with Eclipse(contd.)
   <module>

   <!-- Inherit the core Web Toolkit stuff.      -->
   <inherits name=''/>

   <!-- Specify the app entry point class.      -->
   <entry-point
   </module>
   <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>
Java Startup class
   package com.mycompany.client;
   import;
   import;
   import;
   import;
   import;
   import;

   public class MyApplication implements EntryPoint {
   public void onModuleLoad() {
     final Button button = new Button("Click me");
     final Label label = new Label();

           button.addClickListener(new ClickListener() {
             public void onClick(Widget sender) {
               if (label.getText().equals(""))
                 label.setText("Hello World!");
               else
                 label.setText("");
             }
           });
           RootPanel.get("slot1").add(button);
           RootPanel.get("slot2").add(label);
       }
   }
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
   Web mode
       full deployment mode; it's what you would use
        after you compile your GWT program to
        JavaScript code
Invoke Hosted Mode
Google Web Toolkit Development
Shell / Port 8888
Simulated Browser
Hosted Mode Simulated
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
   Create a variety of custom widgets -
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
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
Data exchange between client
and server Classes used in
  client-side implementation of remote
  procedure calls. Classes used
  in server-side implementation of remote
  procedure calls.
RPC architecture
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); }
RPC Example(contd)
Its corresponding asynchronous interface will
   look like this:
public interface MyEmailServiceAsync { void
   emptyMyInbox(String username, String
   password, AsyncCallback callback); }
       The client-side call will look like this

   public void menuCommandEmptyInbox()
   {
       MyEmailServiceAsync emailService = (MyEmailServiceAsync)
       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);
   }
Making a call
   Instantiate the service interface using
   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.
   Dynamic, reusable UI components

   Really simple RPC

   Real debugging
Advantages (contd)
   Browser compatible

   Browser history management

   Completely Open Source
Try it out !!!
   Try to create a simple GWT web application
    that involves client server interaction.
   Get help from
   http://www-
Thank you !

To top