GWT教程

GWT 应用程序

在我们开始使用 GWT 创建实际的"HelloWorld"应用程序之前,让我们看看 GWT 应用程序的实际部分是什么-
一个 GWT 应用程序由以下四个重要部分组成,其中最后一部分是可选的,但前三部分是强制性的。
模块描述符 公共资源 客户端代码 服务端代码
典型 gwt 应用程序不同部分的示例位置 HelloWord 如下所示-
名称 位置
项目根 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>
以下是模块描述符中使用的不同部分的简要细节。
节点和描述
<module rename-to="helloworld">
这提供了应用程序的名称。
<inherits name="logical-module-name" />
这会在应用程序中添加其他 gwt 模块,就像在 java 应用程序中所做的一样。可以通过这种方式继承任意数量的模块。
<entry-point class="classname" />
这指定将开始加载 GWT 应用程序的类的名称。可以添加任意数量的入口点类,并按照它们在模块文件中出现的顺序依次调用它们。所以当你的第一个入口点的 onModuleLoad() 完成时,下一个入口点会立即被调用。
<source path="path" />
这指定了 GWT 编译器将搜索源编译的源文件夹的名称。
<public path="path" />
公共路径是项目中 GWT 模块引用的静态资源(例如 CSS)所在的位置或图像,被存储。默认公共路径是存储模块 XML 文件的公共子目录。
<script src="js-url" />
自动注入位于 src 指定位置的外部 JavaScript 文件。
<stylesheet src="css-url"/>
自动注入位于 src 指定位置的外部 CSS 文件。

公共资源

这些是您的 GWT 模块引用的所有文件,例如主机 HTML 页面、CSS 或图像。
可以使用模块配置文件中的 元素配置这些资源的位置。默认情况下,它是存储模块 XML 文件的公共子目录。
当您将应用程序编译为 JavaScript 时,可以在您的公共路径上找到的所有文件都将复制到模块的输出目录中。
最重要的公共资源是用于调用实际 GWT 应用程序的主机页面。应用程序的典型 HTML 主机页面可能根本不包含任何可见的 HTML 正文内容,但始终希望通过 标记包含 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,最终将在浏览器中运行。可以使用模块配置文件中的 元素配置这些资源的位置。
例如 Entry Point 代码将用作客户端代码,其位置将使用 指定。
模块 entry-point 是可分配给 EntryPoint 并且可以在没有参数的情况下构造的任何类。当一个模块被加载时,每个入口点类都会被实例化,并且它的 EntryPoint.onModuleLoad() 方法被调用。示例 HelloWorld 入口点类如下-
public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

服务端代码

这是您的应用程序的服务器端部分,它非常可选。如果您不在应用程序中进行任何后端处理,那么您不需要这部分,但是如果后端需要一些处理并且您的客户端应用程序与服务器交互,那么您将必须开发这些组件。
下一章将利用上述所有概念,使用 Eclipse IDE 创建 HelloWorld 应用程序。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4