GWT(2) 開發GWT的第一隻程式

GWT(2) 開發GWT的第一隻程式

開發GWT前,首先必須準備下列的開發環境:

1、 下載並安裝JDK

GWT開發需要JDK支援編譯工作,因此首先需準備Java開發環境,可至http://www.java.com下載最新版本的JDK,安裝並設定好JAVA_HOME環境變數。

2、 下載並安裝GWT

至GWT開發網站http://code.google.com/intl/zh-TW/webtoolkit/下載最新版本的GWT工具包,目前最新版本為2.2,另外並下載GWT的開發IDE工具Plugin for Eclipse,Eclipse為類似Visual Studio的開發工具,提供開發者便利的開發環境。

3、開發GWT的第一隻程式

下面的內容中我們將介紹如何使用GWT來完成第一個GWT的範例,首先開啟Elipse工具,於檔案選項中新增「Web Application Project」,接者輸入專案名稱及Package路徑,在此先將「Use Google App Engine」選項勾除,因為本範例採用GWT內建的開發模式引擎,後續在介紹如何使用Google App Engine。

clip_image002

新增完專案後,於IDE畫面左方可看到本專案產生的一些預設目錄,SRC資料夾為本專案的Source Code資料夾,包含參數設定檔及Client端與Server端的Service程式目錄。War資料夾為程式編譯完成作為佈署的程式目錄,包含預設的HelloWord.css及HelloWord.html及相關的設定檔。

clip_image004

於開發畫面中點選「Run」按鈕,畫面跳出GWT 開發模式引擎,點選「Launch Default Browser」按鈕,畫面啟動預設的瀏覽器。

clip_image006

於瀏覽器畫面中我們可以看到GWT預設的畫面結構,有一個名稱輸入框及按鈕,點擊「Send」按鈕,畫面跳出視窗回傳使用者輸入的名稱及使用者預設的瀏覽器資訊。

clip_image008

clip_image010

以上簡單範例完全靠手動設定即可完成,整合流程其實已經包含了Client端與Server端之間的訊息呼叫,下一篇將詳細介紹GWT的參數設定及如何撰寫客製化的程式。

小小工程師