欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

周 登朋 (zhoudengpeng@yahoo.com.cn), 上海交通大學(xué)研究生
張 黃矚 (zhanghuangzhu@gmail.com), IBM CDL軟件工程師

2006 年 7 月 03 日

GWT(Google Web Toolkit) 是 Google 最近推出的一個(gè)開(kāi)發(fā) Ajax 應用的框架，它支持用 Java 開(kāi)發(fā)和調試 Ajax 應用，本文主要介紹如何利用 GWT 進(jìn)行 Ajax 的開(kāi)發(fā)。

Ajax技術(shù)是當前開(kāi)發(fā)web應用的非常熱門(mén)的技術(shù)，也是Web 2.0的一個(gè)重要的組成部分。然而如果用傳統的方式Javascript進(jìn)行Ajax開(kāi)發(fā)的話(huà)，就會(huì )使得應用程序非常難以進(jìn)行調試，從而降低了生產(chǎn)效率。Google最近推出的GWT有望為我們解決這個(gè)難題，GWT是一個(gè)開(kāi)發(fā)Ajax應用的框架，它使程序員用Java同時(shí)開(kāi)發(fā)客戶(hù)端和服務(wù)器端的代碼。GWT的編譯器會(huì )把用于開(kāi)發(fā)客戶(hù)端的Java代碼轉化成Javascript和Html，而程序員不用關(guān)心這一轉換過(guò)程。這樣程序員就可以在自己喜歡的Java IDE里面開(kāi)發(fā)自己的Ajax應用程序。

本文主要從以下幾個(gè)方面進(jìn)行介紹：

1、 GWT特性簡(jiǎn)介

2、 用GWT進(jìn)行UI開(kāi)發(fā)

3、 用Javascript開(kāi)發(fā)Ajax應用簡(jiǎn)介

4、 用GWT進(jìn)行Ajax開(kāi)發(fā)

GWT特性簡(jiǎn)介

1．動(dòng)態(tài)，可重用的UI組件

GWT提供的組件庫使用戶(hù)可以很容易的開(kāi)發(fā)出漂亮的UI, 每個(gè)組件對應于GWT的一個(gè)類(lèi)。在本文的第二部分會(huì )比較詳細的介紹GWT對UI的支持。

2．簡(jiǎn)單的RPC調用

使用GWT，可以方便的實(shí)現客戶(hù)端和服務(wù)器端的通信，特別是使得異步通信變的非常簡(jiǎn)單。在本文的后面部分將對利用GWT進(jìn)行RPC調用進(jìn)行詳細介紹。

3．更加方便的調試

由于在開(kāi)發(fā)階段不需要生成HTML截面，用戶(hù)開(kāi)發(fā)的代碼實(shí)際上是在JVM上運行的，這樣用戶(hù)就可以用傳統的調試Java代碼的方法對程序進(jìn)行調試，從而加快了調試的速度，減少了軟件開(kāi)發(fā)的時(shí)間。

4．瀏覽器兼容性

在大多數情況下，用GWT開(kāi)發(fā)出來(lái)的程序會(huì )支持IE、Firefox、Mozilla、Safari和Opera，用戶(hù)在開(kāi)發(fā)的時(shí)候不必擔心瀏覽器的兼容性問(wèn)題。而瀏覽器的兼容性問(wèn)題也是用直接用Javascript進(jìn)行Ajax應用開(kāi)發(fā)所面臨的一個(gè)另程序員棘手問(wèn)題。

5．可擴展性

如果你覺(jué)得GWT提供的API不能滿(mǎn)足需求，你可以利用JSNI將Javascript語(yǔ)句直接嵌入至Java代碼中。

回頁(yè)首

用GWT進(jìn)行UI開(kāi)發(fā)

在本文的這一部分，我們將探討一下GWT對UI開(kāi)發(fā)的支持。在GWT中，包含我們進(jìn)行Web開(kāi)發(fā)所需要的大部分組件，比如按紐(Button)，文本框（Text box）等。圖一顯示了部分GWT所支持的UI組件。從圖片的顯示效果來(lái)看，利用GWT可以做出非常漂亮的UI。

值得一提的是，在每個(gè)UI組件是必須放在一個(gè)稱(chēng)之為面板（Panel）的控件里面。而面板具有不同的風(fēng)格，這也決定了UI的風(fēng)格。圖二顯示了GWT所支持的部分面板。

