GWT 入门示例

sito

浏览: 44629 次
性别:
来自: bj

最近访客更多访客>>

whysqwhw

口天贝羊

polo2008

clearMarkCC

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

译自主要内容：介绍、安装 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）显示是能动态更新的

查看图片附件

0
顶

0
踩

分享到：

spagobi 引擎调用，跨web应用访问，filter ... | KPIs 已死？ tableau新观点

2011-09-16 10:16
浏览 6034
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论