1.6 简单的教程

了解如何利用GWT构建应用程序的最佳方式，就是通过实际构建一个简单的应用程序来获得初步印象。本节介绍如何构建一个Ajax应用程序，包括如何创建GWT项目、自定义生成的代码、创建动态界面以及从服务器异步加载数据。我们要构建的这个应用程序名为Hangman，通过这个应用程序的界面可以玩一种猜词游戏。猜词的次数是有限制的，如果次数到了，那么玩家就输了；如果在限制的次数之前猜对，那么玩家就赢了。

1.6.1 创建GWT项目

要使用GWT必须在机器上安装JDK 1.4（Java Development Kit，Java开发工具箱）或更高版本。通过在命令行提示符或终端窗口中运行javac -version命令，可以检查JDK的版本，如图1-1所示。

图 1 1 检查安装的JDK版本

假如你机器中的JDK版本低于1.4，那么可以在Sun Developer Network网站http://java.sun.com/javase/downloads上面下载最新版本。

另外，还需要在机器中安装Google Web Toolkit SDK（Software Development Kit，软件开发工具包）。下载地址为http://code.google.com/webtoolkit/download.html。

这个SDK的ZIP文件大约有13MB。下载之后，将它解压缩到你认为合适的目录中（无需安装）。然后，把这个目录添加到PATH变量，以便在任何目录中都能方便地调用GWT脚本。在Windows中，打开“控制面板 > 系统 > 高级 > 环境变量”，然后将以上路径添加到PATH变量。在OS X和Linux中，可以通过set命令或者在启动脚本中设置该变量，将以上路径添加到PATH变量。如图1-2所示，我在OS X系统中通过自己主目录中的.profile文件设置了路径变量。如图1-3所示，通过设置路径变量，可以省去在执行GWT脚本时指定它们完整路径的麻烦。

图 1 2 在OS X中将GWT路径添加到PATH变量

图 1 3在运行applicationCreator脚本时无需指定路径

为了开始使用GWT构建应用程序，首先需要创建一个新项目。由于这个项目对应的Ajax应用程序为Hangman，因此我们也将这个项目命名为Hangman。图1-4展示了创建这个应用程序的目录，然后运行GWT的applicationCreator脚本生成必要文件的过程。

图 1 4通过applicationCreator创建一个名为Hangman的新项目

如图1-4所示，为生成必要的项目文件，我们运行了以下命令：

applicationCreator com.gwtapps.tutorial.client.Hangman

其中的参数是这个GWT应用程序的完全Java路径名（如果你对Java还不熟悉，可以在参考http://java.sun.com/docs/codeconv/html/CodeConventions.doc8.html中的相关Java资源）。该路径名直接映射到文件系统，这一点通过图1-4也能够清楚地看出来。通过这种技术可以将应用程序的代码组织为包的形式。

此时的应用程序已经可以运行了。GWT支持两种运行模式：一种是通过生成的Hangman-shell脚本在GWT的主机浏览器中运行应用程序；另一种是使用生成的Hangman-compile脚本把应用程序编译为JavaScript并在浏览器中运行。GWT的主机模式是在GWT控制的环境下，而不是浏览器的环境中运行应用程序。这种运行模式能够提供在Java环境中查看日志和错误信息并调试应用程序的便利。而在浏览器中运行编译得到的JavaScript脚本，则只能依靠JavaScript提供的错误信息，并且也缺乏调试能力。当在主机模式下通过Hangman-shell脚本运行这个应用程序时，会出现一个GWT开发shell窗口，该窗口中能够显示错误和其他日志信息，如图1-5所示；还会出现一个主机浏览器窗口，该窗口会加载生成的应用程序，如图1-6所示。

以上就是创建一个GWT应用程序项目所需的准备工作。第4章，我们将介绍通过Eclipse这种IDE来创建项目并加快开发进程。

图 1 5 GWT的开发shell窗口

图 1 6主机浏览器窗口