在看過(guò)這些組件之后，我們接下來(lái)用一個(gè)實(shí)驗來(lái)講述怎樣把UI組件添加到頁(yè)面上。這個(gè)實(shí)驗的最終結果是一個(gè)登錄框界面。

在開(kāi)始我們的實(shí)驗之前，我們需要準備一下GWT環(huán)境，首先要到Google的網(wǎng)站上去下載一個(gè)Windows版本的GWT，目前的版本號是1.0.21。然后要在機器上配置好JDK環(huán)境，具體的配置方法網(wǎng)絡(luò )上有大量文檔，這里就不再詳細介紹。由于我們這個(gè)實(shí)驗是在Eclipse開(kāi)發(fā)環(huán)境下進(jìn)行的，所以你還需要一個(gè)Eclipse的環(huán)境，可以到Eclipse的官方網(wǎng)站下載Eclipse的開(kāi)發(fā)環(huán)境。接下來(lái)我們詳細介紹試驗過(guò)程。

1． 創(chuàng )建Eclipse工程

我們可以利用GWT自帶的一個(gè)批處理文件projectCreator.cmd來(lái)創(chuàng )建Eclipse的工程。如圖三所示，我們創(chuàng )建了一個(gè)名字為myProject的工程，存放在當前目錄的myProject子目錄下面，關(guān)于批處理文件projectCreator.cmd的詳細用法，請參見(jiàn)Google關(guān)于GWT的幫助文檔。

2． 創(chuàng )建GWT應用程序

在創(chuàng )建完Eclipse工程myProject之后，我們利用GWT自帶的另外一個(gè)批處理文件applicationCreator.cmd來(lái)創(chuàng )建一個(gè)GWT應用程序。圖四顯示了創(chuàng )建一個(gè)GWT應用的過(guò)程。大家注意到這個(gè)批處理文件接受一個(gè)名為 -eclipse 的參數，這個(gè)參數正是指定了一個(gè)Eclipse的工程，我們的例子中指定為我們剛創(chuàng )建好的Eclipse工程myProject。

3． 導入Eclipse工程

在創(chuàng )建完Eclipse工程和GWT應用程序框架后，我們接著(zhù)將Eclipse工程導入到Eclipse開(kāi)發(fā)環(huán)境當中以進(jìn)行進(jìn)一步的開(kāi)發(fā)，具體的導入過(guò)程不再詳細介紹。導入后的工程結構如圖五所示。

6．添加UI組件

在導入工程后，我們會(huì )發(fā)現工程里面有一個(gè)名字為DemoClient的Java文件。這個(gè)文件是在運行applicationCreator.cmd批處理文件時(shí)創(chuàng )建的，我們現在需要做的工作就是在這個(gè)Java文件上加入自己需要的UI組件。我們在這個(gè)文件中加入了五個(gè)組件，分別是：兩個(gè)Label，一個(gè)Button，一個(gè)TextBox和一個(gè)PasswordTextBox。代碼列表Listing 1中列出了本程序的所有代碼。

1    package com.sample.myProject.client;                        2    import com.google.gwt.core.client.EntryPoint;                        3    import com.google.gwt.user.client.ui.Button;                        4    import com.google.gwt.user.client.ui.HorizontalPanel;                        5    import com.google.gwt.user.client.ui.Label;                        6    import com.google.gwt.user.client.ui.PasswordTextBox;                        7    import com.google.gwt.user.client.ui.RootPanel;                        8    import com.google.gwt.user.client.ui.TextBox;                        /**                        * This class is used to demostrate how to add widget onto the Web page                        */                        9    public class DemoClient implements EntryPoint {                        /**                        * This is the entry point method, when the module is load, this method                        * will be automatically invoked.                        */                        10	  public void onModuleLoad() {                        11		    Label labelName = new Label();                        12		    Label labelPassword = new Label();                        13		    TextBox tbName = new TextBox();                        14	PasswordTextBox tbPassword = new PasswordTextBox();                        15	Button button = new Button();                        16                        17		    labelName.setText("Name:        ");                        18		    labelPassword.setText("Password: ");                        19		    button.setText("submit");                        20                        21		    HorizontalPanel hPanel = new HorizontalPanel();                        22		    HorizontalPanel hPanel2 = new HorizontalPanel();                        23                        24		    hPanel.add(labelName);                        25		    hPanel.add(tbName);                        26		    hPanel2.add(labelPassword);                        27		    hPanel2.add(tbPassword);                        28		    RootPanel.get().add(hPanel);                        29		    RootPanel.get().add(hPanel2);                        30		    RootPanel.get().add(button);                        31		  }                        32   }                        

