Chiamare la funzione JQuery da GWT

Question

Sto iniziando un progetto Utilizzando GWT, il team di designer ha realizzato un prototipo utilizzando HTML e JQuery. Sto usando UIBinder per "ricostruire" l'interfaccia utente. Il mio problema è che l'applicazione ha un menu a tendina che usa JQuery ... e non funziona

Quello che ho provato finora è che ho usato un HTMLPanel in UIBinder XML e ho inserito il menu, ho mantenuto il file .js e il riferimento li nel file HTML sperando che le azioni vengano raccolte ... ma senza fortuna.

Questo è menu.ui.xml, viene visualizzato il menu, ma senza mouse sopra

<!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> 

il codice jQuery che si trova in un file separato 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);  
} 
} 

Nel HTML ho un div in cui è inserito il menu

<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'è un modo per farlo funzionare senza usare GQuery o JSNI

Grazie

Answer 1

ho provato la soluzione elvispt, funziona. Nel codice JSNI, ho dovuto sostituire $ con $wnd.jQuery perché altrimenti non viene compilato.

ho provato anche una seconda soluzione che decido di implementare: Invece di utilizzare un wrapper menu, ho overided onAttach() nella classe menu è di per sé e chiamare legano ancora

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' 
     }); 
    }-*/;  
} 

Grazie

Answer 2

Wrapp l'uiBinder generato classe in una SimplePanel quindi sostituire il metodo onAttach()

Poiché la classe generata è menu:

Cr EATE un'altra classe, nominarlo ad esempio: 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' 
        }); 
     }-*/; 
    }