在已有的网页中加入GWT

konghaibo

浏览: 43713 次
性别:
来自: 武汉

最近访客更多访客>>

u010449872

javawxl

woodding2008

探索者_技术

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

GWT HTML JavaScript 工作

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

    
    
    
    
    
    <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>

    
    
    
    
    
    <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;
}

}

分享到：