如何执行自定义Javascript Vaadin

Question

我正在构建一个Vaadin应用程序，需要使用Leafletjs来进行一些地图可视化。我已经创建了必要的Javascript函数和Java类（或者至少我认为我做过），但是当我在服务器上运行我的程序时，它并没有显示出来。关于为什么会发生这种情况的任何想法？

这是我的Javascript代码：

window.com_vaadin_demo_dashboard_component_MyMap = function() {
    var peaElement = this.getElement();
    var mapboxAccessToken = pk.eyJ1Ijoibmlja2VtbW9ucyIsImEiOiJjaWY2cm45aG0wb285c3VrdGI1YXNzc2Y5In0.aDSzTBUN58FCUpsr-VvH4Q;
    var map = L.map('map').setView([37.8, -96], 4);
    var geojson;
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + mapboxAccessToken, {
        id: 'mapbox.light'}).addTo(map);

    function getColor(d) {
        return d > 1000 ? '#800026' :
               d > 500  ? '#BD0026' :
               d > 200  ? '#E31A1C' :
               d > 100  ? '#FC4E2A' :
               d > 50   ? '#FD8D3C' :
               d > 20   ? '#FEB24C' :
               d > 10   ? '#FED976' :
                          '#FFEDA0';
    }

    function style(feature) {
        return {
            fillColor: getColor(feature.properties.density),
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7
        };
    }

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }
    }

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
    }

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
    }

    geojson = L.geoJson(peas, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);
}

这是扩展AbstractJavaScriptComponent的Java类：

package com.vaadin.demo.dashboard.component;

import com.vaadin.annotations.*;
import com.vaadin.ui.AbstractJavaScriptComponent;

@JavaScript({"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js", "pea_map.js"})
@StyleSheet({"http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css"})
public class PeaMap extends AbstractJavaScriptComponent {

    public void setId(final Integer id) {
        getState().setId(id);
    }

    public void setName(final String name) {
        getState().setName(name);
    }

    public void setPopulation(final Integer population) {
        getState().setPopulation(population);
    }

    @Override
    public MyMapState getState() {
        return (MyMapState) super.getState();
    }

}

这是我的Java类，它跟踪状态：

package com.vaadin.demo.dashboard.component;

import com.vaadin.shared.ui.JavaScriptComponentState;

public class MyMapState extends JavaScriptComponentState {

    private Integer id;
    private String name;
    private Integer population;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer getPopulation() {
        return population;
    }
    public void setPopulation(Integer population) {
        this.population = population;
    }



}

以下是与之相关的组件：

package com.vaadin.demo.dashboard.component;

import com.vaadin.demo.dashboard.component.PeaMap;
import com.vaadin.ui.*;
import com.vaadin.server.Page;


public class MyMapUI extends CustomComponent {

    final MyMap mymap = new MyMap();
    final VerticalLayout layout = new VerticalLayout();

    public void MyMap(){


            Page.getCurrent().getJavaScript().execute("com_vaadin_demo_dashboard_component_MyMap()");

            //now we build the layout.
            layout.setSpacing(true);
            layout.addComponent(mymap);
        }
}

然后它应该被添加到我在项目的一个页面上的面板中，但它没有显示出来。