1、GWT入門(mén)介紹,1,GWT技術(shù)介紹,GiftCJW BUAA-ACT 2007-3-19,-如何使用Java語(yǔ)言開(kāi)發(fā)Ajax應(yīng)用,GWT入門(mén)介紹,2,什么是Ajax,Ajax是 Asynchronous JavaScript and XML（以及 DHTML 等）的縮寫(xiě)，由XHTML、CSS、JavaScript、XMLHttpRequest、XML等技術(shù)組合而成，是當(dāng)前Web應(yīng)用開(kāi)發(fā)領(lǐng)域的熱門(mén)技術(shù)，用于創(chuàng)建更加動(dòng)態(tài)和交互性更好的Web應(yīng)用程序，提升用戶(hù)的瀏覽體驗(yàn)。 Ajax的核心是JavaScript對(duì)象XmlHttpRequest。XmlHttpRequest處理所有服務(wù)器通信的對(duì)象，是一

2、種支持異步請(qǐng)求的技術(shù)。 XmlHttpRequest可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶(hù)。,GWT入門(mén)介紹,3,困難在哪,如何解決,因?yàn)镴avaScript不易調(diào)試,所以編寫(xiě)AJAX應(yīng)用程序往往讓人頭痛。 Google Web Toolkit (GWT) 是一個(gè)使用Java語(yǔ)言 開(kāi)發(fā)Ajax應(yīng)用的開(kāi)發(fā)框架。在開(kāi)發(fā)和調(diào)試AJAX 應(yīng)用程序時(shí)，和其它的Java程序沒(méi)有任何區(qū)別，選用什么樣的Java 開(kāi)發(fā)工具完全由自己的喜好所定。 開(kāi)發(fā)完畢以后要部署到應(yīng)用服務(wù)器中，GWT自帶的編譯器將Java應(yīng)用程序編譯成與瀏覽器兼容的JavaScript和HTML頁(yè)面。,GWT入門(mén)

3、介紹,4,GWT的特點(diǎn),動(dòng)態(tài)，可重用的UI組件 簡(jiǎn)單的RPC調(diào)用 方便的調(diào)試功能 瀏覽器兼容性（IE，Opera，F(xiàn)irefox） 可擴(kuò)展性（JSNI）,GWT入門(mén)介紹,5,GWT四大組成,一個(gè) Java-to-JavaScript compiler 一個(gè) “hosted” web 瀏覽器, 兩套 Java 類(lèi)庫(kù),GWT入門(mén)介紹,6,兩種模式,HostMode（宿主模式）：未編譯前，在GWT提供的Host Mode的瀏覽器中查看。可以用于調(diào)試GWT程序，會(huì)打出異常位置。 WebMode：編譯后，在瀏覽器中查看。,GWT入門(mén)介紹,7,如何開(kāi)發(fā)GWT應(yīng)用,a.將用到的GWT庫(kù)添加到IDE里，在ID

4、E中 用Java語(yǔ)言編寫(xiě)和調(diào)試一個(gè)應(yīng)用程序。 b.使用GWT自帶的Java2JavaScript編譯器將寫(xiě)出來(lái)的代碼編譯成JavaScript和HTML文件。 c.將編譯后的代碼發(fā)布到Web Server上。 d.檢測(cè)是否滿(mǎn)足主流的瀏覽器。（一般沒(méi)有問(wèn)題）,GWT入門(mén)介紹,8,在Eclipse下開(kāi)發(fā)-第一步-創(chuàng)建工程,1 創(chuàng)建Eclipse工程 第一步使用： projectCreator eclipse 工程名稱(chēng) 比如： projectCreator -eclipse DemoProject 第二步使用：applicationCreator -eclipse 工程名稱(chēng) 類(lèi)包名稱(chēng).client.

5、類(lèi)名 比如：applicationCreator -eclipse MyProject org.buaa.client.DemoApplication,GWT入門(mén)介紹,9,Eclipse下開(kāi)發(fā)-第二步-導(dǎo)入Eclipse,GWT入門(mén)介紹,10,在Eclipse下開(kāi)發(fā)-第二步-修改入口類(lèi)，添加相應(yīng)代碼,每一個(gè)GWT程序都有一個(gè)入口點(diǎn)，必須繼承自EntryPoint接口，實(shí)現(xiàn)OnModuleLoad方法 其事件觸發(fā)模式是類(lèi)似于AWT當(dāng)中的處理模式。,事件 觸發(fā),入口 點(diǎn),GWT入門(mén)介紹,11,在Eclipse下開(kāi)發(fā)-第三步-編譯,點(diǎn)擊Test-Shell.cmd可以開(kāi)啟Hosted Mode ，并

6、察看運(yùn)行結(jié)果 或者點(diǎn)擊Test-Compile.cmd，可以開(kāi)啟Web Mode，將代碼解析成為javascript，并可以在Web瀏覽器中察看。,GWT入門(mén)介紹,12,在Eclipse下開(kāi)發(fā)-第四步-部署和執(zhí)行,部署到Tomcat等應(yīng)用服務(wù)器當(dāng)中。,GWT入門(mén)介紹,13,GWT類(lèi)庫(kù)總覽,com.google.gwt.core.client 用于客戶(hù)端的GWT基本代碼 com.google.gwt.core.ext 用于擴(kuò)展GWT編譯器的類(lèi). com.google.gwt.core.ext.typeinfo 為支持自動(dòng)生成功能的類(lèi)庫(kù) com.google.gwt.http.client 提供對(duì)

