如何从HTML和JavaScript制作GWT小部件?

时间:2012-07-27 16:09:21

标签: java gwt

我需要从HTML和javascript代码制作自定义GWT小部件。应该在窗口小部件上调用javascript代码,但是javascript应该接收窗口小部件DOM组件作为参数。

此外,小部件的HTML必须直接依赖于给小部件构造函数的参数。

这样做的“惯用”方式是什么?

1 个答案:

答案 0 :(得分:3)

这很简单。您可以从扩展Widget类开始。

要创建DOM表示,您需要使用Document.get()(或其他旧api取决于您的喜好)。 要调用外部JavaScript,您需要使用JSNI

此外,您还必须覆盖onDetachonAttach方法,以便在将元素添加到dom时以及外部JS应执行某些清理(如果需要)时通知外部JS。 / p>

示例代码:

public class MyWidget extends Widget{

     public MyWidget(String params) {
         Document document = Document.get();
         DivElement divElement = document.createDiv();
         divElement.setInnerHtml(params);
         setElement(divElement); //important, widget needs to know it's root element
     }


     private static native void doJsMagic(Element element)/*-{ //notifies js about element
         $wnd.doSomething(element);
     }-*/;

     private static native void undoJsMagic(Element element)/*-{ 
        //notifies js that it should do some cleanup (if needed)
        //since it is unaware of GWT widget lifecycle
        $wnd.undoSomething(element)

     }-*/;

     @Override
     public void onAttach() {
        super.onAttach();
        doJsMagic(getElement());
     }

     @Override
     public void onDetach() {
        super.onDetach();
        undoJsMagic(getElement());
     }

}