gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
Vaadin transfiere la propiedad de esta biblioteca, por lo que Vaadin ya no brinda soporte o hace un desarrollo activo en ella.
Tomamos esta decisión porque una vez demostramos que los elementos de polímeros podrían integrarse fácilmente en GWT, queremos invertir el tiempo de nuestro equipo para agregar valiosos beneficios de los usuarios a los elementos centrales de Vaadin, y pasar el bastón a la comunidad para hacer integraciones con otros marcos.
Además, nos complace anunciar que la propiedad del repositorio se transferirá antes del 20 de abril de 2017 a @Manolo, quien continuará manteniéndolo.
Si está dispuesto a participar como colaborador, deje un comentario en el #151. Los colaboradores recibirán acceso después de la transferencia. Alentamos la contribución en cualquier forma y forma.
La biblioteca se ha generado utilizando el generador Vaadin GWT-API, una utilidad capaz de inspeccionar los componentes web de polímeros y emitir el código GWT Java.
Debido a que el polímero se diferencia entre las colecciones, las clases de elementos GWT-Polymer tienen el prefijo con los mismos prefijos ( hierro, papel, vaadin ), para referirse fácilmente al componente web original y encontrar fácilmente la documentación relacionada con él.
Visite nuestro caso de espectáculo para ver cómo se ven los componentes y ver el código de ejemplo utilizando cada componente.
Cuando analizamos el código de componentes originales para generar la API Java, copiamos toda la documentación JS existente para que esté disponible en el Javadoc. Tenga en cuenta que a veces las descripciones se referirían a JS, pero consideramos que es mejor mantener la información.
Necesita al menos GWT-2.8.0 para usar la biblioteca.
El archivo .jar incluye todos los componentes del código Java y la web de las colecciones de hierro y papel de polímero, por lo que no tiene que lidiar con el proceso de descarga e implementación de todas las bibliotecas y componentes envueltos 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 y ponerlo en su ClassPath del proyecto GWT.*.gwt.xml : < inherits name = " com.vaadin.polymer.Elements " />
Solo Chrome tiene un soporte nativo completo para los componentes web hoy en día, por lo tanto, para que su proyecto funcione con todos los navegadores modernos, debe incluir el polyfil de componentes web.
Si usa los componentes del polímero como Widgets , la biblioteca la cargará cuando sea necesario. De lo contrario, cargue muy temprano en su página de host .html como se muestra en el siguiente código.
< head >
< script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
< script src =" myapp/myapp.nocache.js " > </ script >
</ head > Vaadin gwt-polymer-elements BUNDLES Clases para construir su aplicación utilizando Widgets o Elements JSINTEROP. El primero es el enfoque clásico, mientras que el segundo se convertirá en la nueva tendencia.
Pero en este momento, Elements es la forma más difícil porque GWT carece de una API Elemental-2.0 completa que depende de JsInterop . Proporcionamos un conjunto muy pequeño de interfaces elementales limitadas a las necesarias para nuestra implementación, serán reemplazadas por Elemental-2.0 cuando estaba disponible.
En resumen, para proyectos GWT clásicos y de producción, sería más fácil usar el Widget ya que la API no tendría cambios importantes. De lo contrario, si desea deshacerse de la jerarquía de widgets, recomendamos comenzar a usar la API Element que lo mezcla con una biblioteca de manipulación DOM como gwtquery o solo los métodos incluidos en la 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 );Nota: Los constructores de widget aceptan cualquier contenido HTML como argumento que se adjunta al componente web Renderizado 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 o Elements en 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 utiliza reglas de estilo DOM Shadow para proporcionar un estilo de alcance del DOM local del elemento. Admite una sintaxis adicional que no es discutible por el analizador GWT GSS.
Polymer se encarga de su sintaxis analizando cualquier bloque <style> que pueda tener en su página de host, pero si desea especificar algunas reglas de estilo en Uibinder, debe agregar sus bloques de estilo a cualquier panel.
< 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 >Para obtener más información sobre la sintaxis de estilo de polímero, visite su documentación
Si desea sumergirse en fuentes .java , no mantenemos archivos generados, por lo tanto, debe descargar el paquete Vaadin-Gwt-Polymer-Elements-XXX-Sources.jar. De lo contrario, puede echar un vistazo a las clases y plantillas de Java.
Antes de usar cualquier componente, debe importar los archivos apropiados. Pero gwt-polymer-elements viene con algunas utilidades, por lo que, como usted se haría automáticamente.
PaperButton button = new PapperButton();
Polymer PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer tiene un par de métodos para hacer la importación dinámicamente Polymer.importHref("paper-button/paper-button.html");
<link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>
Los componentes web podrían registrarse e inicializarse asincrónicamente. Por lo tanto, gwt-polymer-elements viene con algunos métodos que ayudan a ejecutar devoluciones de llamada cuando el componente está realmente listo.
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
}
})
Agregue el siguiente repositorio a su pom.xml y cambie la versión utilizando las últimas listadas en esta URL
<repository>
<id>snapshots</id>
<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
<snapshots><enabled>true</enabled></snapshots>
</repository>
Para compilar la biblioteca vaadin-gwt-polymer-elements por usted mismo.
$ git checkout https://github.com/vaadin/gwt-polymer-elements.git$ cd gwt-polymer-elements$ npm install para descargar todos los componentes en la carpeta src/main/resources , para crear todos los archivos Java necesarios para GWT en la carpeta src/main/java/ para compilar e instalar la biblioteca de componentes en su repositorio local Maven. $ cd demo$ mvn gwt:devmode para ejecutar la demostración en SuperDevMode, de lo contrario, ejecute $ mvn clean package para construir la aplicación de demostración en el directorio target .target/gwt-polymer-demo o puede implementar el target/gwt-polymer-demo.war en un contenedor de servlet.
