GWT - 应用

在我们开始使用 GWT 创建实际的“HelloWorld”应用程序之前，让我们看看 GWT 应用程序的实际组成部分是什么：

GWT 应用程序由以下四个重要部分组成，其中最后一部分是可选的，但前三个部分是必须的。

模块描述符
公共资源
客户端代码
服务器端代码

典型 gwt 应用程序 HelloWorld 的不同部分的示例位置如下所示：

名称	位置
项目根目录	HelloWorld/
模块描述符	src/com/tutorialspoint/HelloWorld.gwt.xml
公共资源	src/com/tutorialspoint/war/
客户端代码	src/com/tutorialspoint/client/
服务器端代码	src/com/tutorialspoint/server/

模块描述符

模块描述符是以 XML 格式的配置文件，用于配置 GWT 应用程序。

模块描述符文件的扩展名是 *.gwt.xml，其中 * 是应用程序的名称，此文件应位于项目的根目录中。

以下是 HelloWorld 应用程序的默认模块描述符 HelloWorld.gwt.xml：

<?xml version = "1.0" encoding = "utf-8"?>
<module rename-to = 'helloworld'>
   <!-- inherit the core web toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.user'/>

   <!-- inherit the default gwt style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- specify the paths for translatable code                    -->
   <source path = '...'/>
   <source path = '...'/>

   <!-- specify the paths for static files like html, css etc.     -->
   <public path = '...'/>
   <public path = '...'/>

   <!-- specify the paths for external javascript files            -->
   <script src = "js-url" />
   <script src = "js-url" />

   <!-- specify the paths for external style sheet files            -->
   <stylesheet  src = "css-url" />
   <stylesheet  src = "css-url" />
</module>

以下是关于模块描述符中使用的不同部分的简要说明。

序号	节点和描述
1	<module rename-to = "helloworld"> 这提供了应用程序的名称。
2	<inherits name = "logical-module-name" /> 这将其他 gwt 模块添加到应用程序中，就像在 Java 应用程序中使用 import 一样。可以以这种方式继承任意数量的模块。
3	<entry-point class = "classname" /> 这指定了将开始加载 GWT 应用程序的类的名称。可以添加任意数量的入口点类，它们按照在模块文件中出现的顺序依次调用。因此，当第一个入口点的 onModuleLoad() 完成时，下一个入口点会立即被调用。
4	<source path = "path" /> 这指定了 GWT 编译器将搜索源代码编译的源文件夹的名称。
5	<public path = "path" /> 公共路径是项目中存储 GWT 模块引用的静态资源（例如 CSS 或图像）的位置。默认的公共路径是模块 XML 文件存储位置下的 public 子目录。
6	<script src="js-url" /> 自动注入位于 src 指定位置的外部 JavaScript 文件。
7	<stylesheet src="css-url" /> 自动注入位于 src 指定位置的外部 CSS 文件。

公共资源

这些是 GWT 模块引用的所有文件，例如主机 HTML 页面、CSS 或图像。

这些资源的位置可以使用模块配置文件中的 <public path = "path" /> 元素进行配置。默认情况下，它是模块 XML 文件存储位置下的 public 子目录。

当您将应用程序编译成 JavaScript 时，可以在您的公共路径上找到的所有文件都将复制到模块的输出目录。

最重要的公共资源是主机页面，它用于调用实际的 GWT 应用程序。应用程序的典型 HTML 主机页面可能根本不包含任何可见的 HTML 主体内容，但始终预期通过 <script.../> 标记包含 GWT 应用程序，如下所示

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

以下是我们包含在主机页面中的示例样式表：

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;
}

客户端代码

这是编写实现应用程序业务逻辑的实际 Java 代码，GWT 编译器将其转换为 JavaScript，最终将在浏览器中运行。这些资源的位置可以使用模块配置文件中的 <source path = "path" /> 元素进行配置。

例如，入口点代码将用作客户端代码，其位置将使用 <source path = "path" /> 指定。

模块 入口点是任何可分配给 EntryPoint 并且无需参数即可构造的类。加载模块时，将实例化每个入口点类，并调用其 EntryPoint.onModuleLoad() 方法。一个示例 HelloWorld 入口点类如下所示：

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

服务器端代码

这是应用程序的服务器端部分，它是完全可选的。如果您没有在应用程序中进行任何后端处理，则不需要此部分；但是，如果后端需要一些处理并且您的客户端应用程序与服务器交互，则您必须开发这些组件。

下一章将使用上述所有概念，使用 Eclipse IDE 创建 HelloWorld 应用程序。

打印页面