如何在可重用的 gwt 库/小部件中包含第 3 方 JavaScript 库? [英] How to include 3rd party JavaScript libraries in a reusable gwt library/widget?
问题描述
我正在尝试用 GWT 弄湿我的脚，看看迁移是否可行.我通常先尝试更困难的部分，以确保我可以完成项目.我的项目中最困难的部分是引用 3rd 方 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 工作的基础知识)，但我的问题是 -> 我在哪里放置对 3rd 方脚本的引用以正确创建库/模块?
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 页面中，但我很确定从可重用性的角度来看这是不正确的，因为这个库将在其他项目中使用，每个项目都会有自己的基本 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 库/小部件中包含第 3 方库，您有什么提示吗?
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 中名为 JsniBundle.我们在旧金山和法兰克福的 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 库/小部件中包含第 3 方 JavaScript 库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
