Is it possible to build jquery like stand-alone widgets (like sliders or date selectors etc.) with GWT?

问题

Is it possible to build stand alone widgets as opposed to full blown applications in GWT ? For example, I could use a create a slider widget as a jquery plugin and use it to add interactivity to my existing HTML page (which may be a JSF or JSF etc. generatd HTML) along side some other jquery based widgets from third parties on the same page ? Is this possible with GWT ?

回答1:

Yes you can, and some of standard widgets have allready implemented static methods for attaching them without use of Rootpanel (so you can do "DOM programming"), for example look at HTML Widget. It has static method wrap for that purpose:

public static HTML wrap(Element element) {
    // Assert that the element is attached.
    assert Document.get().getBody().isOrHasChild(element);

    HTML html = new HTML(element);

    // Mark it attached and remember it for cleanup.
    html.onAttach();
    RootPanel.detachOnWindowClose(html);

    return html;
}

so in your code you can use it for attaching widget to existing DOM elements:

HTML html = HTML.wrap(Document.get().getBody().getFirstChildElement());

//or using selector engine (maybe wrapped Sizzle?):
HTML html = HTML.wrap(GSizzle.findOne("div.someClass:first"));

you can make similar static method in your widget:

class MyWidget extends Widget {
    public static MyWidget wrap(Element element) {
        MyWidget w = new MyWidget(element);
        w.onAttach();
        RootPanel.detachOnWindowClose(w);
        return w;
    }

    //Widget has protected constructor Widget(Element)
    //but it only creates widget but onAttach is called as Widget 
    //is added to Parent Widget-Panel
    protected MyWidget(Element e) {
        super(e);
    }

    //"plain" constructor for widget-panel-workflow
    public MyWidget() {
        super(Document.get().createDivElement());
    }
}

but crucial is to call widgets protected method onAttach before attaching to dom - it subscribes the widget to global dom event broadcaster, and call RootPanel.detachOnWindowClose on your widget to prevent memory leaks.

回答2:

Short answer is yes. Basically your html page with have a container for the gwt widget with a specified id. Then in your gwt module you'd write this:

RootPanel.get("ContainerId").add(MyWidget)

Keep in mind this can get complicated, especially when if comes to communication betweek the gwt widget and the html page.

回答3:

Have a look at GWT Exporter.

It was initially built to make Chronoscope usable by non-GWT developers: http://code.google.com/p/gwt-chronoscope/

来源：https://stackoverflow.com/questions/10035329/is-it-possible-to-build-jquery-like-stand-alone-widgets-like-sliders-or-date-se

标签

java

javascript

jquery

gwt