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