GWT入门学习与理解

前言

    最近在一家公司实习，公司使用的是GWT技术进行开发。作为一个新菜鸟对这方面完全不熟。因此笔者接下来会进入到GWT得初步学习中，整理一些知识点，写入博客，希望大家一起交流。

GWT技术简介

    来源：网络、《GWT入门与经典实例解析》、《GWT揭秘》

    GWT全称为Google web Toolkit，是Google公司发布的基于Java语言开发AJAX应用的开发工具包。我们知道AJAX技术是当前web开发领域的热门技术，它通过实现与服务器的异步通信机制，能够创建动态性和交互性更好的web应用，极大的提升了用户的体验。

    Tips:注意区分同步通信和异步通信的区别，简言之

           同步通信：客户端服务器通信需"协调"，有一定的规则。例如：HTTP三次握手协议。

           异步通信：不需要协调，客户端向服务器发送请求，并不阻塞用户(发送时间不定)

     借助于GWT，开发者可以使用Java语言开发AJAX web应用，然后通过GWT提供的编译器将java代码转化为javascript代码，使得AJAX开发工作极大的简化。

    GWT通过Java语言编写AJAX应用，其设计参考Java AWT包设计，类命名规则、接口设计、事件监听等都和Java AWT非常类似，使开发者在学习和使用GWT时有一种轻车熟路的感觉，熟悉Java AWT的开发者不需要花费多大的力气就能够快速地理解GWT开发过程。在用户界面方面，GWT通过Widget封装了大量常用的Web组件和常见的AJAX组件，如Menu、TabBar和Tree等，并通过各种Panel为这些Widget提供页面布局方式，从而降低了AJAX页面开发的难度，提高了开发效率。

     GWT中提供了一种JSNI技术，它类似于Java中的JNI技术。JSNI技术可以在GWT的Java代码中嵌入JavaScript代码，因此已有的JavaScript组件可以被无缝地嵌入到GWT应用当中，使GWT拥有极大的扩展性。GWT封装了RPC（远程过程调用）机制，开发者可以方便地使用RPC完成异步通信，从而提供给用户丰富的Web 2.0应用体验。

GWT工程实例

     说了那么多理论性的东西，接下来实践一把。笔者使用的是Eclipse插件开发GWT应用，至于如何在Eclipse中配置网上的资源挺多的，笔者也就不多提及了。新建一个项目。

                 

         在模块入口onModelLoad函数中添加如下内容，实现在界面中添加一个按钮。

package com.kiritor.client;

import com.kiritor.shared.FieldVerifier;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class ImageButton implements EntryPoint {
    public void onModuleLoad() {
        final MyButton MyButton = new MyButton();
        HTMLPanel  dockPanel = new HTMLPanel("<center></center>");
        MyButton.setText("MyButton");
        MyButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                Window.alert(MyButton.getElement().getInnerHTML());
            }
        });
        dockPanel.add(MyButton);
        RootPanel.get().add(dockPanel);
    }
}

          其中MyButton是笔者自己定制的，读者可使用GWT自己的Button控件尝试。

          之后运行项目run as->web application即可看到运行效果图(浏览器要安装插件)

          

      欢迎大家一起交流学习!笔者也在CSDN：http://blog.csdn.net/lcore

                                                                                                           By LCore