GWT 入门示例

最新推荐文章于 2023-04-24 17:25:42 发布

iteye_5590

最新推荐文章于 2023-04-24 17:25:42 发布

阅读量327

点赞数

分类专栏： gwt 文章标签：开发工具 java javascript ViewUI

gwt 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

译自主要内容：介绍、安装 GWT，创建一个简单的 GWT 程序

环境：JDK 1.6, GWT 2.0 and Eclipse 3.6 (Helios).

详见：http://www.vogella.de/articles/GWT/article.html#firstgwt

1. 简介

GWT (GOOGLE WEB TOOLKIT）是一个辅助 JAVA 来开发 AJAX 应用程序的工具。开发者能编写和高度 JAVA 代码，然后 GWT 编译器将代码编译成 JAVASCRIPT。

GWT 有两种模式：

- 开发模式，允许调试 JAVA 代码

- WEB 模式，工程被转义为 HTML 并能发布到 SERVER

2. 组件、访问点和 HTML

GWT 可以理解为可调用组件集合，组件名 xx 和其配置文件 xx.gwt.xml 用来定义一个访问点，类似于 JAVA 中的 MAIN 方法

组件与 HTML 页面相关联，HTML 称之为主页，HTML 能定义 DIV 段用来包含 UI 的组件，这样，UI 的组件能被映射成 HTML 页面元素

3. 样式 CSS 的应用

GWT 工程能自定义网页的样式，GWT 中的 WIDGET 可以用 setStyle(String s) 方法来分配一个样式容器

4. 安装 GWT

- 在线更新法

详见：http://code.google.com/intl/zh-CN/eclipse/docs/install-eclipse-3.6.html

由于之间安装的是 Helios - Eclipse classic 3.6.0 (170MB) ，里面没有 wst （web standard tools）相关插件，而 google 的工具包依赖于这些插件，所以 update 失败！

- 手动下载 zip 包安装方法

介绍：http://code.google.com/intl/zh-CN/eclipse/docs/install-from-zip.html

更新点 http://download.eclipse.org/releases/helios Install Helios > Web, XML, and Java EE Development > Eclipse Web Developer Tools. 下载 google 的工具包： http://dl.google.com/eclipse/plugin/3.6/zips/gpe-e36-latest.zip 解压到 eclipse 根目录下的 dropins 文件夹，重启 eclipse 即可

但是在安装 wst 的时候，更新点连接超时。因此考虑下载一个完整的包含的 wst 插件的 eclipse 版本 — http://www.eclipse.org/downloads/packages/release/helios/r （Eclipse IDE for Java EE Developers, talend eclipse 中也包含相关插件）下载地址：http://download.actuatechina.com/eclipse/technology/epp/downloads/release/helios/R/eclipse-jee-helios-win32.zip 然后将 google 工具包解压到 Eclipse 下完成安装。

附：Helios 介绍

Helios 是有着 39 个 Eclipse 项目的同步版本。据统计，Helios 版本包含 3300 万行代码，这由来自 44 家公司的 5000 名 Eclipse.org 成员共同开发完成。一般来说，关于 Helios 和 Eclipse 同步版本有一点一定要了解，同步版本并不表示这些项目是统一的。每个项目都是 Eclipse.org 中的一个独立的开源项目，由自己的项目领导运作，有自己的成员与开发计划。同步版本的概念旨在提供一个透明的、可预测的开发周期。

详见：http://kaku.javaeye.com/blog/720452

5. 创建一个简单的 GWT 工程

新建 web application 需要 google sdk http://google-web-toolkit.googlecode.com/files/gwt-2.0.4.zip 解压指定 sdk 位置即可。

5.1 - 新建一个 new web application project，去掉 "use google app engine" 的勾选。

project Name: de.ytao.gwt.helloworld

package: de.ytao.gwt.helloworld

5.2 - 删除 client 和 server 包下的所有文件，在 client 下创建 HelloGwt 类，内容如下：

- 修改 de.ytao.gwt.helloworld 包下的 xml 文件：De_ytao_gwt_helloworld.gwt.xml，使其指向新的 entry point

h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
}

.gwt-Label {
 color: #DF0101;
 font: normal 12px tahoma, arial, helvetica, sans-serif;
 border: 1px solid #99bbe8;
 padding: 14px;
}

.gwt-Button {
 height: 5.7em;
 margin-bottom: 5px;
 padding-bottom: 3px;
 font-size: 12px;
 font-family: arial, sans-serif;
}

5.3 - 精简 HTML 文件 De_ytao_gwt_helloworld.html 为

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="De_vogella_gwt_helloworld.css">
    <title>My First GWT applicaton</title>
    <script type="text/javascript" language="javascript" src="de_vogella_gwt_helloworld/de_vogella_gwt_helloworld.nocache.js"></script>
  </head>

  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    <h1>My First GWT applicaton</h1>
   
  </body>
</html>

5.4 - 由于修改了默认的 client 包下的 entry point 类，所以相应地修改 xml 文件为：

  <!-- Default page to serve -->  <welcome-file-list>    <welcome-file>De_ytao_gwt_helloworld.html</welcome-file>  </welcome-file-list>

5.5 - 运行 run as web application，在标签 development mode 下有一个 URL 地址，复制粘贴到浏览器就能看到网页了。

5.6 - 指定网页样式

Label label = new Label("Hello GWT !!!");
// label.setStyleName("my_label_for_css");
Button button = new Button("Say something");

打开被注释掉的那行，就能指定网页的样式了。但这个样式名还不明白是怎么回事，貌似是去掉 De_ytao_gwt_helloworld.css 的样式了

6. 总结

（1）可以看到 war 文件夹下有一般的 web 结构

（2）生成了一个 JS 文件，结合 De_ytao_gwt_helloworld.gwt.xml

（3）显示是能动态更新的

iteye_5590

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
GWT 入门示例

译自主要内容：介绍、安装 GWT，创建一个简单的 GWT 程序环境：JDK 1.6, GWT 2.0 and Eclipse 3.6 (Helios).详见：http://www.vogella.de/articles/GWT/article.html#firstgwt1. 简介GWT (GOOGLE WEB TOOLKIT）是一个辅助 JAVA 来开发 AJAX 应用程序的工具...
复制链接

扫一扫