準(zhǔn)備

軟件包	下載
gwt 2.5.1 （Google Web Toolkit）	點(diǎn)擊下載
eclipse ee 3.7 （Indigo）	點(diǎn)擊下載
gpe （Google Plugin for Eclipse）	點(diǎn)擊下載
gwtdesigner	點(diǎn)擊下載
如無(wú)法打開下載頁(yè)面，請(qǐng)將下載地址直接復(fù)制到下載器中進(jìn)行下載

GWT 安裝

解壓 gwt 壓縮包。如果你需要經(jīng)常在 CMD 中敲命令，將 gwt 添加到系統(tǒng)的 path 環(huán)境變量中。

eclipse 插件安裝

將選中的兩個(gè)文件夾解壓出來(lái)，并按下面規(guī)則構(gòu)建文件路徑：

將選中的兩個(gè)文件夾解壓出來(lái)，并按下面規(guī)則構(gòu)建文件路徑：

在 eclipse 解壓縮目錄下創(chuàng)建 2 文件夾，并將構(gòu)建好的 gep、d2gwt 文件夾丟到 extplugins 文件夾里面

在 links 文件夾里面創(chuàng)建 2 文件，gpe.link、d2gwt.link，用文本編輯器打開并編輯（推薦 notepad++）：

gpe.link 文件：
path=%extplugins%/gpe

d2gwt.link 文件：
path=%extplugins%/d2gwt

%extplugins% 代表你 extplugins 文件夾的真實(shí)路徑，請(qǐng)用真實(shí)路徑替換之，如 path=D:/eclipse/extplugins/gpe

啟動(dòng) eclipse

如果你能看到下面的這個(gè)圖標(biāo)，說(shuō)明插件已經(jīng)安裝成功了

eclipse 配置

點(diǎn)解 Add，將你 gwt 解壓縮的目錄選中，配置好你要使用的 gwt 版本

創(chuàng)建你的第一個(gè) GWT 程序

New --> Other --> WindowBuilder --> GWT Designer --> Model --> GWT Java Project

修改 HelloWorld.java ：

package fan.tutorial.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.dom.client.ClickEvent;

import com.google.gwt.event.dom.client.ClickHandler;

import com.google.gwt.user.client.Window;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {

    public void onModuleLoad() {

        Button button = new Button(" Click me ", new ClickHandler() {

            public void onClick(ClickEvent event) {

                Window.alert("I got you");

            }

        });

        RootPanel.get().add(button);

    }

}

選中 HelloWorld 項(xiàng)目，選擇編譯，讓 JAVA 代碼翻譯成適合多瀏覽器兼容的 javascript 代碼：

這個(gè)過(guò)程會(huì)比較慢，稍等就好，后續(xù)會(huì)寫篇 debug 模式下編寫 GWT 程序的文章，可以不用每次修改代碼后編譯才可以看到結(jié)果。

編譯完成之后，選擇 HelloWorld 項(xiàng)目，運(yùn)行：

程序跑起來(lái)之后，你會(huì)看到 Development Model 選卡中為你生成了一個(gè)訪問(wèn)的地址，鼠標(biāo)雙擊它可以在瀏覽器中打開：

完了之后呢，很遺憾，你看到的是這樣一個(gè)界面：

不要傷心！這是 debug 模式的訪問(wèn)地址，后續(xù)講 debug 的時(shí)候講到，將訪問(wèn)地址 http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997 后面的參數(shù)全部刪掉，即訪問(wèn) http://127.0.0.1:8888/HelloWorld.html。

這時(shí)候就能看到結(jié)果了，里面只有一個(gè)按鈕，點(diǎn)擊按鈕彈出一個(gè)對(duì)話框。