接下來(lái)我們分析一下這些程序代碼，注意到類(lèi)DemoClient繼承自EntryPoint，所有需要最終被翻譯成HTML頁(yè)面的類(lèi)都必須繼承自EntryPoint，并且需要重寫(xiě)onModuleLoad方法，這個(gè)方法會(huì )在模塊被裝載的時(shí)候自動(dòng)調用。因此我們也就需要把我們的添加組件的代碼放到這個(gè)函數里面。

程序的11至15行分別創(chuàng )建了5個(gè)組件的實(shí)例。分別是兩個(gè)Label，一個(gè)Button，一個(gè)TextBox和一個(gè)PasswordTextBox。然后程序的17到19行分別設置了兩個(gè)Label組件以及一個(gè)Button組件的顯示內容。程序的21行和22行穿件兩個(gè)Panel對象，這兩個(gè)Panel對象的類(lèi)型都是水平Panel對象。也就是說(shuō)放在這種Panel里面的組件是被水平排列的。程序的24行到27行分別向這兩個(gè)Panel對象中加入TextBox組件和Label組件。在程序的最后，將剛才創(chuàng )建好的兩個(gè)Panel對象以及一個(gè)Button對象加到最外層的Panel當中。

7．編譯應用程序

在代碼開(kāi)發(fā)完成后，我們可以雙擊工程里面的DemoClient-compile.cmd批處理文件來(lái)將我們開(kāi)發(fā)出來(lái)Java文件編譯成Javascript和HTML。編譯后的文件將存放在工程的根目錄下面的www子目錄中。

8．運行程序

編譯好程序后，我們會(huì )發(fā)現生成了一個(gè)名字為DemoClient.html的HTML文件，雙擊這個(gè)文件，程序的運行結果如圖六所示：

在這一部分，我們主要討論了如何將UI組件添加到Web頁(yè)面中，而這些組件如何與遠程服務(wù)器進(jìn)行異步的交互將在下面的章節中進(jìn)行討論。

回頁(yè)首

用Javascript開(kāi)發(fā)Ajax應用

為了使用戶(hù)能更清楚地理解用GWT開(kāi)發(fā)Ajax應用與用傳統的Javascript開(kāi)發(fā)Ajax應用的不同，文章的這一部分將簡(jiǎn)要介紹如何利用Javascript對象進(jìn)行Ajax應用的開(kāi)發(fā)。

大家都知道Ajax技術(shù)中的一個(gè)核心對象是XMLHttpRequest對象，這個(gè)對象支持異步請求，所謂異步請求既是當客戶(hù)端發(fā)送一個(gè)請求到服務(wù)器的時(shí)候，客戶(hù)端不必一直等待服務(wù)器的響應。這樣就不會(huì )造成整個(gè)頁(yè)面的刷新，給用戶(hù)帶來(lái)更好的體驗。而當服務(wù)器端響應返回時(shí)，客戶(hù)端利用一個(gè)Javascript函數對返回值進(jìn)行處理，以更新頁(yè)面上的部分元素的值。

由于在IE和其他瀏覽器上聲稱(chēng)XMLHttpRequest對象的方法不一樣，所以我們用Javascript創(chuàng )建XMLHttpRequest對象的時(shí)候必須區分不同的瀏覽器。創(chuàng )建一個(gè)XMLHttpRequest對象的方法如清單2 中的代碼所示。

1    function createObject(){                        2     try {                        3		  xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");                        4	  } catch (e1) {                        5		  try {                        6		    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");                        7		  } catch (e2) {                        8		    xmlHttpRequest = false;                        9		  }                        10	  }                        11  if (!xmlHttpRequest) {                        12		 xmlHttpRequest = new XMLHttpRequest();                        13	  }                        14	  return xmlHttpRequest;                        16  }                        

在創(chuàng )建好XMLHttpRequest對象之后，來(lái)看一下如何與server端進(jìn)行異步的交互。清單3中列出了與服務(wù)器段進(jìn)行交互的代碼

