Статьи

JsInterop, веб-компоненты, полимер: руководство для начинающих

Январь 26, 2019

JsInterop

Когда GWT был выпущен, библиотек Javascript было не так много, поэтому двусторонняя совместимость между Java и JS была не такой привлекательной. GWT предложил способ написания Javascript внутри классов Java с использованием JSNI. Но теперь, когда меняется ландшафт экосистемы Javascript, разработчикам GWT нужно нечто более сложное, чем JSNI. Начиная с версии 2.7, JsInterop был представлен в GWT как экспериментальная функция для замены JSNI. Как следует из названия, JsInterop — это способ взаимодействия Java (GWT) с Javascript. он предлагает лучший способ связи между ними, используя аннотации вместо того, чтобы писать JavaScript в ваших классах. JSInterop определяется следующими интерфейсами: @JsType, @JsProperty, @JSMethod, @JSConstructor, @JSFunction, @JsExport.

Первая утилита JsInterop состоит в том, чтобы представить ваши классы Java в сценарии JavaScript. Например:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
package com.jsinterop;
 
@JsType
public class myClasse {
 
public String name;
 
public myClass(String name){
this.name = name;
}
public void sayHello(){
return 'Hello' + this.name;
}
}

Из браузера мы можем сделать что-то вроде:

1
2
3
4
5
6
//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 без необходимости переписывать какую-либо строку кода. Здесь вещи становятся интересными. Представьте, что вы можете использовать все основные фреймворки, существующие в экосистеме javascript (Angular, Polymer, React …) из вашего Java-кода.
Например, предположим, что мы хотим использовать Leaflet, который является библиотекой JS для управления картами из нашего проекта GWT. Все, что нам нужно сделать, это обернуть методы, используя аннотации JsInterop:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
@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 автоматически устанавливает типы переменных как типы в среде браузера.

Теперь мы можем инициализировать карту Leafet в нашем приложении GWT без обработки кода JavaScript:

01
02
03
04
05
06
07
08
09
10
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. В ожидании инструмента, который сделает это (что-то вроде gwt-api-generator, который используется только для элементов Polymer), разработчик должен знать, как пройтись по библиотеке Javascript (методы, аргументы, поля, пространства имен, .. ..etc ) и выполните сопоставление вручную. Нет сомнений в том, что ручное отображение не подвержено ошибкам, но пока это единственный способ. Другой недостаток ручного отображения — это когда библиотека Js обновляется. Опять же, разработчик должен включить изменения вручную для обеспечения непрерывности взаимодействия.

Вот еще один интересный пример, который может помочь вам понять JsIntrop. Он реализует взаимодействие между AngularJs и GWT: https://github.com/bitwerk/AngularGwtExample

Полимер и веб-компоненты: общая картина

С появлением нового поколения веб-приложений, веб-разработчикам теперь приходится работать с большим количеством HTML, CSS и Javascript. Работать с тремя одновременно не так просто, поэтому разработчики и веб-сообщество почувствовали необходимость иметь что-то более стандартное, чтобы лучше управлять сложными HTML, CSS и Js. Идея веб-компонентов рождается из этой необходимости. Целью создания туалетов является возможность многократного использования. Возможность многократного использования была одной из основных целей объектно-ориентированных языков, таких как Java, но в действительности не рассматривалась для внешнего интерфейса. Очевидно, существует множество шаблонов, которые повторяют самих себя, поэтому вопрос заключается в том, почему бы не портировать их и не использовать их повторно. Представьте, что вы создали строку меню для приложения: вы потратили время на такие вещи, как HTML, стиль, анимация, события и т. Д. При разработке нового приложения вы понимаете, что вам нужно то же самое меню, и вы возвращаетесь к своему предыдущему проекту. и начните собирать фрагменты HTML, Js, CSS и попробуйте адаптировать их для своего нового приложения. Этот процесс со временем становится утомительным и более подвержен ошибкам. Веб-компоненты дают ответ на вопрос. WC предоставляют способ переноса и повторного использования HTML, CSS и JS, все они заключены в HTML-тег. WC определяются 4 спецификациями, которые теперь являются частью спецификации W3C HTML:

— Пользовательские элементы: позволяет создавать собственные компоненты <my-element> </ my-element>
— Импорт HTML: импортируйте эти элементы в любой DOM
— Шаблоны: определение пользовательских HTML-шаблонов, которыми может управлять JS
— Shadow Dom: скрывая сложность компонентов, скрывая основной HTML.

WCs являются необработанными спецификациями. Существует несколько платформ, построенных на основе этих спецификаций и позволяющих пользователю воспользоваться их функциями. Полимер находится среди этих структур. Polymer — это проект, созданный и поддерживаемый Google. Это основа для создания оптимизированных приложений с высокой производительностью и стильным внешним видом. Polymer также предоставляет возможность расширять свои функциональные возможности и создавать собственные многократно используемые компоненты.

Чтобы проиллюстрировать использование веб-компонентов, мы создадим компонент Polymer с зеленым фоном, который отображает всплывающее окно при каждом щелчке. мы назовем этот классный элемент div. Для этого нам нужно создать определение элемента в файле с именем cool-div.html:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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>

Теперь мы можем использовать этот элемент, просто импортировав определение из раздела head на нашей HTML-странице:

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

и тогда мы можем сделать что-то вроде:

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

Полный пример: https://github.com/zak905/cool-div

Пересечение между GWT и Полимером

Команда Vaadin сделала несколько интересных вещей с GWT. Одним из них была адаптация полимерных элементов к GWT. GWT- Polymer-Elements не только открывает новые возможности для GWT, но также может заменить Widgets, которые должны быть удалены из версии 3.0 GWT. Чтобы адаптировать Polymer Elements к GWT, Ваадин выбрал подход JsInterop вместо того, чтобы переписывать все с нуля. Таким образом, адаптация Полимера была выполнена очень гладко и без ошибок. Ваадин создал генератор с именем gwt-api-generator, который автоматически оборачивает библиотеку как API. Генератор также может быть использован для генерации API Java для ваших собственных элементов Polymer.

Создание вашего первого приложения Polymer в GWT

Создать приложение Polymer в GWT несложно. Все, что вам нужно сделать, это импортировать gwt-полимерный элемент и использовать флаг -generateJsInteropExports. Некоторое знание компонентов Polymer и их использования необходимо, не волнуйтесь, это приходит с практикой. Существует большая серия подкастов, которые объясняют основы Polymer на Youtube, под названием Polycasts, представленные Робом Додсоном (команда Polymer). Документация Polymer Elements также хорошо разработана и предоставляет всю необходимую информацию. В 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 production.

Французская версия этого поста спонсируется Developpez.com и доступна по адресу: http://zakariaamine.developpez.com/tutoriels/java/gwt/utiliser-webcomponents-polymer-jsinterop/?utm_source=twitterfeed&utm_medium=twitter

Ссылка: JsInterop, Web Components, Polymer: руководство для начинающих от нашего партнера по JCG Закарии Амине в блоге G-Widgets .
42
Share: