來自 http://book.douban.com/reading/13439674/
說明 GWT 項目可以通過指令行和Eclipse插件兩種方式建立。建立GWT項目的指令是webAppCreator。出于實用性考慮,本書不使用指令行相關工具,隻在說明部分給出操作所對應的指令。具體使用方法及參數,可以檢視 GWT 的說明文檔。
clipse 插件安裝完成後,Eclipse 工具條中會增加一個 Google toolbar。如圖 2-1 所示,三個按鈕分别是“New Web Application Project”(建立 Web 應用項目)、“GWT Compile Project”(GWT 編譯項目)、“Deploy App Engine Project”(部署 AppEngine 項目),其中 Deploy App Engine Project 是Google AppEngine 的工具。
gwt在eclipse中建立項目
圖 2-1 Eclipse 中的 Google toolbar
單擊“New Web Application Project”按鈕打開“New Web Application Project”對話框。輸入項目名稱 HelloGWT,包名 chapter2。這裡不涉及 Google AppEngine,是以取消“Use Google App Engine”前的勾選,其他保持預設值,如圖 2-2 所示。
單擊“Finish”按鈕建立項目。GWT 新項目向導建立的預設項目對于 Hello GWT 這樣的示例來說有點複雜。删除檔案 GreetingService.java、GreetingServiceAsync.java 和 chapter2.server 包以簡化項目,如圖 2-3 所示。
gwt在eclipse中建立項目
圖 2-2 建立 GWT 項目對話框
gwt在eclipse中建立項目
圖 2-3 簡化後的 GWT 項目
删除不需要的檔案後,web.xml 也要做相應的修改,删除 web.xml 中的 servlet 和 servlet-mapping 元素,修改後的内容如代碼清單 2-1 所示。
代碼清單 2-1 修改後的 web.xml 檔案
1 <?xml version="1.0" encoding="utf-8"?>
2 <!DOCTYPE web-app
3 PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
4 "http://java.sun.com/dtd/web-app_2_3.dtd">
5 <web-app>
6 <welcome-file-list>
7 <welcome-file>HelloGWT.html</welcome-file>
8 </welcome-file-list>
9 </web-app>
打開 HelloGWT.html 删除所有内容。先寫一個标準的空白 HTML,然後嵌入 hellogwt/hellogwt. nocache.js 腳本,修改後的代碼如代碼清單 2-2 所示。
代碼清單 2-2 HelloGWT.html 源代碼
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=utf-8">
4 <title>HelloGWT</title>
5 <script type="text/javascript" src="hellogwt/hellogwt.nocache.js"></script>
6 </head>
7 <body>
8 </body>
9 </html>
接着打開 HelloGWT.java,删除所有内容後輸入代碼清單 2-3 中的代碼。
代碼清單 2-3 HelloGWT.java 源代碼
1 package chapter2.client;
2
3 import com.google.gwt.core.client.EntryPoint;
4 import com.google.gwt.event.dom.client.ClickEvent;
5 import com.google.gwt.event.dom.client.ClickHandler;
6 import com.google.gwt.user.client.Window;
7 import com.google.gwt.user.client.ui.Button;
8 import com.google.gwt.user.client.ui.RootPanel;
9
10 public class HelloGWT implements EntryPoint {
11 public void onModuleLoad() {
12 Button welcomeButton = new Button("歡迎");
13 welcomeButton.addClickHandler(new ClickHandler() {
14 @Override
15 public void onClick(ClickEvent event) {
16 Window.alert("Hello GWT!");
17 }
18 });
19 RootPanel.get().add(welcomeButton);
20 }
21 }
上面代碼在第 12 行建立了一個标題為“歡迎”的按鈕。第 13~18 行為按鈕添加了 Click 事件的處理程式。當使用者單擊按鈕後,會觸發第 16 行代碼,調用Window.alert 函數在螢幕上彈出“Hello GWT!”對話框。第 19 行代碼會将新建立的按鈕添加到頁面中。
Hello GWT 就這樣完成了,運作一下,看看效果如何。