現在我們對術語和內容已經很熟悉了，我們可以繼續編寫自己的GWT應用程序了。
步驟1：為Eclipse安裝GWT插件
如果您已經安裝了eclipse，只需進入“幫助”菜單，在“安裝新軟件”下，將URL設置為http://dl.google.com/eclipse/plugin/3.6 ，然后單擊“下一步”和完成安裝。
步驟2：創建一個新項目
選擇文件>新建> Web應用程序項目。 輸入名稱“ com.eviac.blog.helloworld”作為項目名稱和程序包。 默認情況下，它將同時選擇“使用Google Web Toolkit”和“使用Google App Engine”，因為我們在這里僅使用Google Web Toolkit，因此您必須取消選擇Google App Engine。
現在，eclipse將為您創建一個具有包結構的項目，如下所示。
步驟3：創建入口點
在com.eviac.blog.helloworld.client包中，創建一個名為
“ HelloWorldGwt ”
package com.eviac.blog.helloworld.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.Label;
import com.google.gwt.user.client.ui.RootPanel; public class HelloWorldGwt implements EntryPoint { @Override public void onModuleLoad() { final Label label = new Label("Hello World GWT !!!"); final Button button = new Button("Click Here"); button.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { label.setVisible(false); button.setText("welcome back again!"); Window.alert("Welcome to GWT"); } }); RootPanel.get().add(label); RootPanel.get().add(button); }
}在com.eviac.blog.helloworld包中，創建Com_eviac_blog_helloworld.gwt.xml文件。
Com_eviac_blog_helloworld.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='com_eviac_blog_helloworld'> <!-- Inherits Web Toolkit utilities. --> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- Specify the app entry point class. --> <entry-point class='com.eviac.blog.helloworld.client.HelloWorldGwt'/>
</module>步驟3：建立HTML網頁
在文件夾war內，創建Com_eviac_blog_helloworld.html文件
Com_eviac_blog_helloworld.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="Com_eviac_blog_helloworld.css"> <title>Hello World GWT</title> <script type="text/javascript" language="javascript" src="com_eviac_blog_helloworld/com_eviac_blog_helloworld.nocache.js"></script> </head> <body> <!-- optional tag: add this if needs history support --> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> <h1><center>Hello World GWT</center></h1> </body>
</html>第4步：創建web.xml文件
在文件夾war / WEB-INF內，創建一個名為web.xml的xml文件。
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app> <!-- Default page to serve --> <welcome-file-list> <welcome-file>Com_eviac_blog_helloworld.html</welcome-file> </welcome-file-list>
</web-app>步驟5：創建css文件
在打獵者內創建一個名為Com_eviac_blog_helloworld.cssCSS文件
Com_eviac_blog_helloworld.css
h1 { font-size: 2em; font-weight: bold; color: #6495ED;
} .gwt-Label { color: #0000FF; font: normal 12px tahoma, arial, helvetica, sans-serif; height:3.5em; width: 10.7em;
} .gwt-Button { color: #0000FF; height:3.5em; width: 10.7em; font-size: 12px; font-family: arial, sans-serif;
}好了，我們已經完成了編碼步驟，但請等待，還有一個步驟
步驟6：運行GWT應用程序
要在項目上單擊鼠標右鍵，請選擇“運行方式”->“ Web應用程序”，它將彈出一個新視圖“開發模式”，復制生成的URL。
使用此鏈接為您的Web瀏覽器安裝GWT插件。
現在將URL粘貼到瀏覽器中，您將看到類似以下的內容。
現在，您知道如何構建基本的GWT應用程序，可以通過添加更多功能并使用css文件更改外觀來改進它。
參考：我們的JCG合作伙伴 開始使用GWT ? EVIAC博客上的Pavithra Siriwardena。
翻譯自: https://www.javacodegeeks.com/2012/03/getting-started-with-gwt.html
