JsInterop，Web组件，聚合物：初学者指南

JsInterop

早在GWT发布时，还没有那么多的Javascript库，因此在Java和JS之间实现双向互操作性并不那么吸引人。 GWT提供了一种使用JSNI在Java类中编写Javascript的方法。 但是现在随着Javascript生态系统格局的变化，GWT开发人员需要比JSNI更复杂的东西。 从2.7版开始，Gs中引入了JsInterop，作为一种实验性功能来替代JSNI。 顾名思义，JsInterop是一种将Java（GWT）与Javascript互操作的方式。 它提供了使用注解在两者之间进行通信的更好方式，而不必在类中编写JavaScript。 JSInterop由以下接口定义：@ JsType，@ JsProperty，@ JSMethod，@ JSConstructor，@ JSFunction，@ JsExport。

JsInterop的第一个实用程序是将Java类公开给javascript脚本。 例如：

package com.jsinterop;

@JsType
public class myClasse {

public String name;

public myClass(String name){
this.name = name;
}
public void sayHello(){
return 'Hello' + this.name;
}
}

在浏览器中，我们可以执行以下操作：

//the package name serves as JS namespace
var aClass = new com.jsinterop.myClasse('developpez.com');

console.log(aClass.sayHello());

// result: 'Hello developpez.com'

JsInterop的第二个实用程序是将现有Javascript库导入GWT的能力，而无需重新编写任何代码。 这就是事情变得有趣的地方。 想象一下，您可以利用Java代码利用javascript生态系统中存在的所有主要框架（Angular，Polymer，React…）。
例如，假设我们要使用Leaflet，这是一个JS库，用于处理GWT项目中的地图。 我们要做的就是使用JsInterop批注包装方法：

@JsType(isNative=true, namespace=JsPackage.GLOBAL)
public class L {


public static native Map map(String id);

}

@JsType(isNative=true)
public class Map {


@JsMethod
public native L setView(double[] center, int zoom);

}

请注意，我们使用了与Leaflet库的源代码中相同的变量名。 在我们的示例L和Map中，类名称和方法名称在JsInterop中非常重要，因为从我们指定isNative = true ，GWT会自动将变量类型设置为浏览器环境中的类型。

现在，我们可以在GWT应用程序中初始化Leafet映射，而无需处理任何javascript代码：

public class Leafletwrapper implements EntryPoint {

double[] positions = {51.505, -0.09};

public void onModuleLoad() {

//ça marche
L.map("map").setView(positions, 13);
}
}

完整的示例可在以下网址获得： https ： //github.com/zak905/jsinterop-leaflet

当前没有工具可以将Js库自动转换为类似JsInterop的类。 在等待工具这样做时（类似于仅用于Polymer元素的gwt-api-generator），开发人员必须知道如何遍历Javascript库（方法，参数，字段，名称空间等）。 ）并手动进行映射。 毫无疑问，手动映射不容易出错，但这是目前的唯一方法。 手动映射的另一个缺点是Js库得到更新。 同样，开发人员必须手动合并所做的更改，以确保互操作性的连续性。

这是另一个有趣的示例，可以帮助您理解JsIntrop。 它实现了AngularJ和GWT之间的互操作性： https : //github.com/bitwerk/AngularGwtExample

聚合物和Web组件：大局

随着新一代Web应用程序的出现，现在要求Web开发人员处理大量HTML，CSS和Javascript。 有时一次处理这三个操作并非易事，因此开发人员和Web社区感到有必要制定一些更完善的标准来更好地管理复杂HTML，CSS和Js。 Web组件的想法就是从这种需求中诞生的。 创建WC的目的是可重用性。 可重用性是诸如Java之类的面向对象语言的主要目标之一，但尚未真正考虑用于前端。 显然有很多模式可以重复它们，因此问题是为什么不移植它们并重用它们。 想象一下，您已经为应用程序创建了一个菜单栏：您花了很多时间在诸如html，样式，动画，事件等上……在开发新应用程序时，您意识到需要相同的菜单，因此返回上一个项目并开始挑选HTML，Js，CSS片段，并尝试使其适应您的新应用程序。 随着时间的流逝，此过程变得很乏味，并且更容易出错。 Web组件可为问题提供答案。 WC提供了一种携带和重用HTML，CSS和JS（全部封装在HTML标签中）的方法。 WC由4个规范定义，这些规范现在已成为W3C HTML规范的一部分：

