简体   繁体   English

如何在GWT上添加外部JavaScript库?

[英]How to add external JavaScript Library on GWT?

I'm using an OpenLayers wrapper for GWT, called GWT-OpenLayers 我正在为GWT使用OpenLayers包装器,称为GWT-OpenLayers

On user reference page it says that you need to add a reference on both files, gwt.xml and .html 在用户参考页面上,它说您需要在两个文件gwt.xml和.html上添加参考

like this on xml: 像这样在xml上:

 <inherits name='org.gwtopenmaps.openlayers.OpenLayers'/>

and this on html 这在HTML上

 <script src="http://openlayers.org/api/2.11/OpenLayers.js"></script>

GWT-OpenLayers has a showcase, and i'm doing exactly what showcase does. GWT-OpenLayers有一个展示柜,而我正在做展示柜的工作。 But when app starts and I try to check the source code, I don't see on html, the openlayers script. 但是,当应用启动时,我尝试检查源代码时,在openlayers脚本html上看不到。 I've tried to add other's scripts but, unfortunately, the script doesn't appear on source code. 我尝试添加其他人的脚本,但是不幸的是,该脚本未出现在源代码中。
Update 01 - html and browser result: 更新01-HTML和浏览器结果:

 <head>
  ...
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript" language="javascript"
        src="GeoStatistics/GeoStatistics.nocache.js"></script>
    <script type="text/javascript" src="ol/OpenLayers.js"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js">
    </script>
 </head>

Browser = Chrome 浏览器= Chrome 在此处输入图片说明

As you can see, several script's are add on html, but only one appears. 如您所见,在html上添加了多个脚本,但是仅出现一个。

UPDATE 02 - After compile, still not working I've just compiled my project, and the html still with no script tag. 更新02-编译后,仍然无法正常工作,我刚刚编译了我的项目,并且html仍然没有脚本标签。

But I've edited the html and load the project, and I've got the script tag. 但是我已经编辑了html并加载了项目,并且获得了script标记。 So, it's some solution, if don't have any other way to generate the html with my script tag, I can just put the tag after compilation. 因此,这是一种解决方案,如果没有其他方法可以通过我的脚本标签生成html,则可以在编译后放入该标签。

The scripts get loaded into application context. 脚本被加载到应用程序上下文中。 You can use FireFox with FireBug or In Chrome Dev Tools. 您可以将FireFox与FireBug一起使用,也可以在Chrome开发工具中使用。 Adding a screenshot of gwt open layer showcase as seen in FireBugs script tab. 添加gwt开放层展示屏幕截图,如FireBugs脚本选项卡所示。

在此处输入图片说明

Step 1 - Ensure gwt-openlayers-client is in GWT Project classpath for hosted mode and deploy mode compilation 第1步-确保gwt-openlayers-client在GWT Project类路径中以进行托管模式和部署模式编译

Step 2 - In gwt module xml file 步骤2-在gwt模块xml文件中

<inherits name='org.gwtopenmaps.openlayers.OpenLayers' />

Step 3 - In html head tag 第3步-在html头标记中

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" language="javascript"
    src="GeoStatistics/GeoStatistics.nocache.js"></script>

Step 4 - 第四步 -

public void onModuleLoad()
    {
        MapOptions mapOptions = new MapOptions();
        MapWidget mapWidget = new MapWidget( "400px", "300px", mapOptions );

        OSM osm_1 = OSM.Mapnik( "Mapnik" );
        OSM osm_2 = OSM.CycleMap( "CycleMap" );

        osm_1.setIsBaseLayer( true );
        osm_2.setIsBaseLayer( true );

        LonLat lonLat = new LonLat( 6.95, 50.94 );
        lonLat.transform( "EPSG:4326", "EPSG:900913" );

        Map map = mapWidget.getMap();
        map.addLayer( osm_1 );
        map.addLayer( osm_2 );
        map.addControl( new LayerSwitcher() );
        map.addControl( new MousePosition() );
        map.setCenter( lonLat, 12 );
        RootPanel.get().add( mapWidget );
    }

Found the problem. 找到了问题。

GWT plugin for maven its not compiling my main .html(gwt:compile) Maven的GWT插件无法编译我的主.html(gwt:compile)

But, this is not a real problem because the main html its barely updated, so, just put the new .html on my folder it's a solution, not nice, but a solution. 但是,这不是真正的问题,因为主要html几乎没有更新,因此,只需将新的.html放在我的文件夹中,这是一个解决方案,不是很好,而是一个解决方案。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM