如何在可重用的gwt库/小部件中包含第三方JavaScript库? [英] How to include 3rd party JavaScript libraries in a reusable gwt library/widget?

问题描述

我正在尝试让GWT湿透，以查看迁移是否可以解决.我通常会先尝试比较困难的部分，以确保可以完成该项目.我的项目中最困难的部分是引用第三方JS库.在此示例中，我尝试使用PubNub，因为我们的平台大部分都在使用它.

I'm trying to get my feet wet with GWT to see if migrating will work out. I usually try the more difficult parts first to make sure I can finish the project. The most difficult part of my project(s) is referencing 3rd party JS libs. In this example I'm trying to use PubNub as much of our platform uses it.

我想做的是创建一个可重用的对象，该对象可用于需要PubNub的其他GWT项目中.我已经成功运行了一个简单的小测试(即，我已经掌握了JNSI的基础知识)，但是我的问题是->为了正确创建库/模块，我应该在哪里放置对第三方脚本的引用?

What I'd like to do is create a reusable object that can be used in other GWT projects in need of PubNub. I've got a simple little test running successfully (ie, I've got the basics of JNSI working), but my question is -> where do I put the reference to the 3rd party script in order to create the library/module properly?

现在，我只是在项目的HTML页面中放置了对外部脚本的引用，但是从重用性的角度来看，我很确定这是不正确的，因为此lib将在其他项目中使用，每个项目都会有自己的基本HTML页面.

Right now I just put the reference to the external scripts in the HTML page in the project, but I'm pretty sure this is incorrect from a reusability perspective, as this lib would be used in other projects, each of which would have their own base HTML page.

我尝试将引用放入gwt.xml文件中，但这似乎丢失了引用(即，我的测试项目不再像脚本在HTML页面中时那样工作)

I tried putting the reference in the gwt.xml file, but this seems to lose the references (ie my test project no longer works as it did when the scripts were in the HTML page)

您对如何在可重用的GWT库/小部件中包含第三方库有任何提示吗?

Do you have any tips on how to include 3rd party libraries in a reusable GWT library/widget?

推荐答案

在这里有一个使用客户端捆绑包和脚本注入器的示例，可以使用同步加载或异步加载.

Here you have an example using client bundles and script injector, you can use either synchronous loading or asynchronous.

使用同步时，外部js内容将嵌入到应用程序中，否则将包含在与ajax请求一起提供的不同片段中.

When using sync the external js content will be embedded in the application, otherwise it will be include in a different fragment which will be got with an ajax request.

您可以将api放在任何服务器中，并使用ScriptInjector加载它.

You can put your api in any server and load it with the ScriptInjector.

public class Example {

  public static interface MyApiJs extends ClientBundle {
    MyApiJs INSTANCE = GWT.create(MyApiJs.class);

    @Source("my_api.js")
    TextResource sync();

    @Source("my_api.js") // Should be in the same domain or configure CORS
    ExternalTextResource async();
  }

  public void loadSync() {
    String js = MyApiJs.INSTANCE.sync().getText();
    ScriptInjector.fromString(js).inject();
  }

  public void loadAsync() throws ResourceException {
    MyApiJs.INSTANCE.async().getText(new ResourceCallback<TextResource>() {
      public void onSuccess(TextResource r) {
        String js = r.getText();
        ScriptInjector.fromString(js).inject();
      }
      public void onError(ResourceException e) {
      }
    });
  }

  public void loadFromExternalUrl() {
    ScriptInjector.fromUrl("http://.../my_api.js").inject();
  }
} 

更好的方法是在 gwtquery 1.4.0中使用名为 GWT.create 会议上介绍了此功能.

A better approach is to use a new feature in gwtquery 1.4.0 named JsniBundle. We introduced this feature during the GWT.create conferences at San Francisco and Frankfurt.

使用这种方法，您可以将任何外部javascript(放置在源代码树中或托管在外部主机中)作为JSNI块插入.它有很多好处:

With this approach you can insert any external javascript (placed in your source tree or hosted in an external host) as a JSNI block. It has many benefits:

• 利用GWT jsni验证器，混淆器和优化器.
• 当应用程序不使用jsni java方法时，请摆脱它.

语法实际上很简单:

public interface JQueryBundle extends JsniBundle {
  @LibrarySource("http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js")
  public void initJQuery();
} 

JQueryBundle jQuery = GWT.create(JQueryBundle.class);
jQuery.initJQuery();

这篇关于如何在可重用的gwt库/小部件中包含第三方JavaScript库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！