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