gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
Vaadin transfère la propriété de cette bibliothèque, donc Vaadin ne fournit plus de soutien ou ne fait plus de développement actif.
Nous avons pris cette décision car une fois démontré que les éléments polymères pourraient être facilement intégrés dans GWT, nous voulons investir le temps de notre équipe dans l'ajout de précieux avantages des utilisateurs aux éléments de base de Vaadin et transmettre le bâton à la communauté pour effectuer des intégrations avec d'autres cadres.
De plus, nous sommes heureux d'annoncer que la propriété du référentiel sera transférée d'ici le 20 avril 2017 à @Manolo, qui continuera de le maintenir.
Si vous êtes prêt à participer en tant que collaborateur, veuillez laisser un commentaire dans # 151. Les collaborateurs se verront accorder un accès après le transfert. Nous encourageons la contribution dans toute forme et forme.
La bibliothèque a été générée à l'aide du Vaadin GWT-API-Generator, un utilitaire capable d'inspecter les composants Web Polymer et d'émettre du code Java GWT.
Parce que le polymère se différencie entre les collections, les classes GWT-Polymer-Elements sont préfixées avec les mêmes préfixes ( fer, papier, vaadin ), afin de se référer facilement au composant Web d'origine et de trouver facilement la documentation liée à lui.
Visitez notre cas de spectacle pour voir à quoi ressemblent les composants et pour jeter un œil à l'exemple de code à l'aide de chaque composant.
Lorsque nous analysons le code des composants d'origine pour générer l'API Java, nous copierons toute la documentation JS existante afin qu'elle soit disponible dans le Javadoc. Notez que parfois les descriptions se réfèrent à JS, mais nous considérons qu'il est préférable de maintenir les informations.
Vous avez besoin d'au moins GWT-2.8.0 pour utiliser la bibliothèque.
Le fichier .jar comprend tous les composants Java Code et Web de Polymer Iron and Paper Collections, afin que vous n'ayez pas à faire face au processus de téléchargement et de déploiement de toutes les bibliothèques et composants enveloppés 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 Archive et le mettre dans votre chemin de classe GWT Project.*.gwt.xml : < inherits name = " com.vaadin.polymer.Elements " />
Seul Chrome a une prise en charge native complète pour les composants Web de nos jours, par conséquent, pour que votre projet fonctionne avec tous les navigateurs modernes, vous devez inclure le polyfill des composants Web.
Si vous utilisez les composants polymères comme Widgets , la bibliothèque le chargera en cas de besoin. Sinon, chargez-le très tôt dans votre page d'hôte .html comme il est montré dans le code suivant.
< head >
< script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
< script src =" myapp/myapp.nocache.js " > </ script >
</ head > Vaadin gwt-polymer-elements Bundles Classes pour créer votre application en utilisant Widgets ou Elements JSinterop. Le premier est l'approche classique, tandis que le second deviendra la nouvelle tendance.
Mais à l'heure actuelle, Elements sont le moyen le plus difficile car GWT manque d'une API Elemental-2.0 complète qui reposait sur JsInterop . Nous fournissons un très petit ensemble d'interfaces élémentaires limitées à celles nécessaires à notre implémentation, elles seront remplacées par Elemental-2.0 lorsqu'elle était disponible.
En résumé, pour les projets GWT classiques et de production, il serait plus facile d'utiliser le Widget car l'API n'aurait pas de changements importants. Sinon, si vous souhaitez vous débarrasser de la hiérarchie du widget, nous vous recommandons de commencer à utiliser l'API Element le mélangeant avec une bibliothèque de manipulation DOM comme gwtquery ou simplement les méthodes incluses dans l'API élémentaire.
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 );Remarque: les constructeurs de widgets acceptent tout contenu HTML comme argument qui est annexé au composant Web rendu 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 ou 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 >
Polymer utilise des règles de style Dom Shadow pour fournir un style portée du DOM local de l'élément. Il prend en charge une syntaxe supplémentaire qui n'est pas sous-estimée par l'analyseur GWT GSS.
Polymer s'occupe de sa syntaxe analysant tout bloc <style> que vous pourriez avoir dans votre page hôte, mais si vous souhaitez spécifier des règles de style dans Uibinder, vous devez ajouter vos blocs de style à n'importe quel panneau.
< 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 >Pour plus d'informations sur la syntaxe de style polymère, visitez leur documentation
Si vous souhaitez plonger dans des sources .java , nous ne maintenons pas les fichiers générés, vous devez donc télécharger le punge Vaadin-GWT-Polymer-Elements-xxx-Sources.jar. Sinon, vous pourriez jeter un coup d'œil aux cours et modèles Java Helper dans le projet GWT-API-Generator.
Avant d'utiliser un composant, vous devez importer les fichiers appropriés. Mais gwt-polymer-elements est livré avec certains services publics, de sorte que vous seriez fait automatiquement.
PaperButton button = new PapperButton();
Polymer Helper PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer a quelques méthodes pour faire l'importation dynamiquement Polymer.importHref("paper-button/paper-button.html");
<link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>
Les composants Web pourraient être enregistrés et initialisés de manière asynchrone. Ainsi, gwt-polymer-elements est livré avec certaines méthodes qui contribuent à exécuter des rappels lorsque le composant est réellement prêt.
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
}
})
Ajoutez le référentiel suivant à votre pom.xml et modifiez la version en utilisant le dernier énuméré dans cette URL
<repository>
<id>snapshots</id>
<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
<snapshots><enabled>true</enabled></snapshots>
</repository>
Pour compiler la bibliothèque vaadin-gwt-polymer-elements par vous-même.
$ git checkout https://github.com/vaadin/gwt-polymer-elements.git$ cd gwt-polymer-elements$ npm install pour télécharger tous les composants dans le dossier src/main/resources , pour créer tous les fichiers Java nécessaires pour GWT dans le dossier src/main/java/ et pour compiler et installer la bibliothèque de composants dans votre réapprovisionnement Maven local. $ cd demo$ mvn gwt:devmode pour exécuter la démo dans SuperDevMode, sinon exécutez $ mvn clean package pour créer l'application de démonstration dans le répertoire target .target/gwt-polymer-demo ou vous pouvez déployer la target/gwt-polymer-demo.war dans un conteneur de servlet.