7、HTTP的請(qǐng)求響應(yīng)處理類(lèi) com.google.gwt.i18n.client 國(guó)際化 com.google.gwt.json.client 解析和創(chuàng)建Json類(lèi)型的類(lèi)庫(kù) com.google.gwt.junit.client Junit測(cè)試 com.google.gwt.user.client 客戶(hù)端使用的基本GWT接口. com.google.gwt.user.client.rpc客戶(hù)端為使用RPC功能的GWT接口. com.google.gwt.user.client.ui Widgets, Panels, 以及其他的UI接口 com.google.gwt.user.server.rpc

8、 服務(wù)端為了實(shí)現(xiàn)RPC調(diào)用實(shí)現(xiàn)的接口. com.google.gwt.xml.client XML的解析和使用,GWT入門(mén)介紹,14,GWT類(lèi)庫(kù)-UI,在UI類(lèi)庫(kù)中，GWT提供了若干種widgets 和panels。所有的類(lèi)都繼承自widget，并被加入到panel中被顯示。 Panels 包括DockPanel, HorizontalPanel, 和RootPanel等 Widgets 包括Composite, FileUpload, FocusWidget, Frame, Hidden, Hyperlink, Image, Label, MenuBar, Panel和 Tree等等,GWT

9、入門(mén)介紹,15,GWT類(lèi)庫(kù)-UI組件,GWT入門(mén)介紹,16,GWT類(lèi)庫(kù)-RPC,GWT入門(mén)介紹,17,GWT類(lèi)庫(kù)-RPC,客戶(hù)端和服務(wù)端進(jìn)行交互。 在服務(wù)端加入對(duì)RPC服務(wù)的處理。 在客戶(hù)端的AsyncCallback接口實(shí)現(xiàn)中對(duì)結(jié)果進(jìn)行處理。（異步處理） GWT自動(dòng)的對(duì)各種數(shù)據(jù)類(lèi)型進(jìn)行序列化和反序列化處理。,GWT入門(mén)介紹,18,GWT類(lèi)庫(kù)-HTTP,支持POST和GET兩種HTTP方法。 例子：GET的使用 HTTPRequest.asyncGet(customerRecord.xml, new ResponseTextHandler() public void onCompletion(

10、String responseText) / In the real world, this text would come as a RPC response. This / technique is great for testing and samples though! renderXML(responseText); ,GWT入門(mén)介紹,19,GWT類(lèi)庫(kù)-DOM的處理,Package com.google.gwt.xml.client 包括對(duì)XML類(lèi)型的解析處理類(lèi) Document doc = XMLParser.parse(string); XMLParser.removeWhite

11、space(doc); 對(duì)XML的使用 Node,Element.etc.,GWT入門(mén)介紹,20,GWT類(lèi)庫(kù)-JSON的支持,JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。易于人閱讀和編寫(xiě)。同時(shí)也易于機(jī)器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個(gè)子集。 JSON采用完全獨(dú)立于語(yǔ)言的文本格式，但是也使用了類(lèi)似于C語(yǔ)言家族的習(xí)慣（包括C, C+, C#, Java, JavaScript, Perl, Python

12、等）。這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。 GWT對(duì)JSON進(jìn)行了支持。 JSON的功能可以用XMLDOM代替。,GWT入門(mén)介紹,21,JSON格式的例子,使用JSON：comments:id:1,author:someone1,url:,content:hello,id:2,author:someone2,url:,content:hello,id:3,author:someone3,url:,content:hello;,使用XML表示 1someone1hello2someone2someone13someone3hello,GWT入門(mén)介紹,22,GWT類(lèi)庫(kù)- JSNI nativ

13、e接口,JavaScript Native Interface (JSNI) JSNI方法被聲明為native方法，并在如下的格式中包含了JavaScript代碼。他可以支持在Java代碼中嵌入JavaScript. public static native void alert(String msg) /*- $wnd.alert(msg); -*/;,GWT入門(mén)介紹,23,GWT類(lèi)庫(kù)-Junit-對(duì)GWT進(jìn)行測(cè)試,繼承GWTTestCase抽象類(lèi) 實(shí)現(xiàn)getModuleName方法 public class FooTest extends GWTTestCase public String getModuleName() return com.example.foo.Foo; public void testStuff() assertTrue(2 + 2 = 4); ,GWT入門(mén)介紹,24,GWT-Designer像VB那么拖拽開(kāi)發(fā),演示 1）如何建立GWT工程 2）如何在Eclipse里進(jìn)行開(kāi)發(fā) 3）開(kāi)發(fā)GUI以及進(jìn)行相應(yīng)的事件處理 4）RPC調(diào)用以及同GUI的結(jié)合 5）HTTP異步調(diào)用以及DOM-XML格式的處理,GWT入門(mén)介紹,25,GWT小結(jié),使用一、二種技術(shù)(gwt、css)取代web應(yīng)用中的各種技術(shù)(html，javascri