如何從HTML和JavaScript製作GWT小部件？

Question

我需要從HTML和JavaScript代碼中創建一個自定義的GWT小部件。 JavaScript代碼應該在窗口小部件上調用，但JavaScript應該接收小部件DOM組件作爲參數。另外，小部件的HTML必須直接依賴於賦予小部件構造函數的參數。

這樣做的「慣用」方式是什麼？

Answer 1

這很簡單。您可以從延伸Widget類開始。

要創建DOM表示，您需要使用Document.get()（或其他舊的API取決於您的偏好）。 要調用外部JavaScript，您將需要使用JSNI。

此外，你將不得不覆蓋onDetach和onAttach方法，所以你可以通知外部的JS當你的元素被添加到DOM，當外部JS應該執行一些清理（如果需要）。

示例代碼：

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()); 
    } 

}