GWT：编写AJAX程序最快捷的解决方案-技术开发专区

GWT：编写AJAX程序最快捷的解决方案

作者：IT168 极地圣火编辑：李宁 2007-05-30 10:25

【IT168 专稿】随着Web技术的逐渐普及，人们对和Web相关技术的要求也越来越高。在最初的Web程序是纯静态的页面，然后逐渐发展出动态的Web技术，在最近几年，Web技术又逐渐向前端转移，发展出了用于获得丰富用户体验的AJAX技术。使用AJAX技术虽然可以编写出绚丽的界面，但要想用编写出和桌面程序同样的效果，就需要更多的工作量，实现起来也更复杂。幸运的是Google率先推出了一种将Java代码转换为AJAX代码的技术，这就是GWT。通过GWT(GWT Google Web Toolkit)，用户只要熟悉Java语言，就可以很容易地使用GWT来设计并实现基于AJAX的Web程序。为了使读者更好的了解和掌握GWT，本文就GWT的一些基础知识和基本实现做一下阐述，主要有以下几项内容：

1. 创建GWT程序

2. 一个简单的例子

一、创建GWT程序

GWT工具包提供了一套脚本服务程序。通过这些程序，可以很容易地创建GWT骨架程序，这有些象ROR中生成Web骨架程序类似。

在这些脚本服务程序中，有一个叫applicationCreator的脚本。通过这个脚本，我们可以创建GWT工程所需的所有的目录结构和必要的配置文件。这个脚本的基本使用步骤如下：

1. 建立一个GWTExample目录。然后我们将这个目录名赋给GWT_EXAMPLES_DIR。这个目录将作为GWT工程目录。

2. 现在在这个目录中建立一个HelloGWT了目录。这个目录将包含本文所提供的例子的文件和目录。

3. 使用以下参数运行applicationCreator

applicationCreator -out <directory location>\GWTExample\HelloGWT test.hellogwt.client.HelloGWT

上面的命令将创建将在HelloGWT中创建一些工程文件和GWT的Java源代码文件。这条命令实际上是调用在gwt-dev-xxx.jar中的ApplicationCreator类。这个类负责创建目录结构和产生应用程序文件。使用这个命令将可以完全自动地产生一个初始的工程包。然后你只需要向这些自动生成的框架中添加自己所需要的代码即可。而这使用这种方法来创建GWT目录还可以使工程结构标准化，并且在其他人很容易了接手当前的GWT程序。

在HelloGWT中生成了一个用于保存源程序的目录和两个批处理文件，结构如下：

src

HelloGWT-compile.cmd

HelloGWT-shell.cmd

src目录包含了所有被产生的源文件和配置文件。这些源文件都是以java包形式存在

的。这些包的根是test.hellogwt。其他产生的文件主要有：

1. HelloGWT.gwt.xml

这个xml文件保存了GWT工程中需要的所有配置信息。在这个配置文件中指定了继承于GWT标准库的模块(module)，部分配置文件如下如示：

<module>
<!-- Inherit the core Web Toolkit stuff.-->
<inherits name="com.google.gwt.user.User"/>
<!-- Specify the app entry point class. -->
<entry-point class=
"test.hellogwt.client.HelloGWT"/>
</module>

2. HelloGWT.java

这个Java源文件是程序GWT程序的入口程序。它继承于EntryPoint类。它HelloGWT模块被GWT框架装载后，这个类被实例化，并且onModuleLoad()方法将被自动调用。在刚才自动产生的类中，在onMuduleLoad方法中创建了一个按钮和一个标签。然后将这两个控件加到页面中。同时，还加入了用于监听按钮单击事件的方法。这个事件方法可以在HelloGWT.java中找到。HelloGWT.java的代码如下：

package testlogwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;


