Hola a tod@s,
Quiero integrar en mi proyecto Vaadin 13 y Polymer (template), bootstrap fontawesone jquery. Hago los imports mediante la anotación @JavaScript @StyleSheet, pero no lo esta aplicando en la template y tampoco esta conservando el orden importación.
Y no se como se puede hacer para que los js se situen el final del body.
Hola Albert!
[De acuerdo a la documentación oficial]
(https://vaadin.com/docs/v13/flow/importing-dependencies/tutorial-ways-of-importing.html#dependency-loading-order), el orden entre diferentes tipos de archivos no está garantizado (aunque no debería generar problemas):
The loading order of imported dependencies is only guaranteed for one file type, in one class. There are no other loading-order guarantees. Specifically, loading order is not guaranteed between classes or files types.
De todas maneras se menciona un workaround:
You can control the load order of dependencies of different file types, by adding imports within an HTML import.
Example: Ensuring htmlimport4.html runs before htmlimport4-js.js.
<link rel="import" href="htmlimport4.html">
<script src="htmlimport4-js.js"></script>
Con respecto a que no aplica los estilos a los templates, depende de como esté hecho el template. Recuerda que los WebComponents protejen el template para que no apliquen los estilos globales al contenido del shadow-dom.
Finalmente con respecto a como hacer para que los imports aparezcan al final, algo que podrías hacer es crear una clase para renderizar un tag de esta manera:
@Tag("script")
public class Script extends Component {
public Script(String src) {
this.getElement().setAttribute("type", "text/javascript");
this.getElement().setAttribute("src", src);
}
}
Y asegurarte de que se agregue al final del body.
Otra opción es usar la anotación @Javascript de esta manera:
@JavaScript(value="mylibrary.js",loadMode=LoadMode.LAZY)
Saludos!
Hola Martín,
Gracias por la respuesta, lo que me comentas es lo que trate de hacer para cargar los js y css de forma correcta.
Pero tuve que llevar los css a
<dom-module id="shared-styles"> <template> <style include>
con esto se aplica y en cada sytle de los html incluirlo se aplica.
Para JavaScript el final en el java cree el codigo para que se ejecutará el momento de crear el compomente
.append("try {")
.append(" var script = document.createElement('script');")
.append(" script.setAttribute('type', 'text/javascript');")
.append(" script.setAttribute('src', './frontend/js/msjs-1.0.js');")
.append(" var content = document.createTextNode('');")
.append(" script.appendChild(content);")
.append(" document.body.appendChild(script);")
.append("} catch (e) {")
.append(" alert(e);")
.append("}")
.append("");
UI.getCurrent().getPage().executeJavaScript(script.toString());
Estoy acostumbrado a trabajar con Angular2 pero veo que se comportan de formas distintas, y por lo que pude ir revisando JQuery no funciona en Polymer. Y supongo que por eso no me funciona el javascript que queria aplicar.
Tendre buscar alternativa para poder crear el componente que quiero para la aplicación y los efectos de menu para mostrar una sidebar con el evento mouseover.
Gracias!!!