开发手册 欢迎您！
软件开发者资料库

GWT - 创建应用程序

GWT创建应用程序 - 从简单和简单的步骤学习Google Web Toolkit（GWT）编程，从基本到高级概念，包括概述，环境设置，Web应用程序创建，部署和调试应用程序，CSS样式，组件模型，基本，表单和复杂小部件，布局面板，事件处理，自定义小部件，UIBinder，RPC通信，JUnit集成，国际化，历史类，书签支持，日志框架。

由于GWT的功能在于用Java编写，在JavaScript中运行，我们将使用Java IDE Eclipse来演示我们的示例.

让我们开始吧使用简单的 HelloWorld 应用程序 :

步骤1  - 创建项目

第一步是创建一个简单的Web使用Eclipse IDE的应用程序项目.使用选项 Google Icon Google服务和开发工具>启动项目向导新的Web应用程序项目...... .现在使用向导窗口将项目命名为 HelloWorld ，如下所示 :

Create GWT项目向导

取消选择使用Google App Engine ，因为我们未在此项目中使用它并保留其他默认值(保持生成示例项目代码选项已选中)并单击完成按钮.

成功创建项目后，您将在项目浏览器中获得以下内容 :

GWT项目结构

以下是所有重要文件夹的简要说明

Sr.No.Folder &安培;位置
1

src

源代码(java类)文件.

客户端包含负责客户端UI显示的客户端特定java类的文件夹.

包含负责服务器端处理的服务器端java类的服务器文件夹.

包含java模型类的共享文件夹，用于将数据从服务器传输到客户端，反之亦然.

HelloWorld.gwt.xml，GWT编译器编译HelloWorld项目所需的模块描述符文件.

2

测试

测试代码(java类)源文件.

包含负责测试gwt客户端代码的java类的客户端文件夹.

3

战争

这是最重要的部分，它代表了实际可部署的Web应用程序.

包含已编译类，gwt库，servlet库的WEB-INF.

HelloWorld.css，项目样式表.

HelloWorld.html，热门HTML将调用GWT UI应用程序.

第2步 - 修改模块描述符:HelloWorld.gwt.xml

GWT插件将创建一个默认模块描述符文件 src/com.it1352/HelloWorld.gwt.xml 如下.对于此示例，我们不会对其进行修改，但您可以根据您的要求对其进行修改.

                                          

第3步 - 修改样式表:HelloWorld.css

GWT插件将创建默认样式表文件战/HelloWorld.css 的.让我们修改这个文件，让我们的例子保持最简单的低估 :

body {   text-align: center;   font-family: verdana, sans-serif;}h1 {   font-size: 2em;   font-weight: bold;   color: #777777;   margin: 40px 0px 70px;   text-align: center;}

步骤4  - 修改主机文件:HelloWorld.html

GWT插件将创建默认值HTML主机文件 war/HelloWorld.html .让我们修改这个文件，让我们的例子保持最简单的低调 :

         Hello World                              
Hello World
      
Welcome to first GWT application
   

您可以在同一源目录中创建更多静态文件，如HTML，CSS或图像，或者您可以创建更多子目录并在这些子目录中移动文件目录并在应用程序的模块描述符中配置这些子目录.

步骤5  - 修改入口点:HelloWorld.java

GWT插件将创建一个默认的Java文件 src/com.it1352/HelloWorld.java ，它保留了应用程序的入口点.

让我们修改此文件以显示" Hello，World！"

package com.it1352.client;import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.Window;public class HelloWorld implements EntryPoint {   public void onModuleLoad() {      Window.alert("Hello, World!");   }}

您可以在同一源目录中创建更多Java文件，以定义入口点或定义帮助程序例程.

第6步 - 编译应用程序

准备好完成所有更改后，就可以编译项目了.使用选项 Google Icon Google服务和开发工具> GWT Compile Project ... 启动GWT Compile对话框，如下图所示 :

编译GWT项目向导

保持默认值不变，然后单击"编译"按钮.如果一切顺利，您将在Eclipse控制台中看到以下输出

Compiling module com.it1352.HelloWorld   Compiling 6 permutations      Compiling permutation 0...      Compiling permutation 1...      Compiling permutation 2...      Compiling permutation 3...      Compiling permutation 4...      Compiling permutation 5...   Compile of permutations succeededLinking into C:\workspace\HelloWorld\war\helloworld   Link succeeded   Compilation succeeded -- 33.029s

第7步 - 运行应用程序

现在点击运行应用程序运行应用程序菜单并选择 HelloWorld 应用程序来运行应用程序.

GWT Run Button

如果一切正常，你必须看到GWT开发在Eclipse中激活的pment模式包含一个URL，如下所示.双击URL以打开GWT应用程序.

GWT Run Application

因为您在开发模式下运行应用程序，所以您需要为浏览器安装GWT插件.只需按照屏幕上的说明安装插件.

如果您已经为浏览器设置了GWT插件，那么您应该能够看到以下输出

GWT申请结果

恭喜！您已使用Google Web Toolkit(GWT)实施了第一个应用程序.