srcmini本文概述
要构建GWT应用程序, 我们有四个部分, 在最后这一部分是可选的。
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/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.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="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.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() {
@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);
}
}运行GWT Web应用程序
GWT Web应用程序以两种模式运行：
- 开发模式：在这种模式下, Java代码可以运行到JVM中
- 生产模式：在这种模式下, GWT编译器将编译Java代码并创建在浏览器上运行的JavaScript。
在本教程中, 我们将GWT Web应用程序运行到“ GWT Super Dev Mode”中, 该模式在运行时编译Java代码并在浏览器上运行JavaScript。
现在复制URL：
输出：
评论前必须登录！
注册