migrate Widgets from other AJAX-frameworks to GWT

[error007]

Hi,

Developing with GWT is really a nice, and even have the heart to say
the most comfortable, way to develop AJAX-apps. A bit dissappointing
are the standard-widgets which GWT provides compared to other
Frameworks like DOJO. And now my question: is it possible to mix these
two frameworks in a simple way? For example DOJO's Fisheye is really
nice, what would be the best way to migrate this Widget to GWT? Is
there any tutorial or webblog handling this topic?

best regards,
david

[Vivian Li]

Hi david,
   I have implemented a Dojo datePicker widget in one of my projects using the following technique. You may try extending it to support other Dojo widgets to see if it works.

  Edit the part that says " com.yourpackage.client.DojoWidget" to be whichever package you place these classes into.

/**
  * The base class of all GWT DojoWidgets
  */
public abstract class DojoWidget extends Widget {
    private JavaScriptObject wid=null;
 
    /**
     * dojoType is equivalent to the dojoType attribute used on HTML elements. e.g. 'datePicker'
     */
    public DojoWidget(String dojoType)
    {
        setElement(DOM.createDiv());
        wid=addDojoWidget(getElement(), dojoType, this);

    }


    /**
     * Implement this in subclasses to be notified when an event on the underlying DojoWidget occurs
     */
    public abstract void onDojoEvent(JavaScriptObject dojoWidget);

    /**
     *  Create the Dojo widget and put it into our DIV element
     */
    protected native JavaScriptObject addDojoWidget(Element elem, String kind, DojoWidget ddw) /*-{

         var wid=$wnd.dojo.widget.createWidget(kind);
         elem.appendChild(wid.domNode);
         return wid;
    }-*/;

    /**
     *  Connect a dojo event on this widget to our class
     */
    protected void connect(String event, DojoWidget dw)
    {
        connect(event, wid, dw);
    }

    private native void connect(String event, JavaScriptObject wid, DojoWidget dw) /*-{
        $wnd.dojo.event.connect(wid, event, function()
         {
             dw.@com.yourpackage.client.DojoWidget::onDojoEvent(Lcom/google/gwt/core/client/JavaScriptObject;)(wid);
         });
    }-*/;

    protected static native String getJSProperty(JavaScriptObject jsobj, String propName) /*-{
        var v = jsobj[propName];
        return (v === undefined) ? null : String(v);
    }-*/;
}


Then here is the DojoDateWidget subclass

public class DojoDateWidget extends DojoWidget implements SourcesChangeEvents {
    public DojoDateWidget() {
        super("datePicker");
        connect("setDate", this);
    }

    public String getDate() {
        return date;
    }

    private String date;

    public void onDojoEvent(JavaScriptObject dojoWidget) {
         date = getJSProperty(dojoWidget, "date");
         listeners.fireChange(this);
    }

    private ChangeListenerCollection listeners=new ChangeListenerCollection();
    public void addChangeListener(ChangeListener listener) {
        listeners.add(listener);
    }

    public void removeChangeListener(ChangeListener listener) {
        listeners.remove(listener);
    }
}


To use, just add it to a Form, add a ChangeListener to the widget, and call getDate() on a change to retrieve the picked date.

-Vivian

[Vivian Li]

BTW, don't forget to add the necessary Dojo scripts to your public directory as well as modifying your html entry point page to contain a script tag to include the dojo toolkit, such as


    <script type="text/javascript" src=" dojo.js"></script>


        <script type="text/javascript">
        dojo.require("dojo.widget.DatePicker");
        </script>


You will need to require each widget you're using.

-Vivian