本文概述
- 创建申请
- 入口点类
- 入口点类代码
- 部署描述符
- 部署描述符代码
- 模块描述符
- 模块描述符代码
- 欢迎文件
- 运行GWT Web应用程序
1）模块描述符：此部分有助于配置GWT应用程序。要配置, 我们将配置文件写入XML
语法：name.gwt.xml
在此, “名称”是应用程序的名称。所有配置文件都位于项目根目录中。
2）UI设计：它由用于设计GWT应用程序的HTML, CSS或图像组成。我们可以使用< public path =“ location address” /> 标记来配置其位置。我们可以在模块配置中找到配置文件。
3）客户端代码：在本节中, 将使用GWT编译器将应用程序的所有代码和业务逻辑转换为JavaScript。我们可以使用< source path =“ path” /> 标记找到资源的位置。该代码由入口点代码组成, 无需参数即可编写。加载GWT应用程序模块后, 每次都会调用EntryPoint.onModuleLoad()方法。
4）服务器端代码：在本节中, 我们可以执行服务器端代码。如果我们的应用程序没有任何后端（服务器端脚本或数据库）, 则此部分为可选。
创建申请 使用GWT Web开发工具包创建简单的Web开发项目。要创建应用程序, 请执行以下步骤：
File→New→Other
文章图片
现在, 将打开一个弹出窗口, 从中选择一个向导选项。
选择Google Web应用程序向导, 然后单击“下一步”按钮。
文章图片
单击下一步按钮后, 将打开一个新向导。
现在, 提供项目名称和程序包名称。在我们仅构建基本应用程序的同时, 选择Google SDK选项下的Use GWT并取消选中Use Google App Engine。
单击完成按钮。
文章图片
单击完成按钮后, 将生成以下目录
文章图片
入口点类 在此示例中, 类SampleWebApplication被称为GWT应用程序的入口点。该文件包含对服务器端代码的许多引用。该文件必须干净, 因为它具有许多参考。
存在一个预定义方法onModuleLoad(), 它是在运行GWT Web应用程序时执行的程序的入口点。
这与常见的Java程序中的public static void main（String args []）方法非常相似。
入口点类代码 SampleWebApplication.java
package com.srcmini.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/javaeehttps://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.srcmini.helloworld包下找到, 这是一个特定的配置文件。
它包含来自核心GWT的库, 该库包含在继承标记中。我们还可以使用继承标记添加第三方库。继承标记是指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.srcmini.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="http://www.srcmini.com/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="http://www.srcmini.com/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 enabledin order for this application to display correctly.<
/div>
<
/noscript>
<
/body>
<
/html>
UI组件在入口点类下更改。我们编写了几行代码来添加UI组件。在此示例中, 我们将添加Button, Vertical Panel, 事件处理。
package com.srcmini.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() {@Overridepublic 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);
} }运行GWT Web应用程序 GWT Web应用程序以两种模式运行：
- 开发模式：在这种模式下, Java代码可以运行到JVM中
- 生产模式：在这种模式下, GWT编译器将编译Java代码并创建在浏览器上运行的JavaScript。
文章图片
现在复制URL：
文章图片
【第一个GWT应用程序】输出：
文章图片
