細心!用心!耐心!

          吾非文人,乃市井一俗人也,讀百卷書,跨江河千里,故申城一游; 一兩滴辛酸,三四年學(xué)業(yè),五六點粗墨,七八筆買賣,九十道人情。

          BlogJava 聯(lián)系 聚合 管理
            1 Posts :: 196 Stories :: 10 Comments :: 0 Trackbacks

          面向 Java 開發(fā)人員的 Ajax: Google Web Toolkit 入門

          developerWorks
          文檔選項
          將此頁作為電子郵件發(fā)送

          將此頁作為電子郵件發(fā)送

          未顯示需要 JavaScript 的文檔選項


          拓展 Tomcat 應(yīng)用

          下載 IBM 開源 J2EE 應(yīng)用服務(wù)器 WAS CE 新版本 V1.1


          級別: 初級

          肖 菁, 唯 J 族創(chuàng)始人

          2006 年 7 月 03 日

          Ajax 被用于創(chuàng)建更加動態(tài)和交互性更好的 Web 應(yīng)用程序。Google Web Toolkit (簡稱GWT) 是 Google 推出的 Ajax 應(yīng)用開發(fā)包,GWT 支持開發(fā)者使用Java 語言開發(fā) Ajax 應(yīng)用。本文中作者將介紹如何使用 GWT 開發(fā) Ajax 應(yīng)用的基本方法和步驟。

          Ajax簡介

          Ajax是 Asynchronous JavaScript and XML(以及 DHTML 等)的縮寫,由XHTML、CSS、JavaScript、XMLHttpRequest、XML等技術(shù)組合而成,是當前Web應(yīng)用開發(fā)領(lǐng)域的熱門技術(shù),用于創(chuàng)建更加動態(tài)和交互性更好的Web應(yīng)用程序,提升用戶的瀏覽體驗。

          Ajax的核心是JavaScript對象XmlHttpRequest。XmlHttpRequest處理所有服務(wù)器通信的對象,是一種支持異步請求的技術(shù)。簡而言之,XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng),而不阻塞用戶。

          Ajax并不是本文的中心關(guān)注點,因此這里不再贅述,請大家訪問參考資源區(qū)的相關(guān)鏈接,了解更多關(guān)于Ajax技術(shù)和應(yīng)用方面的知識。





          回頁首


          為什么選擇GWT?

          眾所周知,即使對于Ajax技術(shù)非常熟悉的開發(fā)者而言,Ajax應(yīng)用的開發(fā)和調(diào)試過程也不是一件容易的事情,更困難的是,到目前為止,一直沒有出現(xiàn)合適的開發(fā)工具能夠支持Ajax應(yīng)用的開發(fā)和調(diào)試。

          與此相反的是,Java語言--企業(yè)應(yīng)用開發(fā)的主流語言-的開發(fā)和調(diào)試過程卻因為有各種各樣開發(fā)工具的支持而簡單的多,而且這樣的開發(fā)工具我們可以免費獲得,比如Eclipse、NetBeans。

          如果能夠應(yīng)用Java語言開發(fā)Ajax,Ajax應(yīng)用開發(fā)的最大難題-開發(fā)工具的缺失-就將迎刃而解。這種情況下,我們就可以既充分利用Java語言的開發(fā)優(yōu)勢降低Ajax應(yīng)用開發(fā)的難度,加快Ajax應(yīng)用的開發(fā)速度,為Ajax的大規(guī)模應(yīng)用創(chuàng)造可能,又可以充分發(fā)揮Ajax技術(shù)的優(yōu)勢,創(chuàng)建更加動態(tài)和交互性更好的Web應(yīng)用程序,提升用戶的瀏覽體驗。

          Google Web Toolkit(簡稱GWT)的出現(xiàn)為我們提供了這種可能。GWT是Google推出的Ajax應(yīng)用開發(fā)包,支持開發(fā)者使用Java語言開發(fā)Ajax應(yīng)用。GWT框架本身是開源的,但是GWT中的開發(fā)工具僅僅提供開發(fā)用License,不允許分發(fā)。

          GWT提供了一組基于Java語言的開發(fā)包,這個開發(fā)包的設(shè)計參考Java AWT包設(shè)計,類命名規(guī)則、接口設(shè)計、事件監(jiān)聽等都和AWT非常類似。熟悉Java AWT的開發(fā)者不需要花費多大的力氣就能夠快速的理解GWT開發(fā)工具包,將更多地時間投入到GWT應(yīng)用的開發(fā)過程中。

          開發(fā)出來的Java應(yīng)用將由GWT開發(fā)包提供的編譯工具編譯后聲生成對應(yīng)的、應(yīng)用了Ajax技術(shù)的Web應(yīng)用,Java應(yīng)用中出現(xiàn)的、和服務(wù)器之間的交互動作被自動生成的異步調(diào)用代碼所代替。





          回頁首


          GWT特性

          GWT除了支持將應(yīng)用Java語言開發(fā)的應(yīng)用轉(zhuǎn)化為Ajax應(yīng)用,同時提供了更多的高級特性,下面是這些特性的簡單描述。

          1. GWT編譯器

          GWT編譯器是GWT的核心,負責完成將Java代碼翻譯很Ajax內(nèi)容的工作。GWT編譯器能夠翻譯Java語言的大部分特性。包括支持Java語言中的基本類型、違例處理等,支持java.lang包和java.util包中的絕大部分類和接口,支持正則表達式和序列化。

          2. 跨平臺支持

          如果你使用GWT中提供的顯示組件(比如Button)和組裝組件(比如VerticalPanel),GWT編譯生成的Ajax應(yīng)用能夠支持大部分的瀏覽器和操作系統(tǒng),比如Internet Explorer、Firefox等,也能夠支持Linux、Windows等不同操作系統(tǒng)。這是因為GWT最大限度的將這些控件翻譯成瀏覽器內(nèi)置的類型。比如Button類編譯后生成的是標準HTML:<input type="button">。

          GWT建議使用CSS修飾頁面元素的顯示效果。GWT的類中很少提供訪問頁面元素樣式屬性的方法,我們可以直接在CSS文件中通過對應(yīng)的樣式名稱來設(shè)置頁面元素的默認顯示效果。比如使用 .gwt-Button { font-size: 150%; } 使用Button元素的默認顯示效果。

          3. 宿主模式(Hosted Mode)

          宿主模式是指我們和沒有轉(zhuǎn)換為Ajax應(yīng)用的GWT應(yīng)用交互的狀態(tài)。當我們開發(fā)和調(diào)試時,我們就一直處在宿主模式下。在這種情況下,Java虛擬機使用GWT內(nèi)置的瀏覽器運行GWT應(yīng)用編譯后的class內(nèi)容,因此能夠提供"編碼、測試、調(diào)試"過程的最佳速度。

          我們可以運行com.google.gwt.dev.GWTShell啟動宿主模式。

          4. Web模式(Web Mode)

          Web模式是指已經(jīng)成功轉(zhuǎn)化為Ajax應(yīng)用的狀態(tài),這種狀態(tài)下,我們已經(jīng)開始通過Web方式來訪問Ajax應(yīng)用了。

          在Web模式下運行時,不再需要GWT工具包或者JVM的支持。

          5. 命令行工具

          GWT工具包中提供了幾個非常適用的小工具來幫助我們更快的建立GWT應(yīng)用開發(fā)環(huán)境:projectCreator、applicationCreator、junitCreator。

          • projectCreator
            創(chuàng)建在Eclipse中開發(fā)GWT應(yīng)用所需要的項目基本文件和可選的Ant buildfile文件。
          • applicationCreator
            applicationCreator命令用于創(chuàng)建基本的HelloWorld!應(yīng)用和GWT應(yīng)用開發(fā)環(huán)境。
          • junitCreator
            生成junti測試代碼。

          通過上面的內(nèi)容,我們已經(jīng)了解了GWT工具集工作的基本原理和主要特性。有些迫不及待了吧,那么就請隨我一起進入GWT應(yīng)用開發(fā)的過程吧,享受應(yīng)用Java語言開發(fā)Ajax應(yīng)用帶來的簡單和便利。

          本文中所有的環(huán)境準備、實例開發(fā)和說明均針對Windows操作平臺,如果使用其他的操作系統(tǒng),請根據(jù)實際情況進行適當?shù)恼{(diào)整。





          回頁首


          環(huán)境準備

          1、 下載和安裝JDK1.4.X

          GWT工具包的編譯需要JDK支持,因此在安裝GWT工具包之前請下載和安裝合適的JDK。GWT工具支持Java語言1.4版本或者以下版本,因此JDK版本選擇JDK1.4.X是比較合適的,不需要采用最新的JDK5.0或者更高版本。

          請訪問java.sun.com網(wǎng)站上下載安裝版本,下載后安裝到C:/jdk目錄下,本書中的后續(xù)內(nèi)容中將使用%JAVA_HOME%變量來引用這個目錄。

          您可以根據(jù)實際情況將JDK安裝到任意目錄下。但是在運行本文中例子的時候,請記住將對應(yīng)的%JAVA_HOME%變量替換為您的實際安裝目錄。

          2、 下載和安裝GWT

          請訪問http://code.google.com/webtoolkit/下載GWT的最新版本,將下載的壓縮文件解壓縮到C:/GWT目錄下。本書中的后續(xù)內(nèi)容中將使用%GWT_HOME%變量來引用這個目錄。

          GWT工具包支持不同的操作系統(tǒng),請根據(jù)自己的操作系統(tǒng)選擇合適的安裝包。

          您可以根據(jù)實際情況將GWT安裝到任意目錄下。但是在運行本文中例子的時候,請記住將對應(yīng)的%GWT_HOME%變量替換為您的實際安裝目錄。





          回頁首


          第一個例子-Hello World!

          下面的內(nèi)容中我們將介紹如何使用GWT工具集來完成第一個GWT的例子-"Hello World!",并且將使用GWT編譯及將他轉(zhuǎn)化為Ajax應(yīng)用,在瀏覽器中完成測試。

          我們要完成的例子要實現(xiàn)的功能包括:

          1、 在頁面上顯示一個按鈕

          2、 點擊該按鈕,默認情況下,我們將在按鈕后面緊跟著顯示字符串"Hello World!"。

          3、 如果點擊按鈕時,"Hello World!"字符串已經(jīng)顯示在瀏覽器中,我們要將他隱藏起來。我們現(xiàn)在開始使用GWT工具集完成"Hello World!"例子的開發(fā),下面的步驟是完成"Hello World!"例子開發(fā)環(huán)境配置、應(yīng)用開發(fā)、編譯的基本步驟,同樣適用于其他GWT應(yīng)用的開發(fā),只是根據(jù)實際情況可能有增減。

          1、 創(chuàng)建GWT應(yīng)用開發(fā)環(huán)境

          從上面的GWT特性部分我們知道,GWT工具包中提供的applicationCreator命令行工具可以幫助我們創(chuàng)建GWT應(yīng)用開發(fā)所需要的環(huán)境,因此我們可以直接使用applicationCreator幫助我們完成這項工作。

          打開命令行工具,進入C:/根目錄下,執(zhí)行"mkdi"命令創(chuàng)建新的文件目錄HelloWorld。


          C:\> mkdir HelloWorld
                                  

          執(zhí)行下面的命令將%JAVA_HOME%\bin目錄和%GWT_HOME%目錄加入到PATH路徑中。


          C:\>set path=%JAVA_HOME%\bin;%GWT_HOME%
                                  

          請將命令行中的%JAVA_HOME%替換為實際環(huán)境中JDK的安裝目錄,將%GWT_HOME%替換為GWT工具包的安裝目錄。

          進入新創(chuàng)建的HelloWorld目錄,然后運行applicationCreator命令創(chuàng)建GWT應(yīng)用開發(fā)環(huán)境。

          applicationCreator.cmd命令支持的語法如下。

          ApplicationCreator [-eclipse projectName] [-out dir] [-overwrite] [-ignore] className 其中最重要的一個參數(shù)是classname,也就是我們創(chuàng)建的GWT應(yīng)用中的主Java類,我們這里選擇使用org.vivianj.gwt.client.HelloWorld。


          C:\HelloWorld>applicationCreator.cmd org.vivianj.gwt.client.HelloWorld
                                  

          根據(jù)GWT工具包的默認規(guī)則,GWT應(yīng)用中的主Java類報名的最后一段必須是client。也就是說,只有xxx.client.Xxxx這樣命名的Java類才能被識別為正確的GWT應(yīng)用主類。

          ApplicationCreator工具運行的時候,屏幕上會打印如下內(nèi)容。


          Created directory C:\HelloWorld\src
                                  Created directory C:\HelloWorld\src\org\vivianj\gwt
                                  Created directory C:\HelloWorld\src\org\vivianj\gwt\client
                                  Created directory C:\HelloWorld\src\org\vivianj\gwt\public
                                  Created file C:\HelloWorld\src\org\vivianj\gwt\HelloWorld.gwt.xml
                                  Created file C:\HelloWorld\src\org\vivianj\gwt\public\HelloWorld.html
                                  Created file C:\HelloWorld\src\org\vivianj\gwt\client\HelloWorld.java
                                  Created file C:\HelloWorld\HelloWorld-shell.cmd
                                  Created file C:\HelloWorld\HelloWorld-compile.cmd
                                  

          2、 開發(fā)"Hello World!"例子

          使用ApplicationCreator工具的時候,ApplicationCreator工具其實已經(jīng)幫我們生成了符合Hello World!例子要求的全部內(nèi)容。為了不打斷第一個例子的演示過程,我們先簡單的了解一下ApplicationCreator工具的生成內(nèi)容。我們將在將在測試過程后面做出更加詳細的分析。

          圖1中顯示了ApplicationCreator工具執(zhí)行后生成的目錄結(jié)構(gòu)。


          圖1 GWT應(yīng)用開發(fā)環(huán)境
          圖1  GWT應(yīng)用開發(fā)環(huán)境

          圖1中的src\org\vivianj\gwt\client目錄中的HelloWorld.java是GWT應(yīng)用的主類;src\org\vivianj\gwt\public目錄中的HelloWorld.html文件是例子的默認頁面;src\org\vivianj\gwt目錄下的HelloWorld.gwt.xml是GWT應(yīng)用的配置文件,提供GWT應(yīng)用中頁面和主類的配置信息;根目錄下的HelloWorld-compile.cmd文件用于提供將該GWT應(yīng)用編譯成Ajax的命令;根目錄下的HelloWorld-shell.cmd文件用于啟動宿主模式(Hosted Mode),方便測試GWT應(yīng)用。

          3、 在宿主模式下啟動"Hello World!"例子

          我們可以直接在命令行中執(zhí)行HelloWorld-shell.cmd來啟動宿主模式(Hosted Mode),運行新創(chuàng)建的"Hello World!"例子。


          C:\HelloWorld>HelloWorld-shell.cmd
                                  

          這個命令將啟動兩個可視化界面:Google Web Toolkit Development Shell(見圖2)和GWT內(nèi)置的GWT應(yīng)用瀏覽器(見圖3),GWT應(yīng)用瀏覽器中將顯示"Hello World!"例子的初始界面,如果我們點擊界面上的"Click Me"按鈕,按鈕后面將會顯示"Hello World!"字符串(見圖4),如果再次單擊頁面上的"Click Me"按鈕,按鈕后面的"Hello World!"字符串會消失。


          圖2 Google Web Toolkit Development Shell運行界面
          圖2  Google Web Toolkit Development Shell運行界面

          圖3 "Hello World!"例子初始運行界面
          圖3  Hello World!例子初始運行界面

          圖4 "Hello World!"例子-單擊"Clieck Me"按鈕后的界面
          圖4  Hello World!例子-單擊Clieck Me按鈕后的界面

          4、 編譯"Hello World!"例子

          要將GWT應(yīng)用編譯成Ajax應(yīng)用,我們可以執(zhí)行HelloWorld-compile.cmd。


          C:\HelloWorld>HelloWorld-compile.cmd
                                  

          命令運行時,界面上將會顯示下面的內(nèi)容。


          Output will be written into C:\HelloWorld\www\org.vivianj.gwt.HelloWorld
                                  Copying all files found on public path
                                  Compilation succeeded
                                  

          其中的第一行顯示生成的Ajax應(yīng)用位于C:\HelloWorld\www\org.vivianj.gwt.HelloWorld目錄下。


          圖5 "Hello World!"例子編譯后的目錄結(jié)構(gòu)
          圖5  Hello World!例子編譯后的目錄結(jié)構(gòu)

          從上面的圖中我們可以看到,新生成的www目錄下有一個名為org.vivianj.gwt.HelloWorld的目錄,它的命名規(guī)則是GWT主類全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."。

          org.vivianj.gwt.HelloWorld目錄下的HelloWorld.html文件就是"Hello World!"例子對應(yīng)的頁面,以.cache.html后綴結(jié)尾的文件就是"Hello World!"例子中對應(yīng)的Ajax代碼部分,而gwt.js文件則是GWT提供的、Ajax代碼中需要用到的JavaScript公共函數(shù)。其他還有些輔助文件。

          5、 Web模式下測試"Hello World!"例子

          運行HelloWorld-compile.cmd后,GWT應(yīng)用就已經(jīng)被編譯成Ajax應(yīng)用了,不再依賴于JDK和GWT環(huán)境,而僅僅依賴于瀏覽器。

          我們打開IE瀏覽器,打開C:\HelloWorld\www\org.vivianj.gwt.HelloWorld\HelloWorld.html文件,就可以看到"Hello World!"例子在Web模式下的運行效果(見圖6),單擊頁面上的"Click Me"按鈕,按鈕后面會出現(xiàn)"Hello World!"字符串(見圖7),如果再次單擊頁面上的"Click Me"按鈕,按鈕后面的"Hello World!"字符串會消失。


          圖6 Web模式下運行"HelloWorld!"例子的默認效果
          圖6  Web模式下運行 HelloWorld!例子的默認效果

          圖7 Web模式下運行"HelloWorld!"例子-單擊"Click Me"按鈕后的效果
          圖7  Web模式下運行 HelloWorld!例子-單擊 Click Me按鈕后的效果




          回頁首


          實例詳細分析

          上面的步驟中,我們已經(jīng)完成第一個GWT應(yīng)用的編譯和測試,下面我們來詳細的介紹一下GWT應(yīng)用開發(fā)過程中涉及的幾個文件:顯示頁面HelloWorld.html、主類HelloWorld和配置文件HelloWorld.gwt.xml。

          1. 顯示頁面HelloWorld.html

          GWT應(yīng)用中的HTML內(nèi)容必須存放在public目錄下,public目錄的全路徑是"org\vivianj\gwt\ublic",是將主類HelloWorld的包名"org.vivianj.gwt.client"中的client替換為"public"后形成的目錄結(jié)構(gòu)。

          我們將主要介紹HelloWorld.html中和GWT相關(guān)的內(nèi)容,HelloWorld.html文件的全部內(nèi)容見清單1。


          24.    <meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>
                                  

          在HelloWorld.html文件的第24行,我們使用meta標簽指定了本頁面和GWT模塊" org.vivianj.gwt.HelloWorld"之間的聯(lián)系,meta標簽的name屬性是不變的,而content屬性則是GWT主類全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."后的結(jié)果。


          40.	    <script language="javascript" src="gwt.js"></script>
                                  

          在HelloWorld.html文件的第40行,我們使用script標記引入GWT工具提供的默認函數(shù)庫。根據(jù)HTML語言的規(guī)定,我們可以選擇在<head></head>之間加入這行代碼,也可以選擇在<body></body>之間加入這段代碼。GWT建議在<head></head>之間加入這行代碼,以便獲得稍微快一些的起動速度。


          56.	<td id="slot1"></td><td id="slot2"></td>
                                  

          在HelloWorld.html文件的第56行,我們使用td標簽定義了兩個相鄰的表格單元格,他們分別命名為"slot1"和"slot2",根據(jù)"HelloWorld!"例子的要求,名為"slot1"的單元格中應(yīng)該顯示按鈕,而名為"slot2"的單元格中則根據(jù)情況決定顯示"HelloWorld!"字符串或者不顯示任何內(nèi)容。

          我們將在主類HelloWorld.java的源代碼中使用RootPanel.get("slot1")來獲得對該單元格的引用,請參考下面的"主類HelloWorld"部分的說明。


          43.	<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
                                  

          在HelloWorld.html的第43行,我們使用iframe標簽來設(shè)置當前頁支持歷史功能,iframe的屬性必須和上面的內(nèi)容保持一致,否則將不會起到任何效果。


          清單1 src\org\vivianj\gwt\public\public\HelloWorld.html
          1.	<html>
                                  2.		<head>
                                  3.
                                  4.			<!--                                           -->
                                  5.			<!-- Any title is fine                         -->
                                  6.			<!--                                           -->
                                  7.			<title>Wrapper HTML for HelloWorld</title>
                                  8.
                                  9.			<!--                                           -->
                                  10.			<!-- Use normal html, such as style            -->
                                  11.			<!--                                           -->
                                  12.			<style>
                                  13.				body,td,a,div,.p{font-family:arial,sans-serif}
                                  14.				div,td{color:#000000}
                                  15.				a:link,.w,.w a:link{color:#0000cc}
                                  16.				a:visited{color:#551a8b}
                                  17.				a:active{color:#ff0000}
                                  18.			</style>
                                  19.
                                  20.			<!--                                           -->
                                  21.			<!-- The module reference below is the link    -->
                                  22.			<!-- between html and your Web Toolkit module  -->
                                  23.			<!--                                           -->
                                  24.			<meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>
                                  25.
                                  26.		</head>
                                  27.
                                  28.		<!--                                           -->
                                  29.		<!-- The body can have arbitrary html, or      -->
                                  30.		<!-- you can leave the body empty if you want  -->
                                  31.		<!-- to create a completely dynamic ui         -->
                                  32.		<!--                                           -->
                                  33.		<body>
                                  34.
                                  35.			<!--                                            -->
                                  36.			<!-- This script is required bootstrap stuff.   -->
                                  37.			<!-- You can put it in the HEAD, but startup    -->
                                  38.			<!-- is slightly faster if you include it here. -->
                                  39.			<!--                                            -->
                                  40.			<script language="javascript" src="gwt.js"></script>
                                  41.
                                  42.			<!-- OPTIONAL: include this if you want history support -->
                                  43.			<iframe id="__gwt_historyFrame"
                                  style="width:0;height:0;border:0"></iframe>
                                  44.
                                  45.			<h1>HelloWorld</h1>
                                  46.
                                  47.			<p>
                                  48.			This is an example of a host page for the HelloWorld application.
                                  49.			You can attach a Web Toolkit module to any HTML page you like,
                                  50.			making it easy to add bits of AJAX functionality to existing
                                  pages
                                  51.			without starting from scratch.
                                  52.			</p>
                                  53.
                                  54.			<table align=center>
                                  55.				<tr>
                                  56.					<td id="slot1"></td><td
                                  id="slot2"></td>
                                  57.				</tr>
                                  58.			</table>
                                  59.		</body>
                                  60.	</html>
                                  

          2. 主類HelloWorld

          主類HelloWorld必須繼承自com.google.gwt.core.client.EntryPoint類,并且覆蓋其public void onModuleLoad()方法。

          在onModuleLoad()方法中,我們使用GWT中提供的默認顯示組件(比如Button)和組裝組件(比如VerticalPanel)來設(shè)計需要顯示的界面,所有這些組件都位于com.google.gwt.user.client.ui包下面。這些組件的命名規(guī)則和Java AWT的命名規(guī)則基本類似,使用方式也和AWT的基本一致,不過GWT中提供了不少的新組建可供選擇,比如可以直接用VerticalPanel來實現(xiàn)垂直方向的布局管理。

          HelloWorld.java中的19和20行,就聲明了Button和Label兩個顯示組件。


          19.    final Button button = new Button("Click me");
                                  20.    final Label label = new Label();
                                  

          onModuleLoad()方法中,我們需要把生成的顯示組件或者組裝組建加入到顯示頁面的對應(yīng)顯示區(qū)域。首先,我們需要在頁面上使用id屬性為顯示區(qū)域指定唯一的名稱(參見清單1中的56行)。com.google.gwt.user.client.ui.RootPanel的靜態(tài)方法get可以根據(jù)傳入的字符串參數(shù)(參數(shù)值就是顯示區(qū)域的id屬性)獲取頁面上對應(yīng)的顯示區(qū)域。

          HelloWorld.java的36、37行,就使用了RootPanel的get方法分別獲得頁面上id為"slot1"、"slot2"的顯示區(qū)域,然后調(diào)用add方法將生成的Button和Label對象加入到顯示區(qū)域中。


          36.    RootPanel.get("slot1").add(button);
                                  37.    RootPanel.get("slot2").add(label);
                                  

          Ajax最重要的功能就是為用戶提供更好的交互體驗,GWT中使用和AWT中相同的事件監(jiān)聽機制完成客戶端事件監(jiān)聽,GWT中支持的Listener接口包括ChangeListener、ClickListener等。我們可以通過各種各樣的Listener接口獲得用戶界面上所發(fā)生的動作,通過處理這些動作來完成對應(yīng)業(yè)務(wù)邏輯。

          HelloWorld.java中的第22行~29行的內(nèi)容就實現(xiàn)了一個ClickListender接口,并且提供了對應(yīng)的onClick方法實現(xiàn),用于處理按鈕點擊后的業(yè)務(wù)邏輯(判斷是否需要顯示"Hello World!"字符串),然后調(diào)用Button對象的addClickListener方法增加監(jiān)聽器。


          22.    button.addClickListener(new ClickListener() {
                                  23.          public void onClick(Widget sender) {
                                  24.            if (label.getText().equals(""))
                                  25.              label.setText("Hello World!");
                                  26.            else
                                  27.              label.setText("");
                                  28.          }
                                  29.    });
                                  

          HelloWorld類的全部源代碼內(nèi)容見清單2。


          清單2 src\org\vivianj\gwt\client\HelloWorld.java
          1.	package org.vivianj.gwt.client;
                                  2.
                                  3.	import com.google.gwt.core.client.EntryPoint;
                                  4.	import com.google.gwt.user.client.ui.Button;
                                  5.	import com.google.gwt.user.client.ui.ClickListener;
                                  6.	import com.google.gwt.user.client.ui.Label;
                                  7.	import com.google.gwt.user.client.ui.RootPanel;
                                  8.	import com.google.gwt.user.client.ui.Widget;
                                  9.
                                  10.	/**
                                  11.	 * Entry point classes define <code>onModuleLoad()</code>.
                                  12.	 */
                                  13.	public class HelloWorld implements EntryPoint {
                                  14.
                                  15.	  /**
                                  16.	   * This is the entry point method.
                                  17.	   */
                                  18.	  public void onModuleLoad() {
                                  19.	    final Button button = new Button("Click me");
                                  20.	    final Label label = new Label();
                                  21.
                                  22.	    button.addClickListener(new ClickListener() {
                                  23.	      public void onClick(Widget sender) {
                                  24.	        if (label.getText().equals(""))
                                  25.	          label.setText("Hello World!");
                                  26.	        else
                                  27.	          label.setText("");
                                  28.	      }
                                  29.	    });
                                  30.
                                  31.	    // Assume that the host HTML has elements defined whose
                                  32.	    // IDs are "slot1", "slot2".  In a real app, you probably would not want
                                  33.	    // to hard-code IDs.  Instead, you could, for example, search for all
                                  34.	    // elements with a particular CSS class and replace them with widgets.
                                  35.	    //
                                  36.	    RootPanel.get("slot1").add(button);
                                  37.	    RootPanel.get("slot2").add(label);
                                  38.	  }
                                  39.	}
                                  

          3. 配置文件HelloWorld.gwt.xml

          配置文件中包括兩個元素。Inherits元素地設(shè)置GWT應(yīng)用的繼承信息,而entry-point元素的class屬性則用于設(shè)置設(shè)置GWT應(yīng)用的主類。


          清單3 src\org\vivianj\gwt\HelloWorld.gwt.xml
          1.	<module>
                                  2.
                                  3.		<!-- Inherit the core Web Toolkit stuff.                  -->
                                  4.		<inherits name='com.google.gwt.user.User'/>
                                  5.
                                  6.		<!-- Specify the app entry point class.                   -->
                                  7.		<entry-point class='org.vivianj.gwt.client.HelloWorld'/>
                                  8.
                                  9.	</module>
                                  





          回頁首


          結(jié)束語

          Ajax是當前熱門的Web應(yīng)用開發(fā)技術(shù),Java是企業(yè)應(yīng)用開發(fā)中的主流技術(shù),GWT框架將這兩種技術(shù)合二為一,是我們能夠應(yīng)用Java語言來開發(fā)Ajax,在保留Ajax技術(shù)的優(yōu)點基礎(chǔ)上,解決了Ajax應(yīng)用開發(fā)、調(diào)試困難的缺點。

          本文中介紹了GWT的基本知識、主要特性,提供了"HelloWorld!"例子說明使用Java和GWT框架開發(fā)Ajax應(yīng)用的開發(fā)、編譯、測試過程,并且通過對"HelloWorld!"例子中涉及文件的分析,講解了使用GWT框架開發(fā)Ajax應(yīng)用的技術(shù)細節(jié)和約束條件。





          回頁首


          下載資源



          參考資料

          學(xué)習(xí)

          獲得產(chǎn)品和技術(shù)

          討論


          關(guān)于作者

           

          肖菁,唯 J 族創(chuàng)始人,開源項目BuildFileDesignerV-Security 創(chuàng)始人,Open Source 推廣人,主要研究 J2EE 編程技術(shù)、Web Service 技術(shù)以及他們在 WebSphere、WebLogic、 Apache 平臺上的實現(xiàn),擁有 IBM 的 Developing With Websphere Studio 證書。

          posted on 2007-04-12 10:46 張金鵬 閱讀(1656) 評論(0)  編輯  收藏 所屬分類: AJAX技術(shù)
          主站蜘蛛池模板: 丰县| 辽源市| 和静县| 胶南市| 万全县| 湘乡市| 昂仁县| 新竹县| 宜兰县| 东乡族自治县| 荆门市| 仁寿县| 安阳市| 朔州市| 镇坪县| 瑞金市| 余江县| 青河县| 灵山县| 南皮县| 攀枝花市| 青岛市| 璧山县| 泽普县| 灌南县| 贺州市| 嘉定区| 东山县| 昭苏县| 河津市| 凌云县| 普安县| 剑川县| 阜平县| 和龙市| 泗水县| 聊城市| 徐州市| 乌拉特中旗| 深圳市| 濉溪县|