/**//** Entry point classes define <code>onModuleLoad()</code>. */
public class HelloGWT implements EntryPoint
...{


/**//** This is the entry point method. */


public void onModuleLoad()
...{
final Button button = new Button("Click me");
final Label label = new Label();
button.addClickListener(new ClickListener()
...{
public void onClick(Widget sender)
...{
if (label.getText().equals(""))
label.setText("Hello World!");
else
label.setText("");
}
}
RootPanel.get("slot1").add(button);
RootPanel.get("slot2").add(label);
}

3.HelloGWT.html

这个网页文件将同HelloGWT应用程序一起装载，这将是本文所讲的程序的首页。这个网页和JSP页差不多，也包含指向GWT应用程序的模块的标签（tag）。这个标签可以将连接静态的网页和HelloGWT应用程序连接起来。如下的代码描述了如何将网页和GWT程序连接起来：

content='test.hellogwt.HelloGWT'>

这些标签除了起到连接作用，还会导入一些GWT内定的Javascript文件，代码如下：

这个文件包含了一个命令行脚本，用于将应用程序编译成HTML和JavaScript代码。

5. HelloGWT-shell.cmd

这是一个用于在本机测试GWT程序的脚本。

二、一个简单的例子

在这一部分将会介绍一个例子。这个例子的主要功能是在前台显示一段文字，这些文字将随机从保存在服务端的一组文字中选取。而且每秒将更新一次，但并不刷新页面。实现这个程序共分为九步：

1. 在test.hellogwt.client包中创建一个Java文件RandomQuoteService.java。并定义一个接口，代码如下：

public interface RandomQuoteService extends RemoteService
...{
    public String getQuote();
}

2. 在test.hellogwt.client包中创建一个RandomQuoteServiceAsync.java文件，并定义一个接口，代码如下：

public interface RandomQuoteServiceAsync
...{
    public void getQuote(AsyncCallback callback);
}

3. 在test.hellogwt.server包中创建一个RandomQuoteServiceImpl.java文件。并定义一个继承于RemoteService和实现RandomQuoteService接口的类。代码如下：

public class RandomQuoteServiceImpl extends RemoteServiceServlet
implements RandomQuoteService
 ...{
    private Random randomizer = new Random();
    private static final long serialVersionUID= -1502084255979334403L;
    private static List quotes = new ArrayList();
    static
    ...{
       quotes.add("成功创建了GWT程序!");
       quotes.add("昨天睡得如何？");
       quotes.add("早上好！");
       quotes.add("今天下雨，真凉爽！");
       quotes.add("晚安");
    }
   public String getQuote()
...{
return (String) quotes.get(randomizer.nextInt(4));
}
}

4. 在这一步我们来修改HelloGWT.java，首先删除添加标签和按钮的代码。然后在onModuleload()中创建一个timer，并将时间间隔设置为1秒，然后在timer的响应事件中调用RandomQuoteServer的getQuote方面得到相应的显示文本。代码如下：

public void onModuleLoad()
...{
final Label quoteText = new Label();
final RandomQuoteServiceAsync quoteService =
(RandomQuoteServiceAsync)GWT.create(RandomQuoteService.class);
ServiceDefTarget endpoint = (ServiceDefTarget)quoteService;
endpoint.setServiceEntryPoint("/");
Timer timer = new Timer()
...{
public void run()
...{
AsyncCallback callback = new AsyncCallback()
...{
public void onSuccess(Object result)
...{
quoteText.setText((String) result);
}
public void onFailure(Throwable caught)
...{
quoteText.setText("Failed to get a quote.");
}
};
quoteService.getQuote(callback);
}
};
timer.scheduleRepeating(1000);
RootPanel.get().add(quoteText);
}.

5. 编辑HelloGWT，并加入如下的内容：

<p><b><font size="7">HelloGWT</font></b></p>
<p>这是一个基于GWT的AJAX程序，显示的内容将在一秒更新一次（不刷新页面）　</p>
6. 现在让我们为这个程序加一个CSS，用来修饰显示的效果。将这个css命名为HelloGWT.css。内容如下：

quoteLabel
{...}{
color: white;
display: block;
width: 450px;
padding: 2px 4px;
text-decoration: none;
text-align: center;
font-family: GB2312;
font-weight: bold
border: 1px solid;
border-color: black;
background-color: #704968;
text-decoration: none;
}

7. 在HelloGWT.java中设置显示标签类型，代码如下：

quoteText.setStyleName("quoteLabel");

8. 在HelloGWT.html中引用css文件。代码如下：

<link rel="stylesheet" href="HelloGWT.css">

9. 这是最后一步，我们需要在这一步中注册RandomQuoteServiceImpl Servlet类。以便程序能正常运行。注册这个类需要在HelloGWT.gwt.xml中进行。内容如下：

<servlet path="/" class="test.hellogwt.server. RandomQuoteServiceImpl"/>

在编写完这个例子后，运行HelloGWT-shell.cmd，显示结果如图1所示：

图1

关注我们