gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
Ваадин передает право собственности на эту библиотеку, поэтому Ваадин больше не обеспечивает поддержку или делает активную разработку.
Мы приняли это решение, потому что, как только продемонстрировали, что полимерные элементы могут быть легко интегрированы в GWT, мы хотим потратить время на то, что наша команда добавляет ценные преимущества пользователей в основные элементы Vaadin и передать эстафету сообществу, чтобы провести интеграцию с другими рамками.
Кроме того, мы рады объявить, что право собственности на репозиторий будет передано 20 апреля 2017 года @Manolo, который продолжит его поддерживать.
Если вы готовы принять участие в качестве сотрудника, пожалуйста, оставьте комментарий в #151. Сотрудникам будет предоставлен доступ после передачи. Мы поощряем вклад в любую форму и форму.
Библиотека была сгенерирована с использованием Vaadin GWT-API-генератора, утилиты, способной осмотреть полимерные веб-компоненты и излучать код GWT Java.
Поскольку полимер отличается между коллекциями, классы GWT-Polymer-Elements префиксируются с одинаковыми префиксами ( железо, бумага, ваадин ), чтобы легко обратиться к исходному веб-компоненту и легко найти документацию, связанную с ним.
Посетите наш случай Show, чтобы увидеть, как выглядят компоненты, и посмотреть на пример кода, используя каждый компонент.
Когда мы анализируем исходный код компонентов для генерации Java API, мы копируем всю существующую документацию JS, так как он доступен в Javadoc. Обратите внимание, что иногда описания ссылаются на JS, но мы считаем, что лучше сохранить информацию.
Вам нужен как минимум GWT-2.8.0, чтобы использовать библиотеку.
Файл .jar включает в себя все код Java и веб -компоненты полимерных сборов и бумажных коллекций, так что, поскольку вам не приходится иметь дело с процессом загрузки и развертывания всех библиотеков и компонентов JS.
pom.xml < dependencies >
< dependency >
< groupId >com.vaadin.polymer</ groupId >
< artifactId >vaadin-gwt-polymer-elements</ artifactId >
< version >1.7.0.0</ version >
< scope >provided</ scope >
</ dependency >
</ dependencies >vaadin-gwt-polymer-elements-1.7.0.0.jar и поместить его в свой Project Project ClassPath.*.gwt.xml : < inherits name = " com.vaadin.polymer.Elements " />
Поэтому только Chrome имеет полную поддержку нативной веб -компонентов, поэтому, чтобы заставить ваш проект работать со всеми современными браузерами, вы должны включить полифилл Webcomponents.
Если вы используете полимерные компоненты в качестве Widgets , библиотека будет лениться, когда это необходимо. В противном случае загрузите его очень рано на странице хоста .html как это показано в следующем коде.
< head >
< script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
< script src =" myapp/myapp.nocache.js " > </ script >
</ head > Ваадин gwt-polymer-elements Classles для создания вашего приложения с помощью Widgets или Elements JSinterop. Первый - это классический подход, в то время как последний станет новой тенденцией.
Но сейчас Elements -самый сложный способ, потому что GWT не хватает полного API Elemental-2.0 полагающимся на JsInterop . Мы предоставляем очень небольшой набор элементарных интерфейсов, ограниченных теми, которые необходимы для нашей реализации, они будут заменены elemental-2.0, когда она была доступна.
Таким образом, для классических и производственных проектов GWT было бы проще использовать Widget , поскольку API не будет иметь важных изменений. В противном случае, если вы хотите избавиться от иерархии виджетов, мы рекомендуем начать использовать Element API, смешивая его с некоторой библиотекой манипуляций с DOM, такими как gwtquery или просто методы, включенные в API Elemental.
PaperButton button = new PaperButton ();
button . setIcon ( "polymer" );
button . setLabel ( "Polymer" );
button . setRaised ( true );
button . addClickHandler ( new ClickHandler () {
public void onClick ( ClickEvent event ) {
// ...
}
});
RootPanel . get (). add ( button );Примечание. Конструкторы виджетов принимают любой контент HTML в качестве аргумента, который добавляется к веб -компоненту, отображаемому DOM
// Create a new instance of PaperButton
PaperButtonElement button = Polymer . createElement ( PaperButtonElement . TAG );
// Set some properties
button . setIcon ( "polymer" );
button . setLabel ( "Polymer" );
button . setRaised ( true );
// Add event listeners
button . addEventListener ( "click" , new EventListener () {
public void onBrowserEvent ( Event event ) {
// ...
}
});
// Append to the html document
RootPanel . get (). getElement (). appendChild ( button );Widgets или Elements в Uibinder < ui : UiBinder xmlns : ui = ' urn:ui:com.google.gwt.uibinder '
xmlns : g = ' urn:import:com.google.gwt.user.client.ui '
xmlns : p = ' urn:import:com.vaadin.polymer.paper.widget ' >
< ui : style >
.container paper-button.colored {
background: #4285f4;
color: #fff;
}
</ ui : style >
< g : HTMLPanel >
<!-- As Widget -->
< p : PaperButton toggles = " true " raised = " true " active = " true " addStyleNames = " {style.colored} " >active</ p : PaperButton >
<!-- As Element -->
< paper-button raised = " " noink = " " >Click me</ paper-button >
</ g : HTMLPanel >
Полимер использует правила стиля Shadow DOM для обеспечения стиля локального DOM с областью. Он поддерживает дополнительный синтаксис, который не является недоступным для анализатора GWT GSS.
Полимер позаботится о своем синтаксическом анализе любого блока <style> , который вы можете иметь на странице вашего хоста, но если вы хотите указать некоторые правила стиля в Uibinder, вы должны добавить свои блоки в стиле на любую панель.
< ui : UiBinder xmlns : ui = ' urn:ui:com.google.gwt.uibinder '
xmlns : g = ' urn:import:com.google.gwt.user.client.ui '
xmlns : p = ' urn:import:com.vaadin.polymer.paper.widget ' >
< g : HTMLPanel >
< style is = " custom-style " >
paper-toolbar paper-icon-button {
--paper-icon-button-ink-color: var(--paper-indigo-500);
}
</ style >
< p : PaperToolbar >
< p : PaperIconButton icon = " menu " />
< span class = " title " >Toolbar</ span >
</ p : PaperToolbar >
</ g : HTMLPanel >Для получения дополнительной информации о синтаксисе стиля полимера посетите их документацию
Если вы хотите погрузиться в источники .java , мы не поддерживаем сгенерированные файлы, поэтому вам необходимо загрузить ваадин-GWT-Polymer-Elements-xxx-sources.jar. В противном случае вы можете взглянуть на классы Hava Helper и шаблоны в проекте GWT-API-генератора.
Перед использованием какого -либо компонента вы должны импортировать соответствующие файлы. Но gwt-polymer-elements поставляются с некоторыми утилитами, так как вы это сделаете автоматически.
PaperButton button = new PapperButton();
Polymer помощника PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer есть несколько методов для динамического импорта Polymer.importHref("paper-button/paper-button.html");
<link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>
Веб -компоненты могут быть зарегистрированы и инициализированы асинхронно. Таким образом, gwt-polymer-elements поставляются с некоторыми методами, которые помогают выполнять обратные вызовы, когда компонент на самом деле готов.
PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer.ready(button, new Function() {
public Object call(Object args) {
// Set button properties here
}
})
PolymerButton button = new PolymerButton();
// You could set methods here
button.setFoo(bar);
button.ready(new Function() {
public Object call(Object args) {
// But you have to enclose in a callback calls to element methods
}
});
Polymer.importHref(Arrays.asList("paper-tabs", "paper-tab-element"), new Function() {
public Object call(Object args) {
// Create your elements here and call their methods
}
})
Добавьте следующее репо в свой pom.xml и измените версию, используя последнюю перечисленную в этом URL
<repository>
<id>snapshots</id>
<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
<snapshots><enabled>true</enabled></snapshots>
</repository>
Самостоятельно составить библиотеку vaadin-gwt-polymer-elements .
$ git checkout https://github.com/vaadin/gwt-polymer-elements.git$ cd gwt-polymer-elements$ npm install , чтобы загрузить все компоненты в папку src/main/resources , чтобы создать все файлы Java, необходимые для GWT в src/main/java/ Polder, а также для компиляции и установки библиотеки компонентов в Local Maven Repo. $ cd demo$ mvn gwt:devmode для запуска демонстрации в SuperDevMode, в противном случае запустите $ mvn clean package , чтобы создать демонстрационное приложение в target каталоге.target/gwt-polymer-demo , или вы можете развернуть сгенерированную target/gwt-polymer-demo.war в контейнере сервлета.
