GWT — виджеты-обертки, написанные на jQuery

Я хочу использовать в GWT виджет меню (руководство и код здесь: http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/), в котором есть код javascript, написанный с помощью jQuery. Код jQuery кажется простым, но у меня нет опыта работы с этой библиотекой, поэтому я хотел бы знать, как лучше всего (скажем, быстро и просто) использовать (запускать) этот код в GWT (возможно, я буду использовать другие виджеты jQuery).

Я нашел библиотеку под названием gwtquery, и если использовать этот подход, любой совет или код быть очень полезным (для ускорения процесса упаковки кода).


person Andrei F    schedule 08.08.2012    source источник


Ответы (1)


Вы можете использовать jQuery с GWT.

  1. Первый ключ — JSNI. JSNI — это то, как вы можете напрямую вызывать собственные функции JavaScript из вашего класса GWT/Java.
  2. Второй ключ заключается в том, чтобы понять, что все имена, имеющие глобальную (оконную) область действия в нативном коде JavaScript, являются атрибутами объекта $wnd в JSNI.
  3. Наконец, JSNI имеет нотацию, которую компилятор GWT распознает для вызова кода GWT/Java из кода JavaScript. Это важно, потому что все методы "Java" скомпилированы в JavaScript и имеют автоматически сгенерированные имена в JavaScript. Компилятор GWT должен вставить правильное имя в ваш код JavaScript, чтобы вызвать код "Java".
  4. API-интерфейсы GWT предоставляют вам доступ к элементам в DOM. Если вы создаете элементы на странице, код GWT может получить к ним доступ как к элементам. Некоторые элементы можно «обернуть» как виджет, но некоторые виджеты не поддерживают обертку простых элементов DOM.

Вот короткий (непроверенный) пример, демонстрирующий, как встроить пример кода JavaScript с веб-сайта с выпадающим меню в GWT. В этом примере мало взаимодействия GWT‹->JSNI/jQuery, но он интегрирует стандартный код jQuery в класс GWT.

    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

Библиотека gwtquery — это не то, что вы ищете: она не связана с jQuery, за исключением имитации ее API.

person dsh    schedule 09.08.2012
comment
Здесь первым шагом будет загрузка библиотеки jquery, верно? (на моей главной странице .html тег ‹head›) - person Andrei F; 09.08.2012
comment
Да, вам нужно загрузить jquery.js перед загрузкой .js модуля GWT. - person dsh; 09.08.2012