在已有的网页中加入GWT

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

}
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值