gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
Vaadin überträgt das Eigentum an dieser Bibliothek, sodass Vaadin keine Unterstützung mehr bietet oder eine aktive Entwicklung mehr darstellt.
Wir haben diese Entscheidung getroffen, weil wir einmal gezeigt haben, dass Polymerelemente leicht in GWT integriert werden könnten, wir in die Zeit unseres Teams investieren möchten, um Vaadin -Kernelementen wertvolle Benutzervorteile zu erweitern, und den Staber an die Community weiterleiten, um Integrationen mit anderen Frameworks durchzuführen.
Darüber hinaus freuen wir uns, Ihnen mitteilen zu können, dass das Eigentum an dem Repository bis zum 20. April 2017 an @Manolo übertragen wird, der es weiterhin unterhalten wird.
Wenn Sie bereit sind, als Mitarbeiter teilzunehmen, hinterlassen Sie bitte einen Kommentar in #151. Den Mitarbeitern wird nach dem Übertragen Zugang gewährt. Wir ermutigen den Beitrag in irgendeiner Form und Form.
Die Bibliothek wurde unter Verwendung des Vaadin GWT-API-Generators generiert, einem Dienstprogramm, das Polymer WebComponents inspizieren und GWT-Java-Code ausgeben kann.
Da Polymer zwischen Sammlungen unterscheidet, werden GWT-Polymer-Elemente-Klassen mit denselben Präfixen ( Eisen, Papier, Vaadin ) vorangestellt, um einfach auf die ursprüngliche Webkomponente zu verweisen und die damit verbundene Dokumentation leicht zu finden.
Besuchen Sie unseren Show -Fall, um zu sehen, wie Komponenten aussehen, und um den Beispielcode mit jeder Komponente in den Beispielcode zu werfen.
Wenn wir den ursprünglichen Komponentencode analysieren, um die Java -API zu generieren, kopieren wir alle vorhandenen JS -Dokumentationen so, wie sie im Javadoc verfügbar ist. Beachten Sie, dass sich manchmal Beschreibungen auf JS beziehen, aber wir sind der Ansicht, dass es besser ist, die Informationen aufrechtzuerhalten.
Sie benötigen mindestens GWT-2.8.0, um die Bibliothek zu verwenden.
Die .jar -Datei enthält alle Java -Code und Webkomponenten von Polymer -Eisen- und Papiersammlungen. Daher müssen Sie sich also nicht mit dem Herunterladen und Bereitstellen aller JS -Verpackten und Komponenten befassen.
pom.xml Projekt Maven verwendet < 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 Archiv herunterladen und in Ihren GWT-Projektklassenpath aufnehmen.*.gwt.xml Modul hinzu: < inherits name = " com.vaadin.polymer.Elements " />
Nur Chrome bietet heutzutage die vollständige native Unterstützung für Webkomponenten, damit Sie Ihr Projekt mit allen modernen Browsern funktionieren. Sie müssen die WebComponents Polyfill einbeziehen.
Wenn Sie die Polymerkomponenten als Widgets verwenden, lädt die Bibliothek sie bei Bedarf faul. Laden Sie es ansonsten sehr früh in Ihrer .html -Host -Seite, wie es im folgenden Code angezeigt wird.
< head >
< script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
< script src =" myapp/myapp.nocache.js " > </ script >
</ head > Vaadin gwt-polymer-elements bündeln Klassen, um Ihre Anwendung mit Widgets oder JSINTEROP Elements zu erstellen. Ersteres ist der klassische Ansatz, während letzteres die neue Tendenz wird.
Aber im Moment ist Elements der schwierigste Weg, da GWT eine vollständige Elemental-2.0 API fehlt, die sich auf JsInterop stützt. Wir bieten einen sehr kleinen Satz elementarer Schnittstellen, die auf die für unsere Implementierung benötigten Grundstücke beschränkt sind. Sie werden durch Elemental-2.0 ersetzt, wenn sie verfügbar waren.
Zusammenfassend wäre es für klassische und produktionliche GWT -Projekte einfacher, das Widget zu verwenden, da die API keine wichtigen Änderungen haben würde. Andernfalls empfehlen wir, die Element -API -Mischung mit einer DOM -Manipulationsbibliothek wie gwtquery oder nur den in der Elementar API enthaltenen Methoden zu verwenden.
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 );Hinweis: Widget -Konstruktoren akzeptieren jeden HTML
// 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 oder Elements in 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 >
Polymer verwendet Shadow DOM -Styling -Regeln für die Bereitstellung von Scoped -Stylen des lokalen DOM des Elements. Es unterstützt eine zusätzliche Syntax, die vom GWT -GSS -Parser nicht unverzichtbar ist.
Polymer kümmert sich um die Syntax, die einen blockierten <style> -Block auf Ihrer Host -Seite analysiert. Wenn Sie jedoch einige Styling -Regeln in Uibinder angeben möchten, müssen Sie Ihre Stilblöcke zu jedem Panel hinzufügen.
< 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 >Weitere Informationen zum Polymer -Styling -Syntax finden Sie in deren Dokumentation
Wenn Sie in .java Quellen eintauchen möchten, verwalten wir keine generierten Dateien. Daher müssen Sie das Vaadin-GWT-Polymer-Elements-Xxx-Sources.jar-Bundle herunterladen. Andernfalls könnten Sie einen Java-Helferunterricht und Vorlagen im GWT-API-Generator-Projekt aussehen.
Bevor Sie eine Komponente verwenden, müssen Sie die entsprechenden Dateien importieren. Aber gwt-polymer-elements sind mit einigen Dienstprogrammen geliefert, sodass Sie so automatisch durchgeführt werden.
PaperButton button = new PapperButton();
Polymer -Helferklasse PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer hat einige Methoden, um den Import dynamisch durchzuführen Polymer.importHref("paper-button/paper-button.html");
<link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>
Webkomponenten können asynchron registriert und initialisiert werden. So enthält gwt-polymer-elements einige Methoden, mit denen Rückrufe ausgeführt werden können, wenn die Komponente tatsächlich fertig ist.
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
}
})
Fügen Sie Ihrem pom.xml das folgende Repo hinzu und ändern Sie die Version mit dem neuesten in dieser URL aufgeführten bei
<repository>
<id>snapshots</id>
<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
<snapshots><enabled>true</enabled></snapshots>
</repository>
Um die vaadin-gwt-polymer-elements Bibliothek selbst zu kompilieren.
$ git checkout https://github.com/vaadin/gwt-polymer-elements.git$ cd gwt-polymer-elements$ npm install aus, um alle Komponenten in den Ordner src/main/resources herunterzuladen, um alle für GWT benötigten Java -Dateien im src/main/java/ Ordner zu erstellen und die Komponentenbibliothek in Ihrem lokalen Maven -Repo zu kompilieren und zu installieren. $ cd demo$ mvn gwt:devmode aus, um die Demo in SuperdevMode auszuführen, ansonsten führen Sie $ mvn clean package aus, um die Demo -Anwendung im Rahmen von target -Verzeichnis zu erstellen.target/gwt-polymer-demo bedienen oder das generierte target/gwt-polymer-demo.war in einem Servletbehälter bereitstellen.