1    function ajaxSample() {                        2        var xmlHttpRequest = createObject();                        3        var url = "/sampleServlet?userName=Jason";                        4        xmlHttpRequest.open("GET", url, true);                        5        xmlHttpRequest.onreadystatechange = updatePage;                        6        xmlHttpRequest.send(null);                        7    }                        

這段代碼演示了如何與服務(wù)器端進(jìn)行交互的過(guò)程。程序的第2行首先獲得一個(gè)XMLHttpRequest對象，程序的第三行指定了服務(wù)器端響應客戶(hù)端的請求的地址。程序的第4行利用XMLHttpRequest對象打開(kāi)一個(gè)連接，第一個(gè)參數指定用GET方法傳遞參數，第二個(gè)參數指定了接受請求的URL，在我們的例子中是一個(gè)Servlet，最后一個(gè)參數設置成true意味著(zhù)將要發(fā)出的請求是一個(gè)異步的請求。程序的第5行指定了回調函數，也就是當服務(wù)器端返回結果后執行哪個(gè)Javascript函數。

這一部分對如何利用Javascript進(jìn)行Ajax開(kāi)發(fā)作了一個(gè)簡(jiǎn)要的介紹，下面我們將詳細介紹如何利用GWT進(jìn)行Ajax應用的開(kāi)發(fā)。

回頁(yè)首

用GWT進(jìn)行Ajax開(kāi)發(fā)

在文章的第二部分我們已經(jīng)掌握了如何利用GWT創(chuàng )建一個(gè)工程并在工程里添加一個(gè)GWT應用程序，同樣我們這一部分也需要創(chuàng )建一個(gè)GWT的工程，并添加一個(gè)GWT應用程序，由于默認創(chuàng )建的GWT程序不含有Server端的示例代碼，我們必須手工加進(jìn)去。我們創(chuàng )建好的工程GWTSample如圖七所示。我們將要介紹的實(shí)例主要功能是采用異步通信的方式從服務(wù)器端取出一個(gè)字符串顯示在HTML頁(yè)面上。這個(gè)例子雖然簡(jiǎn)單，但卻包含了如何利用GWT進(jìn)行Ajax開(kāi)發(fā)的主要流程。

大家注意到我們這個(gè)工程里面有個(gè)com.sample.myProject.server包，這個(gè)包里面包含有運行在服務(wù)器端的代碼。我們從客戶(hù)端發(fā)送的請求也是發(fā)送到這個(gè)包里面的一個(gè)Servlet上去的。

為了進(jìn)行異步調用，在Client端必須定義一個(gè)繼承自接口RemoteService的接口，在我們的這個(gè)例子中，我們定義了接口SampleService，SampleService的代碼如清單4所示。

