GWT Hosted模式运行原理

hosted模式运行原理,对源码的理解应该是这样的

 

 

以下内容转自：

http://soja.sourceforge.net/blog/index.html

Discover GWT's host mode

 

GWT有一个相当神奇的功能就是能够在Host模式下进行调试，那么它是如何进行工作的呢？本文试图解答下述的问题：
1、Module.onModuleLoad() 方法是如何被调用的？实际上onModuleLoad是每一个GWT应用的入口点，能够将执行的控制权转移到onModuleLoad即启动了一个GWT应用程序。
2、在Java代码中如何执行 JSNI 代码。实际上，GWT的一些低层的任务还是通过 JSNI 借口来完成的，比如说：DOM.getElementById实际上是等同于：
  public native Element getElementById(String id) /*-{
    var elem = $doc.getElementById(id);
    return elem ? elem : null;
  }-*/;
3、在JSNI的script代码中，又是如何的访问Java对象的字段、方法呢？

基本上，理解了上述3个问题后，基本上就可以明白GWT的Host工作模式了。

1、GWT使用了 eclipse swt 来构建HOST模式的用户界面，在其中嵌入了一个浏览器（在我的机器上，是IE浏览器），GWT同时使用了SWT提供的访问os native/COM的相关机制。对于浏览器窗口，GWT在其中设置了一个external 变量，window.external, 现在这个window.external 指向的 IDispatch 对象实际上是一个 Java 对象来的，对其的方法调用将变为对java代码的调用。
GWT的启动代码即 gwt.js 中包括了：
function __gwt_initHostedModeModule(moduleFrame, moduleName) {
    if (!window.external.gwtOnLoad(moduleFrame, moduleName)) {
        // Module failed to load.
        //
        if (__gwt_onLoadError) {
            __gwt_onLoadError(moduleName);
        } else {
            window.alert("Failed to load module '" + moduleName + "'.\nPlease see the log in the development shell for details.");
        }
    }
}
在 浏览器装载入 html 后， gwt.js 中的 _gwt_initHostModelModule 方法被调用，这个js方法就调用 window.external.gwtOnLoad 方法，从而执行其 Module.onModuleLoad 的方法，对整个GWT程序进行初始化。


2、在Java中如何调用javascript的方法，实际上，所有的JSNI被GWT编译器编译成为一个 javascript 方法，并且保存在 window 对象中，一般的，demo.DemoClass.method() 被保存成为一个 @ demo.client.Demo::bar(Ljava/lang/String;) 形式的函数。实际native的java代码被替换成为对这个 javascript 的调用。
如何调用呢？ 通过COM API: window.call("function_name", arguments)

3、在 JSNI 中如何调用 java 的方法，或者访问 java 的变量呢？实际上，在调用javascript方法前，所有的Java对象被包装成为一个 IDispatch 对象，javascript 中 对这些对象的访问都会动态的调用回 java.