–自定义元素：允许创建自己的组件<my-element> </ my-element>
– HTML导入：将这些项目导入任何DOM中
–模板：定义可以由JS操作的自定义html模板 – Shadow Dom：通过隐藏基础html来隐藏组件的复杂性。

卫生间是原始规格。 这些规范的顶部构建了几个框架，使用户可以利用其功能。 聚合物是这些框架之一。 Polymer是Google建立和维护的一个项目。 它是构建具有高性能和时尚外观的优化应用程序的框架。 Polymer还提供了扩展其功能并创建您自己的可重用组件的功能。

为了说明Web组件的用法，我们将创建一个带有绿色背景的Polymer组件，该组件在每次单击时都会弹出一个窗口。 我们将其称为cool-div元素。 为此，我们需要在名为cool-div.html的文件中创建一个元素定义：

<dom-module id="cool-div">
<template>
<style>
:host {
display: block;
}
#mydiv{
background-color: green;
max-width: 100px;
color: white;
}

</style>
<div id="mydiv">
<content></content>
</div>
</template>

<script>
Polymer({

is: 'cool-div',

properties: {
prop1: {
type: String,
value: 'cool-div',
},
},

listeners :{
click:'divClicked'
},

divClicked: function(){
alert('cool div clicked');
}

});
</script>
</dom-module>

现在，我们只需在HTML页面的head部分中导入定义即可使用此元素：

<link rel="import" href="cool-div.html">

然后我们可以做类似的事情：

<cool-div>my first Polymer element</cool-div>

完整示例： https ： //github.com/zak905/cool-div

GWT和Polymer之间的交集

Vaadin团队在GWT方面做了一些有趣的事情。 其中之一是聚合物元素适应​​GWT。 gwt-polymer-elements不仅为GWT带来了新的潜力，而且还可以替代将从GWT 3.0版中删除的小部件。 为了使Polymer Elements适应GWT，Vaadin选择了JsInterop方法，而不是从头开始重写所有内容。 以这种方式，以非常平滑的方式完成了聚合物的适配并且没有错误。 Vaadin创建了一个名为gwt-api-generator的生成器 ，该生成器自动将库包装为API。 该生成器还可用于为您自己的Polymer元素生成Java API。

在GWT中构建您的第一个Polymer应用程序

在GWT中创建Polymer应用程序并不复杂。 您需要做的就是导入gwt-polymer-elements并使用-generateJsInteropExports标志。 聚合物成分及其用法的一些知识是必要的，不用担心，它是随实践而来的。 有很多播客，解释了Youtube上Polymer的基础知识，称为Polycasts ，由Rob Dodson （聚合物团队）提出。 聚合物元素的文档也很完善，并提供了所有必要的信息。 Github中还有一些项目可以帮助您获得灵感，并克服空白页综合症：

– https://github.com/manolo/gwt-polymer-todo-list
– https://github.com/gwidgets/gwt-polymer-starter-kit
– https://github.com/cdigiano/polymergwt

重要提示： gwt-polymer-elements仅适用于GWT的2.8.0-SNAPSHOT（目前为RC1）版本。

包起来

JsInterop为GWT带来了无限的可能性。 它为GWT开发人员打开了一个新世界，这只是实验阶段。 我们必须等到GWT 2.8的稳定版本发布后才能使用JsIntrop生产。

这篇文章的法文版由Developpez.com赞助，可从以下网站获得：http: //zakariaamine.developpez.com/tutoriels/java/gwt/utiliser-webcomponents-polymer-jsinterop/?utm_source=twitterfeed&utm_medium=twitter

翻译自: https://www.javacodegeeks.com/2017/07/jsinterop-web-components-polymer-beginners-guide.html