GWT工具包扩展与应用指南

# GWT 工具包扩展与应用指南 ## 1. GWT 工具包概述 GWT 并非框架，而是工具包，它不规定应用构建方式，而是提供构建应用的工具集。该工具包可让开发者访问 HTML、CSS 和 JavaScript 等外部技术，还能扩展工具包内的工具。 ## 2. 构建新小部件 ### 2.1 构建方式 可以通过组合现有小部件来构建新小部件，但有时需要创建不依赖现有小部件的新小部件，此时可采用构建 GWT 基本小部件的技术。 ### 2.2 示例：Link 小部件 以下是创建 Link 小部件的详细步骤： 1. **声明类** ```java public class Link extends Widget{ ``` 2. **构造函数** ```java public Link(){ setElement( DOM.createAnchor() ); sinkEvents( Event.ONCLICK | Event.MOUSEEVENTS ); setStyleName("gwtapps-Link"); } ``` 其中，`setElement` 方法将新创建的锚标签设置为小部件的主元素；`sinkEvents` 方法指定要接收的事件；`setStyleName` 方法设置小部件的默认样式名。 3. **设置值的方法** ```java public void setText(String text) { DOM.setInnerText(getElement(), text); } public void setLink( String link ){ DOM.setAttribute(getElement(), "href", link ); } ``` `setText` 方法使用 `DOM.setInnerText` 设置锚标签内的文本；`setLink` 方法使用 `DOM.setAttribute` 设置锚标签的 `href` 属性。 4. **事件接口与监听器** ```java public class Link extends Widget implements SourcesClickEvents, SourcesMouseEvents { private ClickListenerCollection clickListeners; private MouseListenerCollection mouseListeners; public void addClickListener(ClickListener listener) { if (clickListeners == null) { clickListeners = new ClickListenerCollection(); } clickListeners.add(listener); } public void addMouseListener(MouseListener listener) { if (mouseListeners == null) { mouseListeners = new MouseListenerCollection(); } mouseListeners.add(listener); } } ``` 实现事件源接口并使用事件监听器辅助集合来管理监听器。 5. **事件分发** ```java public void onBrowserEvent(Event event) { switch (DOM.eventGetType(event)) { case Event.ONCLICK: if (clickListeners != null) clickListeners.fireClick(this); break; case Event.ONMOUSEDOWN: case Event.ONMOUSEUP: case Event.ONMOUSEMOVE: case Event.ONMOUSEOVER: case Event.ONMOUSEOUT: if (mouseListeners != null) mouseListeners.fireMouseEvent(this, event); break; } } ``` 重写 `onBrowserEvent` 方法，根据事件类型分发事件给相应的监听器。 ### 2.3 CSS 光标类型 | 光标类型 | 示例 | 光标类型 | 示例 | | ---- | ---- | ---- | ---- | | default | | not-allowed | | | crosshair | | col-resize | | | hand/pointer | | row-resize | | | move | e-resize, w-resize | | | | text | ne-resize, sw-resize | | | | wait | nw-resize, se-resize | | | | help | n-resize, s-resize | | | | progress | | | | ## 3. 使用 JavaScript 原生接口（JSNI） ### 3.1 背景 由于浏览器兼容性问题，GWT 的 DOM 实现并不完整，因此提供了 JSNI 来直接访问浏览器的 JavaScript 函数和对象。但使用时需谨慎，因为直接访问 JavaScript 可能导致浏览器兼容性问题，需要进行额外测试。 ### 3.2 编写纯 JavaScript 方法 使用 GWT 的 JSNI 编写纯 JavaScript 方法很简单，只需将方法声明为 `native` 并在注释中提供 JavaScript 实现。例如： ```java public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/; ``` 这里使用 `$wnd` 代替浏览器的 `window` 对象，因为 GWT 在隐藏框架中运行 JavaScript，`$wnd` 可引用用户实际查看的窗口对象。 ### 3.3 JavaScript 调用 Java 方法 JavaScript 调用 Java 方法的签名形式如下： ``` [instance-expr.]@class-name::method-name(param-signature)(arguments) ``` 各部分含义如下： - `instance-expr`：访问非静态方法时指定实例。 - `class-name`：包含要调用方法的类的完整类名。 - `method-name`：要调用的方法名。 - `param-signature`：参数类型的编码列表。 Java 类型的签名编码如下表所示： | Java 类型 | 签名 | | ---- | ---- | | boolean | Z | | byte | B | | char | C | | short | S | | int | I | | long | J | | float | F | | double | D | | 任何类（如 java.lang.String） | Lclass/name ;（如 Ljava/lang/String;） | | 数组（如字符串数组、整数数组） | [type（如 [java/lang/String;、[I） | ### 3.4 示例：Multi - Search 应用 该应用使用 JSNI 扩展 GWT，绕过浏览器的同源策略从远程服务器获取数据。以下是相关代码： ```java static public void get( String url, String callbackName, JSONRequestHandler handler ){ createCallbackFunction( handler, c ```