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 i

Solution 1:

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.

Solution 2:

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:

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

    HTMLhtml=newHTML(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:

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

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

you can make similar static method in your widget:

classMyWidgetextendsWidget {
    publicstatic MyWidget wrap(Element element) {
        MyWidgetw=newMyWidget(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-PanelprotectedMyWidget(Element e) {
        super(e);
    }

    //"plain" constructor for widget-panel-workflowpublicMyWidget() {
        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.

Solution 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/