在前面的例子中，都是做一个完全用GWT构建的页面。很多应用中，都是在普通页面中加入JavaScript。既然GWT生成的是JavaScript，那么同样也可以在普通的页面中加入GWT。这样我们就可以利用HTML设计出更多丰富多彩的界面了。
要在现有网页中指定的地方添加GWT的部件（或者是添加GWT生成的动态内容），需要做下面几项工作：
-
在HTML中，给需要显示GWT动态内容的区域标注ID属性。
-
GWT代码部分，使用RootPanel.get(“指定的ID
”).add(GWT部件
)，向指定的ID
区域添加GWT部件
。
-
在HTML的HEAD部分加入对GWT建立的JS的引用。
- 在</BODY>前加入GWT的iframe引用。
具体如何建立HTML文件和GWT代码就不详细讲了，看过前面的教程应该很容易理解下面的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HelloGWTHtml</title>
<!-- 下面这段其实已经GWT添加了 -->
<!-- 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="hellogwt.HelloGWTHtml.nocache.js"></script>
<link href="HelloGWTHtml.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="head">网站的标题</td>
</tr>
<tr>
<td ><table width="768" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="172"><div id="list">显示内容列表</div></td>
<td width="596"><div id="content">显示内容</div></td>
</tr>
</table></td>
</tr>
<tr>
<td id="foot">copyright ddddd</td>
</tr>
</table>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
button {
display: block;
font-size: 16pt
}
.widePanel {
width: 100%
}
img {
margin-top: 20px;
}#list {
background-color: #CCCCCC;
padding: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
}
#content {
padding: 5px;
}
body {
font-size: 12px;
}
#head {
font-size: 18px;
font-weight: bold;
background-color: #0099FF;
color: #FFFFFF;
padding: 6px;
}
#foot {
background-color: #E7E7E7;
text-align: center;
padding: 5px;
}
public class HelloGWTHtml implements EntryPoint {
private HTML content;// 用于显示动态内容
/**
* This is the entry point method.
*/
public void onModuleLoad() {
// 建立一个StackPanel,将放在左边，显示连接列表
StackPanel stack = new StackPanel();
initStack(stack);
// 建立用于动态显示内容的HTMl部件
content = new HTML();
// 清理一下HTML的原始内容
clean("head");
clean("list");
clean("content");
// 往指定的几个区域添加GWT部件
RootPanel.get("head").add(new Label("由GWT动态建立的网页"));
RootPanel.get("list").add(stack);
RootPanel.get("content").add(content);
}
protected void clean(String id) {
Element element = DOM.getElementById(id);
DOM.setInnerHTML(element, "");
}
protected void initStack(StackPanel stack) {
VerticalPanel sites = new VerticalPanel();
VerticalPanel newest = new VerticalPanel();
VerticalPanel about = new VerticalPanel();
stack.setWidth("100%");
stack.add(sites, "内容列表");
stack.add(newest, "最新介绍");
stack.add(about, "关于");
sites.add(createLink("介绍GWT","如果要快速了解<B>GWT</B>,还是看http://www.smartdio.com 吧"));
sites.add(createLink("详细GWT","详细了解<B>GWT</B>,那就看GWT官方网站"));
sites.add(createLink("要用GWT","去官方网站下载吧"));
newest.add(createLink("查看最新内容","Sorry,没有！"));
about.add(createLink("关于这个程序","这是一个实例，演示如何在HTML中插入GWT建立的内容。"));
}
protected Hyperlink createLink(String text, final String message) {
Hyperlink link = new Hyperlink();
link.setText(text);
link.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
content.setHTML(message);
}
});
return link;
}
}
分享到：
相关推荐
5. **事件处理**：GWT中的事件处理机制允许用户与界面交互。你可以通过添加事件监听器来响应用户的点击、键盘输入等操作。 6. **RPC通信**：GWT的Remote Procedure Call (RPC)机制使得客户端和服务器之间能进行数据...
EXT-GWT的API和DOC文档对于学习和使用EXT-GWT至关重要，它们详尽地介绍了各个组件的用法和功能，帮助开发者了解如何在项目中集成和使用这些组件。 接下来，“Gwt-Ext基础-中级-进阶”这部分教程可能涵盖了从基础到...
通过阅读博文（链接已给出，但在这里无法直接访问），你可能会了解到如何解析和理解GWT的内部工作原理，以及如何利用GWT的相关工具提升开发效率。例如，可能是关于性能优化、调试工具的使用，或者是GWT与其他工具...
5. **配置.gwt.xml文件**：在项目中，有一个名为`*.gwt.xml`的配置文件，这里可以定义模块的属性，如兼容的浏览器、使用的GWT库等。 6. **编写代码**：使用Java编写业务逻辑和用户界面，GWT会自动处理JavaScript的...
Gwt中文手册,GWt入门Gwt中文手册,GWt入门Gwt中文手册,GWt入门
在GWT中，每个模块都有一个入口点，用于指定应用程序的入口点类。我们可以在模块配置文件中指定入口点类，以便启动应用程序。 可翻译代码 在GWT中，我们可以指定可翻译代码的路径，以便GWT编译器可以将Java代码...
在这个环境中，GWT Advanced Table是一个强大的表格组件，专为提高网页应用的数据展示和交互能力而设计。本文将深入探讨GWT Advanced Table的特性、用法以及如何在实际项目中集成和使用它。 ### 一、GWT Advanced ...
网页表格组件GWT Advanced Table是Google Web Toolkit (GWT)框架中的一个高级表格实现，它提供了丰富的功能和自定义选项，使得在Web应用中展示和操作数据变得更加灵活和高效。GWT本身是一个开源的Java开发工具，允许...
1. **组件使用**：SmartGWT中的组件如Grid（表格）、Form（表单）、Tree（树形结构）、Dialog（对话框）等，都有详细的示例展示。开发者可以通过这些例子了解如何创建、配置和操作这些组件。 2. **数据绑定**：...
**GWT（Google Web Toolkit）** 是一个由Google开发的...虽然现代Web开发可能转向了React、Vue.js或Angular等框架，但GWT在某些场景下，尤其是需要利用Java后端服务和已有Java代码基础的项目中，仍然具有其独特的价值。
5. **创建GWT项目**：在Eclipse中，使用新安装的插件创建一个新的GWT项目。选择“File” > “New” > “Other” > “Google” > “Google Web Application Project”。在向导中，指定项目名和选择使用的GWT SDK版本...
在 GWT 中，所有的 UI 组件都需要放置在一个称为面板的容器中。面板不仅仅是组件的容器，它们还定义了布局方式和外观风格。GWT 支持多种类型的面板，例如绝对定位面板 (AbsolutePanel)、流式布局面板 (FlowPanel) 等...
此外，MVP（Model-View-Presenter）模式是GWT中推荐的架构模式，它分离了用户界面、视图逻辑和业务逻辑。 **5. RPC通信** GWT提供了Remote Procedure Call (RPC)机制，使得客户端和服务器之间可以进行安全的数据...
GWT提供了强大的开发环境，如GWT Developer Plugin，可以在浏览器中直接进行开发和调试，实时预览和修改代码，极大地提高了开发效率。 6. **数据绑定与持久化**： GWT提供了GWT-RPC（Remote Procedure Call）服务...
在GWT应用中，通常会使用混淆技术来保护代码不被轻易反编译，而"unseal"可能就是解除这种保护，让开发者能更直观地理解编译后的代码结构。 GWT的主要特点包括： 1. **Java到JavaScript的编译**：GWT编译器将Java...
在“gwtfu-code”这个压缩包中，很可能是包含了一些GWT的学习示例项目。这些示例可能涵盖GWT的基础用法，如创建简单的Hello World程序、使用Widgets构建UI、实现数据绑定、执行异步RPC调用等。通过研究这些示例，...
在这个模式下，开发者可以在 Java 虚拟机中使用 GWT 内置的浏览器模拟器运行未转换的 Java 代码，实现快速的“编码、测试、调试”循环。启动宿主模式可以通过运行 `com.google.gwt.dev.GWTShell` 命令实现。 【Web ...
GWT Eclipse插件是专门为Eclipse定制的扩展，它为开发者提供了在Eclipse环境中开发、测试和调试GWT应用的便利。Eclipse 3.4版本的GWT插件包含了针对该版本Eclipse的一系列优化和特性，使得开发者能够更加高效地进行...