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函數中添加以下內容，實如今界面中添加一個按鈕。

 1 package com.kiritor.client;
 2 
 3 import com.kiritor.shared.FieldVerifier;
 4 import com.google.gwt.core.client.EntryPoint;
 5 import com.google.gwt.core.client.GWT;
 6 import com.google.gwt.event.dom.client.ClickEvent;
 7 import com.google.gwt.event.dom.client.ClickHandler;
 8 import com.google.gwt.event.dom.client.KeyCodes;
 9 import com.google.gwt.event.dom.client.KeyUpEvent;
10 import com.google.gwt.event.dom.client.KeyUpHandler;
11 import com.google.gwt.user.client.Window;
12 import com.google.gwt.user.client.rpc.AsyncCallback;
13 import com.google.gwt.user.client.ui.Button;
14 import com.google.gwt.user.client.ui.DecoratorPanel;
15 import com.google.gwt.user.client.ui.DialogBox;
16 import com.google.gwt.user.client.ui.DockPanel;
17 import com.google.gwt.user.client.ui.HTML;
18 import com.google.gwt.user.client.ui.HTMLPanel;
19 import com.google.gwt.user.client.ui.Label;
20 import com.google.gwt.user.client.ui.RootPanel;
21 import com.google.gwt.user.client.ui.TextBox;
22 import com.google.gwt.user.client.ui.VerticalPanel;
23 
24 public class ImageButton implements EntryPoint {
25     public void onModuleLoad() {
26         final MyButton MyButton = new MyButton();
27         HTMLPanel  dockPanel = new HTMLPanel("<center></center>");
28         MyButton.setText("MyButton");
29         MyButton.addClickHandler(new ClickHandler() {
30             @Override
31             public void onClick(ClickEvent event) {
32                 Window.alert(MyButton.getElement().getInnerHTML());
33             }
34         });
35         dockPanel.add(MyButton);
36         RootPanel.get().add(dockPanel);
37     }
38 }

View Code

          其中MyButton是筆者本身定製的，讀者可以使用GWT本身的Button控件嘗試。

          以後運行項目run as->web application便可看到運行效果圖(瀏覽器要安裝插件)

          

      歡迎你們一塊兒交流學習!筆者也在CSDN：http://blog.csdn.net/lcore

                                                                                                           By LCore