第一个 GWT 应用程序

17 Mar 2025 | 5 分钟阅读

要构建一个 GWT 应用程序，我们有四个部分，最后一部分是可选的。

1) 模块描述符: 此部分有助于配置 GWT 应用程序。要进行配置，我们将配置文件写入 XML

语法：name.gwt.xml

这里，"name" 是应用程序的名称。所有配置文件都在项目根目录中。

2) UI 设计: 它由 HTML、CSS 或用于设计 GWT 应用程序的图像组成。我们可以使用 <public path = "location address" /> 标签来配置它的位置。我们可以在模块配置中找到配置文件。

3) 客户端代码: 在此部分，使用 GWT 编译器将应用程序的所有代码和业务逻辑转换为 JavaScript。我们可以使用 <source path = "path" /> 标签找到资源的位置。此代码由可以不带参数编写的入口点代码组成。当 GWT 应用程序模块加载时，每次都会调用 EntryPoint.onModuleLoad() 方法。

4) 服务器端代码: 在此部分，我们可以执行服务器端代码。如果我们的应用程序没有任何后端（服务器端脚本或数据库），则此部分是可选的。

创建应用程序

使用 GWT Web 开发工具包创建一个简单的 Web 开发项目。要创建应用程序，请按照以下步骤操作

文件→新建→其他

现在，将弹出一个窗口，从中选择一个向导选项。

选择 Google Web Application Wizard，然后单击“下一步”按钮。

单击“下一步”按钮后，将打开一个新的向导。

现在，提供项目名称和包名称。在 Google SDK 的选项下选择 使用 GWT，并取消选中 使用 Google App Engine，因为我们仅构建一个基本应用程序。

单击完成按钮。

单击“完成”按钮后，将生成以下目录

入口点类

在此示例中，类 SampleWebApplication 被称为 GWT 应用程序的入口点。此文件包含对服务器端代码的许多引用。此文件需要清理，因为它有很多引用。

存在一个预定义方法 onModuleLoad()，这是程序在运行 GWT Web 应用程序时执行的入口点。

这与常见 Java 程序中的 public static void main (String args[]) 方法非常相似。

入口点类代码

SampleWebApplication.java

package com.javatpoint.helloworld.client;
 import com.google.gwt.core.client.EntryPoint;
 /** * Entry point classes define onModuleLoad() */ 
public class SampleWebApplication implements EntryPoint {
 	/ * This is the entry point method. */ 
public void onModuleLoad() {
 // TODO
 } 
}

部署描述符

它类似于 J2EE 编程中的 web.xml，它是基于 Servlet 的 Java Web 应用程序的部署描述符。

现在，在 web.xml 中，GWT 创建在部署描述符下定义的 servlet。由于我们正在创建一个基本的 web 应用程序，因此请删除 web.xml 中的所有服务器端代码和条目，也称为规范标签。

我们创建一个欢迎文件，即 SampleWebApplication.html，并将其包含在 web.xml 中。此文件是我们的 GWT Web 应用程序的第一个页面。

部署描述符代码

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://java.sun.com/xml/ns/javaee
https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5"
xmlns="https://java.sun.com/xml/ns/javaee">
<!-- Servlets -->
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>SampleWebApplication.html</welcome-file>
</welcome-file-list>
</web-app>

模块描述符

在此部分中，我们打开一个文件 SampleWebApplication.gwt.xml，该文件可以在包 com.javatpoint.helloworld 下找到，这是一个特定的配置文件。

它包含来自核心 GWT 的库，这些库通过 inherit 标签包含。我们还可以使用 inherit 标签添加第三方库。inherit 标签引用 GWT 控件的默认样式。

模块描述符代码

SampleWebApplication.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
When updating your version of GWT, you should also update this DTD reference,
so that your app can take advantage of the latest GWT module capabilities.
-->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.7.0//EN"
"http://gwtproject.org/doctype/2.7.0/gwt-module.dtd">
<module rename-to='samplewebapplication'>
<!-- 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.standard.Standard'/>-->
<!-- <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.javatpoint.helloworld.client.SampleWebApplication'/>

<!-- Specify the paths for translatable code-->
<source path='client'/>
<source path='shared'/>

<!-- allow Super Dev Mode -->
<add-linker name="xsiframe"/>
</module>

欢迎文件

欢迎文件描述了项目的外观。它根据我们的需要使用 HTML 和 CSS 设计。

<!doctype html>
<!-- The DOCTYPE declaration above will set the-->
<!-- browser's rendering engine into-->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported.-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--  -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!--  -->
<link type="text/css" rel="stylesheet" href="SampleWebApplication.css">
<!-- -->
<!-- Any title is fine-->
<!--  -->
<title>Web Application Starter Project</title>
<!--  -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!--  -->
<script type="text/javascript" language="javascript"
src="samplewebapplication/samplewebapplication.nocache.js"> </script>
</head>
<!-- The body can have arbitrary html, or  -->
<!-- you can leave the body empty if you want  -->
<!-- to create a completely dynamic UI.  -->
<!-- -->
<body>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%;
margin-left: -11em; color: red; background-color: white; border: 1px solid red;
padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled  in order for this application to display correctly.
</div>
</noscript>
</body>
</html>

UI 组件在入口点类下更改。我们编写几行代码来添加 UI 组件。在此示例中，我们将添加 Button、Vertical Panel、事件处理。

package com.javatpoint.helloworld.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class SampleWebApplication implements EntryPoint {
	/** A vertical panel that hold other components over UI.*/
	VerticalPanel vPanel;
	/*
	* A label that gets updated on click of button.
	*/
	Label lbl;	
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		vPanel= new VerticalPanel ();
		lbl= new Label ();
		
		/*
		* Button and its click handlar.
		*/
		Button btn = new Button("GWT Button");
		btn.addClickHandler(new ClickHandler() {
		
			@Override
		public void onClick(ClickEvent event) {
		lbl.setText("You clicked GWT Button!");
		}
		});		
		/*
		* adding label and button into Vertical Panel.
		*/
		vPanel.add(lbl);
		vPanel.add(btn);		
		/*
		* Adding vertical panel into HTML page.
		*/
		RootPanel.get().add(vPanel);
		}
	}