Vaadin Widget не запускает JavaScript?

Question

Я новичок в Vaadin, и пишу виджет Vaadin, чтобы показать интерактивную карту на странице, у меня есть простой javascript (он работает отдельно):

var showMapToMe = function() {
var div = document.createElement('div');
div.id = 'mapid';
div.style.width = "800px";
div.style.height = "800px";
document.body.appendChild(div);
var mymap = L.map('mapid').setView([ 44.646129, -68.599838 ], 3);   
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/256/{z}/{x}/{y}?access_token=XXXXX',
                {
                    attribution : 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
                    maxZoom : 18,
                }).addTo(mymap);
 L.marker([44.646129, -63.599838]).addTo(mymap);}

В основном классе я просто пишу следующий код в конструкторе:

    @JavaScript({ ".../leaflet.js",".../leaflet.markercluster.js","labMap.js"})
public class MapWidget extends com.vaadin.ui.AbstractJavaScriptComponent {
     public MapWidget() {
        Page.getCurrent().getJavaScript().execute("showMapToMe()");
    }
}

Наконец, в функции инициализации у меня есть:

            final MapWidget component = new MapWidget();        
            final VerticalLayout layout = new VerticalLayout();
            layout.setStyleName("demoContentLayout");
            layout.setSizeFull();
            layout.addComponent(component);
            setContent(layout);

Тем не менее, я не вижу карту на странице. Я что-то пропустил? Любая помощь?

Answer 1

Вместо вызова вашей функции в конструкторе MapWidget используйте коннектор для этого.

Измените ваш labMap.js, как показано ниже (или добавьте новый файл javascript), и удалите код из конструктора MapWidget.

window.com_your_package_MapWidget = function() {

   var showMapToMe = function(div) {   
      // ... your existing code  
   }

   var me = this;
   showMapToMe(me.getElement())
}

Вы также можете добавить класс State, чтобы можно было инициализировать атрибут в коде Java, а затем использовать их в сценарии коннектора. Смотрите документы для получения дополнительной информации