Llamar a la función JQuery desde GWT

Question

Estoy empezando un proyecto Con GWT, el equipo de diseñadores creó un prototipo utilizando HTML y JQuery. Actualmente estoy usando UIBinder para 'reconstruir' la UI. Mi problema es que la aplicación tiene un menú desplegable que usa JQuery ... y no funciona

Lo que intenté hasta ahora es utilizar un HTMLPanel en UIBinder XML e insertar el menú, guardé el archivo .js y la referencia en el archivo HTML con la esperanza de que las acciones se recogerán ... pero sin suerte.

Ésta es menu.ui.xml, se visualiza el menú, pero sin ratón sobre

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

el código jQuery que está en un archivo separado 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);  
} 
} 

En el HTML Tengo un div donde se inserta el menú

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

¿Hay alguna manera de hacer que funcione sin necesidad de utilizar GQuery o JSNI

Gracias

Answer 1

Probé la solución mediante elvispt, funciona. En el código JSNI, tuve que reemplazar $ con $wnd.jQuery porque de lo contrario no compila.

me trataron también una segunda solución que decido poner en práctica: En lugar de utilizar una envoltura alrededor de menús, que overided onAttach() de la clase Menu es uno mismo y llamar unen

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

Gracias de nuevo

Answer 2

Wrapp la UiBinder clase generada en un SimplePanel a continuación, reemplazar el método onAttach()

Desde la clase generada es menu:

Cr eate otra clase, nombrarlo por ejemplo: 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' 
        }); 
     }-*/; 
    }