Vaadin Widgetはjavascriptを実行していませんか？

Question

私はこれ、私が持っている簡単なjavascriptの（それは別に動作します）Vaadinでは初心者です、そしてページでインタラクティブな地図を表示するVaadinウィジェットを書く：メインクラスで

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()"); 
    } 
} 

最後に、私が持っているinit関数で：

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

しかし、私は目でマップを見ることができませんeページ。私は何か見落としてますか？どんな助け？

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()) 
} 

からコードを削除するには、Javaコードで属性を初期化することができますので、あなたはまた、Stateクラスを追加することができますし、それらをコネクター・スクリプトで使用してください。 詳細についてはdocsを参照してください。