在前面的例子中,都是做一个完全用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;
}
}