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