GWT से JQuery फ़ंक्शन को कॉल करना

Question

मैं GWT का उपयोग करके एक प्रोजेक्ट शुरू कर रहा हूं, डिज़ाइनर टीम ने HTML और JQuery का उपयोग करके एक प्रोटोटाइप बनाया है। मैं वास्तव में UI को 'पुनर्निर्माण' करने के लिए UIBinder का उपयोग कर रहा हूं। मेरी समस्या यह है कि एप्लिकेशन में एक ड्रॉप डाउन मेनू है जो jQuery का उपयोग करता है ... और यह काम नहीं कर रहा है

मैंने अब तक जो कोशिश की है, क्या मैंने UIBinder XML में HTMLPanel का उपयोग किया है और मेनू सम्मिलित किया है, मैंने .js फ़ाइल रखी है और उन्हें HTML फ़ाइल में संदर्भित किया है, यह उम्मीद करते हुए कि क्रियाएं उठाई जाएंगी ... लेकिन कोई भाग्य नहीं।

यह Menu.ui.xml है, मेनू प्रदर्शित होता है लेकिन कोई माउस नहीं होता है

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

JQuery कोड जो एक अलग फ़ाइल में है 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'
});

प्रवेश बिंदु

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

एचटीएमएल में मेरे पास एक div है जहां मेनू डाला गया है

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

क्या GQuery या JSNI का उपयोग किए बिना इसे काम करने का कोई तरीका है?

धन्यवाद

jquery gwt uibinder

4

Momo 9 सितंबर 2011, 22:48

Answer 1

मैंने elvispt द्वारा समाधान की कोशिश की, यह काम करता है। JSNI कोड में, मुझे $ को $wnd.jQuery से बदलना पड़ा क्योंकि अन्यथा यह संकलित नहीं होता है।

मैंने एक दूसरा समाधान भी आजमाया जिसे मैं लागू करने का निर्णय लेता हूं: मेनू के चारों ओर एक रैपर का उपयोग करने के बजाय, मैंने मेनू वर्ग में अटैच() को स्वयं और कॉल बाइंड में ओवरराइड किया

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

एक बार फिर धन्यवाद

7

Momo 5 मई 2016, 17:02

Answer 2

एक SimplePanel में uiBinder उत्पन्न वर्ग को लपेटें और फिर onAttach() विधि को ओवरराइड करें

चूंकि उत्पन्न वर्ग menu है:

एक अन्य वर्ग बनाएं, उदाहरण के लिए इसे नाम दें: 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'
                   });
        }-*/;
    }

3

elvispt 12 सितंबर 2011, 04:15

GWT से JQuery फ़ंक्शन को कॉल करना

2 जवाब

संबंधित सवाल

नए सवाल

jquery