1    package com.sample.myProject.client;                        2    import com.google.gwt.user.client.rpc.RemoteService;                        3    public interface SampleService extends RemoteService{                        4    //The implementation of this method is used to return a string                        5    String getString();                        6    }                        

大家注意到這個(gè)接口繼承自RemoteService，并且聲明了一個(gè)方法getString();，這個(gè)方法會(huì )在服務(wù)器端的代碼中實(shí)現。當然，大家可能現在已經(jīng)意識到，這里聲明的方法就是我們采用異步調用方式所能夠調用的方法。

在聲明完這個(gè)接口之后，我們還必須聲明另外一個(gè)異步調用接口，在我們的例子中是接口SampleServiceAsync，這個(gè)接口里聲明的方法名稱(chēng)必須與SampleService里面的相同，但是多個(gè)一個(gè)類(lèi)型為AsyncCallback的參數，接口SampleServiceAsync的代碼清單如清單5所示：

1    package com.sample.myProject.client;                        2    import com.google.gwt.user.client.rpc.AsyncCallback;                        3    public interface SampleServiceAsync {                        4    void getString(AsyncCallback callback);                        5	}                        

在客戶(hù)端定義完接口之后，我們必須在服務(wù)器端實(shí)現這個(gè)接口，在我們的例子中，類(lèi)SampleServiceImpl實(shí)現了接口SampleService，同時(shí)你也會(huì )注意到SampleServiceImpl也繼承了類(lèi)RemoteServiceServlet，而RemoteServiceServlet是HttpServlet的一個(gè)子類(lèi)，這樣我們的客戶(hù)端的請求就可以提交到Servlet SampleServiceImpl上面。類(lèi)SampleServiceImpl的代碼清單如清單6所示：

1    package com.sample.myProject.server;                        2    import com.google.gwt.user.server.rpc.RemoteServiceServlet;                        3    import com.sample.myProject.client.SampleService;                        4	public class SampleServiceImpl extends RemoteServiceServlet implements                        5	 SampleService {                        6          public String getString() {                        7         return "This string is from server";                        8          }                        9	}                        

最后我們來(lái)看一下類(lèi)DemoClient，這個(gè)類(lèi)和我們在第二部分創(chuàng )建的工程myProject中的類(lèi)DemoClient是同一個(gè)類(lèi)型的。只不過(guò)在我們這個(gè)工程中我們使用它來(lái)進(jìn)行向server端的異步調用。清單7列出了類(lèi)DemoClient的代碼。

1    package com.sample.myProject.client;                        2    import com.google.gwt.core.client.EntryPoint;                        3    import com.google.gwt.core.client.GWT;                        4    import com.google.gwt.user.client.rpc.AsyncCallback;                        5    import com.google.gwt.user.client.rpc.ServiceDefTarget;                        6    import com.google.gwt.user.client.ui.Button;                        7    import com.google.gwt.user.client.ui.ClickListener;                        8    import com.google.gwt.user.client.ui.Label;                        9    import com.google.gwt.user.client.ui.RootPanel;                        10   import com.google.gwt.user.client.ui.Widget;                        /**                        * This class is used to demostrate hwo to                        * interact with the server client in asynchronized                        * way                        */                        11   public class DemoClient implements EntryPoint {                        12       public void onModuleLoad() {                        13	final SampleServiceAsync sampleService = (SampleServiceAsync)                        14	 GWT.create(SampleService.class);                        15        ServiceDefTarget target = (ServiceDefTarget)sampleService;                        16        String staticResponseURL = GWT.getModuleBaseURL();                        17        staticResponseURL += "/getStringService";                        18        target.setServiceEntryPoint(staticResponseURL);                        19                        20        final Label label = new Label();                        21        final Button button = new Button("Get String");                        22        button.addClickListener(new ClickListener() {                        23            public void onClick(Widget sender) {                        24                sampleService.getString(new AsyncCallback() {                        25                    public void onSuccess(Object result) {                        26                        label.setText((String) result);                        27                    }                        28                    public void onFailure(Throwable caught) {                        29                        label.setText(caught.getMessage());                        30                    }                        31                });                        32            }                        33        });                        34        RootPanel.get("1").add(button);                        35        RootPanel.get("2").add(label);                        36    }                        37}                        

代碼的第13行得到了一個(gè)實(shí)現了接口SampleServiceAsync的類(lèi)的實(shí)例。第15行創(chuàng )建了一個(gè)ServiceDefTarget對象的一個(gè)實(shí)例，通過(guò)這個(gè)對象可以設置請求的目的地。程序的第18行設置了請求的目的地的URL，在我們的例子中是"/getStringService"，這個(gè)URL會(huì )在web.xml文件中被mapping到servlet SampleServiceImpl上。程序的22行到33行為我們添加的button設置了單擊響應事件。在單擊響應事件中調用sampleService的getString(AsyncCallback callback);方法。這個(gè)方法是用來(lái)進(jìn)行異步的遠程過(guò)程調用的(RPC).并且在實(shí)現接口A(yíng)syncCallback的代碼中指定了回調函數，當遠程過(guò)程調用成功后就執行onSuccess(Object result)函數，其中result中存放有從服務(wù)器端返回的結果.。在遠程工程調用失敗后就執行onFailure(Throwable caught)函數。程序的最后把Button組件和Label組件加到panel中。

現在我們已經(jīng)完成了程序的開(kāi)發(fā)，圖八顯示了我們程序的運行結果，在點(diǎn)擊Button后，右邊回打出一句話(huà)來(lái)，重要的是這句話(huà)是以異步的方式從服務(wù)器端取得的，不需要進(jìn)行頁(yè)面的刷新，怎么樣，現在是不是也想用GWT進(jìn)行Ajax應用開(kāi)發(fā)了呢？