gwt api 的层次结构

gwt api 的层次结构

这里所指的gwt api 主要是指有关界面/组件部分的api, 其它rpc,xml解析等不在讨论之列.

gwt 的整个api是分层构造的, 适当了解这些层次及其关系,有助于我们更好地掌握和使用这个伟大的工具.如图:

红线之下是javascript 的世界, 红线之上是gwt的世界, 我们可以看到gwt 一共分为四个层次, jsni/javascript overlay type , dom api , widget/组件 , 应用程序.下面逐一对各层进行说明.

 

jsni, javascript overlay type

 

jsni, javascript overlay type 是整个gwt体系中实现javascript 和java 交互的核心 .

• 先说jsni, jsni 全称是 javascript native interface. 在java 的类中,将一个方法标注为native之后, 使用gwt 规定的语法,就可以用javascript 来实现这个方法,例如:

public static native void alert(String msg) /*-{
    $wnd.alert(msg);
  }-*/;

这是gwt  Window 类中的源码--一个标准的jsni 方法, 我们可以看到,方法实现就是一行简单的javascript 代码. (这里没有用 alert 或者 window.alert 的原因是: gwt 代码运行在一个iframe中,如果直接用alert或者window.alert,引用的是iframe文档,而不是host page 文档). 经过这个方法包装,以后在gwt程序中使用 " Window.alert"  实际上就是调用了javascript 的 alert 方法,当然你也可以不用这个封装, 直接实用 $wnd.alert .

 

• 再说 javascript overlay type. ,这是官方对javascript overlay type 的介绍文档 ,简单来说呢,一个从JavaScriptObject 继承的类称为 javascript overlay type, 它的意义在于: 在java 中看来,这个对象就像一个真正的javascript 对象一样,它所有的属性,方法,在jsni method 中都可以用this 关键字访问到. 官方文档中举了一个json 的例子说明,实际上JavaScriptObject 对应的可以是任何javascript 中的对象,包括 document.getElementById 这样的dom 对象. 这样一来,大大简化了在gwt 中集成javascript 功能需要做的工作, gwt自己的dom api 整个就是在 javascript overlay type 和jsni 的基础上构建的. 看下面的gwt 源码:

 

public class Node extends JavaScriptObject

public final native <T extends Node> T appendChild(T newChild) /*-{
    return this.appendChild(newChild);
  }-*/;

 

 

public class Document extends Node

public static native Document get() /*-{
    return $doc;
  }-*/;

    第一段代码说明 Node 类 从 JavaScriptObject 继承, appendChild 方法内部的javascript 代码中使用了 "this"关键字,说明在运行时,这个Node 就是一个真实的dom对象. 第二段代码说明Document 从Node 继承, 所以也是一个"javascript overlay type" , 并且我们调用Document.get 获得一个Document 对象时,得到是 "$doc" 这个javascript 对象. (和上面的 $wnd 一样, $doc 指向的是 host page).

 

  以上所述是以浏览器内置的dom对象和gwt自己的dom 抽象层而言,实际上jsni 和javascript overlay type 可以和第三方的javascript 库工作. gwt flash bridge 这个项目在 flex ajax bridge 的基础上, 在gwt 中实现了类似gwt dom api一样的java 接口,通过这个接口,理论上可以实现在gwt完全通过java 来操纵flash 平台 api. 这样就可以灵活集成flash 平台的一些优秀特性到gwt的程序中. 下面是一个基于gwt flash bridge 实现的上传的demo截图.

实现的特性包括: 客户端文件检测和限制, 排队上传, 进度显示, 状态显示, action(取消/删除等). demo 地址在 这里

(注意如果打开了防火墙尤其是卡巴斯基,可能看不到上传的进度)

 

dom api

 

 dom api 实现了java 语言中的浏览器dom接口, 并且通过这个层次,可以封装不同浏览器的区别,gwt 中的组件使用 dom api 完成dom 的编程(某些地方也直接用jsni). 对于应用程序来说,需要的话,也可以使用dom api 直接处理dom 节点,而不仅仅局限于使用组件.

 

widget/组件

 

应用程序多数时候是使用widget 来构造用户界面, widget 自动管理相关的dom 节点的创建,parent-child 关系维护,以及提供了组件级别的事件系统.使得构造应用程序界面更为容易.

 

应用程序

 

gwt 的应用程序通过在 module 定义一个入口(entry-point)来实现(得到调用), onModuleLoad 方法类似于java 或者c中的 main(), 应用在这里完成所有必要的初始化工作. 值得一提的是,gwt 的应用不是必须要有用户界面的,一个应用可以用java 语言实现一些功能,然后在onModuleLoad中将这些功能安装到javascript 的命名空间中,然后在javascript 代码中就可以使用这些功能了.

应用程序中,可以根据需要,使用widget, 使用dom api, 或者直接使用jsni,java overlay type.

 

 

综上所述,gwt 是一个强大而又非常灵活的技术 , 可以根据需要灵活使用,既可以把整个page 当作一个应用,使用gwt来构造,也可以定义页面的某些区域使用gwt构造的界面,甚至可以仅仅是用gwt实现一些功能,然后export 给javascript 使用.

gwt 提供了jsni 和javascript overlay type,用于实现java 和javascript 的紧密集成,于是,任何在javascript 中 可以做的事情,在gwt 中都可以做 .

 

 

 

评论

2 楼 923080512 2012-11-29  

1 楼 xiewanzhi 2011-07-08  

太棒了，如果在说一下gwt与flash的交互会更加完美