Gọi chức năng JQuery từ GWT

Question

Tôi đang bắt đầu một dự án Sử dụng GWT, nhóm thiết kế đã tạo một mẫu thử nghiệm bằng cách sử dụng HTML và JQuery. Tôi đang sử dụng UIBinder để 'xây dựng lại' giao diện người dùng. Vấn đề của tôi là ứng dụng có một trình đơn thả xuống sử dụng JQuery ... và nó không hoạt động

Những gì tôi đã thử cho đến nay là tôi đã sử dụng HTMLPanel trong UIBinder XML và chèn trình đơn, tôi giữ tệp .js và tham chiếu chúng trong tệp HTML hy vọng rằng các hành động sẽ được chọn ... nhưng không có may mắn.

Đây là menu.ui.xml, thực đơn được hiển thị nhưng không có chuột lên

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
<g:HTMLPanel> 
<!-- menu --> 
<ul id="menu"> 
    <li class="home"><a href="#"><span>Accueil</span></a></li> 
    <li class="configuration"> 
     <g:Anchor ui:field="configurationButton" href="#"> 
            <span>Configuration</span></g:Anchor> 
     <div class="submenu"> 
      <div class="group"> 
       <ul> 
        <li> 
         <a href="#">Fiches de configuration</a> 
         <ul> 
          <li><a href="#">Organisme</a></li> 
          <li><a href="#">Groupe opérationnel</a></li> 
          <li><a href="#">Unité opérationnelle</a></li> 
          <li><a href="#">Immeuble</a></li> 
         </ul> 
        </li> 
       </ul>      
      </div> 
     </div> 
    </li> 
    <li class="audit"><a href="#"><span>Audit</span></a></li> 
    <li class="result"><a href="#"><span>Résultats</span></a></li> 
    <li class="scenario"><a href="#"><span>Scénarios</span></a></li> 
    <li class="document"><a href="#"><span>Documents</span></a></li> 
</ul> 
<!-- menu.end --> 
</g:HTMLPanel> 

mã JQuery mà là trong một tập tin tách Common.js

$('#menu').find('submenu').each(function(){ 
alert("inside"); 
    var totalWidth = 0; 
    $(this).children().each(function(){ 
     totalWidth += $(this).outerWidth(); 
    }).end().css({ 
     'display' : 'none', 
     'width'  : totalWidth 
    }); 
}).end().css({ 
    'overflow' : 'visible' 
}); 

EntryPoint

public class M3T implements EntryPoint {  
public void onModuleLoad() {  
    Menu menu = new Menu(); 
    RootPanel.get("menuwrapper").add(menu);  
} 
} 

Trong HTML Tôi có một div nơi menu được chèn

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> 
<script src="js/jquery.lib.min.js" type="text/javascript"></script> 
<script src="js/common.js" type="text/javascript"></script> ... 

<div id="menuwrapper"> </div> 

Có cách nào để làm cho nó làm việc mà không sử dụng GQuery hoặc JSNI

Cảm ơn

Answer 1

Tôi đã thử giải pháp bằng cách sử dụng. Trong mã JSNI, tôi phải thay thế $ bằng $wnd.jQuery vì nếu không nó sẽ không biên dịch.

Tôi cũng đã thử một giải pháp thứ hai mà tôi quyết định để thực hiện: Thay vì sử dụng một wrapper xung quanh Menu, tôi overided onAttach() trong Menu lớp nó tự và gọi bind

import com.google.gwt.core.client.GWT;  
public class Menu extends Composite { 

    private static MenuUiBinder uiBinder = GWT.create(MenuUiBinder.class);  
    interface MenuUiBinder extends UiBinder<Widget, Menu> {}   

    public Menu() { 
     initWidget(uiBinder.createAndBindUi(this)); 
    } 

    @Override 
    public void onAttach() { 
     super.onAttach(); 
     bind(); 
    }  

    private static native void bind() /*-{ 
      $wnd.jQuery('#menu').find('.submenu').each(function(){ 
     alert("inside"); 
      var totalWidth = 0; 
      $wnd.jQuery(this).children().each(function(){ 
       totalWidth += $wnd.jQuery(this).outerWidth(); 
      }).end().css({ 
      'display' : 'none', 
      'width'  : totalWidth 
      }); 
     }).end().css({ 
      'overflow' : 'visible' 
     }); 
    }-*/;  
} 

Cảm ơn một lần nữa

Answer 2

Wrapp các UiBinder tạo lớp trong một SimplePanel sau đó ghi đè lên các phương pháp onAttach()

Kể từ khi lớp học được tạo ra là menu:

Cr ăn một lớp khác, đặt tên cho lớp đó, ví dụ: menuCaller

public class menuCaller extends SimplePanel { 

     menu menuWrap = new menu(); 

     public menuCaller() { 
      add(menuWrapp); 
     } 

     @Override 
     public void onAttach() 
     { 
      super.onAttach(); 
      bind(); 
     } 

      private static native void bind() /*-{ 
       $('#menu').find('submenu').each(function(){ 
        alert("inside"); 
         var totalWidth = 0; 
         $(this).children().each(function(){ 
         totalWidth += $(this).outerWidth(); 
         }).end().css({ 
        'display' : 'none', 
        'width'  : totalWidth 
         }); 
       }).end().css({ 
         'overflow' : 'visible' 
        }); 
     }-*/; 
    }