【译】GWT入门：创建一个GWT Project

【译自：https://developers.google.com/web-toolkit/doc/latest/tutorial/create?hl=zh-CN】

 

前两篇里 【译】GWT入门：设置Eclipse 和 【译】GWT入门：准备环境 分别介绍了如何在命令行下和eclipse里创建和启动一个GWT 的demo project，因此这里就略过这部分，将具体介绍一下生成的文件和包。

 

这里工程名是StockWatcher，包是 com.google.gwt.sample.stockwatcher 。以下介绍都是基于Eclipse创建的工程之上的。

 

一、目录介绍

• /src/com/google/gwt/sample/stockwatcher
  包括GWT的模块定义（Module）和应用初始化文件
   
• /test/com/google/gwt/sample/stockwatcher
  包括测试文件
  
• /war
  所有需要发布的静态文件、资源，例如图片， css文件， html文件等等
  
• /war/WEB-INF
  包括Java Web应用文件，例如web.xml等
  
• /war/WEB-INF/lib
  包括Java Web库

 

二、文件介绍

• StockWatcher.gwt.xml
  GWT模块定义文件
  
• StockWatcher.html
  主页
  
• StockWatcher.css
  css样式定义文件
  
• web.xml
  Java Web应用描述文件
  
• StockWatcher.java
  GWT Entry point 类 （GWT入口类）
  
• GreetingService.java, GreetingServiceAsync.java, GreetingServiceImpl.java
  生成的RPC示例类文件
  
• gwt-servlet.jar
  GWT server运行库
  
• StockWatcherTest.java
  测试类

 

三、检查生成的Project component

检查一下生成的一些文件，看看它们是怎么一起组合成你的GWT项目的。

module XML 文件

打开文件StockWatcher/src/com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml。

 

它包含了GWT模块定义，资源集和一个shared包。默认下，模块继承了每个项目都必需的GWT核心模块；除此，你也可以指定继承一些其他的模块

 

<?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.5.0//EN"
  "http://google-web-toolkit.googlecode.com/svn/tags/2.5.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='stockwatcher'>
	<!-- 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.google.gwt.sample.stockwatcher.client.StockWatcher' />

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

</module>

 

在这个文件里，指定了当前工程的入口类。为了编译，一个GWT模块必须有一个入口；如果没有，则此模块只能被用作给其他模块继承。可以包含一些其他的、已经在它们内部定义了入口(Entry Point)的模块，如果这样，那当前模块就同时拥有了多个入口， 每个入口将会顺序执行。

 

默认下，StockWatcher有两个样式文件：默认的GWT 标准样式(standard.css)（通过继承theme来引用）和应用自己的样式 StockWatcher.css（生成的）。后面将会介绍如何覆盖默认的样式。

 

主页

打开主页文件 StockWatcher/war/StockWatcher.html

 

在这个html文件里，引用了由GWT生成的javascript源文件，这个javascript文件负责页面上的动态生成的元素。页面上的body元素的所有内容都可以动态的生成。 不过在我们的StockWatcher示例里， 将混合使用静态和动态元素。 其中在html页里创建了一个<div>元素作为将动态生成的元素的占位符

 

选择 Quirks 模式还是 Standards 模式

 

为了提供最好的跨浏览器兼容功能，GWT设置doctype声明为HTML 4.01 版本， 也就是说设置浏览器的渲染引擎为 Quirks 模式。如果你想使用，例如，Standard的模式， 可以看看number of other doctypes ，可以强制浏览器使用这个渲染模式。 一般来说， GWT应用在 Standards 模式也和 Quirks 模式下没什么区别，这个问题在GWT 1.5里得到了极大的提升， 但是还是有很多工作需要继续。

 

保持历史信息

 

GWT提供了一种机制，可以帮助应用满足用户在访问网页时的体验。尤其是他们可以使用浏览器的回退（back）按钮， 例如在一个多页向导的情形，或者购物车等场景。 主页 (host page) 包含了一个iframe tag， 用于在GWT应用中与历史信息交互。要了解更多，可以参见 History 。

样式

打开样式文件  StockWatcher/war/StockWatcher.css。

 

一个样式关联到一个工程上。默认的，这个工程的样式 StockWatcher.css，包含这个工程的样式规则。在Applying Style 一节里， 你将学习如何定义、修改工程的样式。

 

和任何web页一样，你可以指定多个样式文件。

 

Java源码

 

打开StockWatcher工程的入口类： StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java。

 

它是当前工程的Java源码，将作为客户端运行（即会被最终被编译成Javascript程序）。在这个教程里， 也将学习到如果通过修改它来修改客户端显示。

 

StockWatcher类实现了GWT的EntryPoint接口，它包含了 onModuleLoad 文件。因为StockWatcher类被指定为入口类， 因此，当你运行StockWatcher程序时，onModuleLoad 方法就会被调用。

 

StockWatcher类通过你在StockWatcher的module定义（StockWatcher.gwt.xml）中包含的其他GWT模块获取一些其他的功能。例如， 当构建用户界面时，你也可以包含一些来自 com.google.gwt.user.client.ui 包里的类型和资源， 因为它是GWT核心模块的一个部分，包含在com.google.gwt.user.User模块里。