在前面的例子中，都是做一个完全用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代码就不详细讲了，看过前面的教程应该很容易理解下面的代码：
Html代码
<!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>
<!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> Js代码
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;
}
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;
} Java代码
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;
}
}
