GWT - Wrapping widgets written in jQuery

Question

I want to use in GWT a menu widget (tutorial and code is here: http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/) that has the javascript code written with jQuery. The jQuery code seems simple, but i do not have experience with this library, so I would like to know what is the best (fast and simple let's say) way to use (run) that code in GWT (maybe I'll use other jQuery widgets as well).

I found a library called gwtquery and if this is the approach to take, any advice or code would be very very useful (in speeding up that code wrapping process ).

Answer 1

You can use jQuery with GWT.

1. The first key is JSNI. JSNI is how you can directly call native JavaScript functions from your GWT/Java class.
2. The second key is to realize that all the names that have global (window) scope in native JavaScript code are attributes of the $wnd object in JSNI.
3. Finally, JSNI has a notation the GWT compiler recognizes for calling GWT/Java code from the JavaScript code. This is important because all the "Java" methods are compiled to JavaScript and have auto-generated names in JavaScript. The GWT compiler must insert the correct name into your JavaScript code for it to call the "Java" code.
4. The GWT APIs give you access to the elements in the DOM. If you create the elements in the page, then the GWT code can access them as elements. Some elements can be "wrapped" as a widget, but some widgets do not support wrapping simple DOM elements.

Here is a short (untested) example demonstrating how to embed the sample JavaScript code from the slide-down-box-menu website in GWT. This example doesn't do much GWT<->JSNI/jQuery interaction, but it does integrate the standard jQuery code in a GWT class.

    import com.google.gwt.core.client.EntryPoint;
    public class MyEntryPoint implements EntryPoint
        {
        public void onModuleLoad()
            {
            this.configureMenu();
            }

        public static final native void configureMenu()
            /*-{
            $wnd.$(function() {
                    $wnd.$('#sdt_menu > li').bind('mouseenter',function(){
                            var $elem = $wnd.$(this);
                            $elem.find('img')
                                     .stop(true)
                                     .animate({
                                            'width':'170px',
                                            'height':'170px',
                                            'left':'0px'
                                     },400,'easeOutBack')
                                     .andSelf()
                                     .find('.sdt_wrap')
                                     .stop(true)
                                     .animate({'top':'140px'},500,'easeOutBack')
                                     .andSelf()
                                     .find('.sdt_active')
                                     .stop(true)
                                     .animate({'height':'170px'},300,function(){
                                    var $sub_menu = $elem.find('.sdt_box');
                                    if($sub_menu.length){
                                            var left = '170px';
                                            if($elem.parent().children().length == $elem.index()+1)
                                                    left = '-170px';
                                            $sub_menu.show().animate({'left':left},200);
                                    }   
                            });
                    }).bind('mouseleave',function(){
                            var $elem = $wnd.$(this);
                            var $sub_menu = $elem.find('.sdt_box');
                            if($sub_menu.length)
                                    $sub_menu.hide().css('left','0px');

                            $elem.find('.sdt_active')
                                     .stop(true)
                                     .animate({'height':'0px'},300)
                                     .andSelf().find('img')
                                     .stop(true)
                                     .animate({
                                            'width':'0px',
                                            'height':'0px',
                                            'left':'85px'},400)
                                     .andSelf()
                                     .find('.sdt_wrap')
                                     .stop(true)
                                     .animate({'top':'25px'},500);
                    });
            });
            }-*/; // end JSNI method
        } // end class

The gwtquery library is not what you are looking for: it is not related to jQuery except for mimicing its API.