GWT 创建应用程序

由于 GWT 的强大之处在于 用 Java 编写，用 JavaScript 运行，我们将使用 Java IDE Eclipse 来演示我们的示例。

让我们从一个简单的 HelloWorld 应用程序开始-

第 1 步-创建项目

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

取消选择 使用 Google App Engine，因为我们没有在这个项目中使用它并保留其他默认值（保持 生成示例项目代码选项被选中），然后点击完成按钮。

成功创建项目后，您的项目浏览器中将包含以下内容-

这里是所有重要文件夹的简要说明

文件夹和位置
1	src 源代码（java 类）文件。客户端文件夹，包含负责客户端 UI 的客户端特定 java 类 Server 文件夹包含负责服务器端处理的服务器端 java 类。共享文件夹包含 java 模型类，用于将数据从服务器传输到客户端，反之亦然。 HelloWorld.gwt.xml，GWT编译器编译HelloWorld项目所需的模块描述符文件。
2	test 测试代码（java 类）源文件。包含负责测试 gwt 客户端代码的 java 类的客户端文件夹.
3	war 这是最重要的部分，它代表了实际可部署的 Web 应用程序。 WEB-INF 包含已编译的类， gwt 库，servlet 库。 HelloWorld.css，项目样式表。 HelloWorld.html，将调用 GWT UI 应用程序的热门 HTML。

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

GWT 插件将创建一个默认的模块描述符文件 src/com.tutorialspoint/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.  You can change      -->
   <!--the theme of your GWT application by uncommenting         -->
   <!--any one of the following lines.                           -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!--<inherits name = 'com.google.gwt.user.theme.chrome.Chrome'/>-->
   <!--<inherits name = 'com.google.gwt.user.theme.dark.Dark'/>    -->
   <!--Other module inherits                                     -->
   <!--Specify the app entry point class.                        -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
   <!--Specify the paths for translatable code                   -->
   <source path = 'client'/>
   <source path = 'shared'/>
</module>

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

GWT 插件将创建一个默认样式表文件 war/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。让我们修改这个文件，让我们的例子保持在最简单的理解水平-

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

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

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

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

让我们修改这个文件以显示"Hello,World！"

package com.tutorialspoint.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 GWT 编译项目...启动 GWT 编译对话框，如下所示-

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

Compiling module com.tutorialspoint.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 succeeded
Linking into C:\workspace\HelloWorld\war\helloworld
   Link succeeded
   Compilation succeeded--33.029s

第 7 步-运行应用程序

现在点击

Run application 菜单并选择 HelloWorld application to run应用程序。

如果一切正常，您必须在 Eclipse 中看到 GWT 开发模式处于活动状态，其中包含如下所示的 URL。双击 URL 以打开 GWT 应用程序。

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

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

恭喜！您已经使用 Google Web Toolkit (GWT) 实现了您的第一个应用程序。

找工作要求35岁以下，35岁以上的程序员都干什么去了？

长久以来，一直有一个问题困扰着技术人——如何打破“程序员的35岁职业魔咒”，这一天迟早会到来，或早或晚。

或许是选错了行业，程序员薪水虽高，但光鲜的外表下，背后的苦衷只有自己知道。三十多岁本该是一个人事业的黄金期，但技术变化日新月异，行业竞争异常残酷，对一个企业来说，永远有比你更年轻、劳动成本更低的人可以选择，这让你的中年危机提前到来。破局的智慧可以看看这本书！>>

<< GWT 应用程序 GWT 部署应用程序 >>

昵称：邮箱：