Alguien sabe o tiene un ejemplo importando javascript en vaadin 12 con eclipse?, he intentado usarlo y no funciona… intente hacerlo usando un envoltorio html según la información anexa, y nada… no sé si es el eclipse o algo mal implementado. Agradezco cualquier ayuda.
anexos mencionados:
https://vaadin.com/docs/v12/flow/importing-dependencies/tutorial-importing.html
El IDE no debe ser un problema. No sé qué error o qué salida estás obteniendo, pero te puedo explicar un ejemplo de cómo importar JavaScript en Vaadin 10+:
Crea un archivo script.js en el directorio src/main/webapp/frontend/js/ con el siguiente contenido:
function greet(name) {
alert(`Hey, ${name}.`);
}
Crea una clase Java anotada con @JavaScript y que llame al método Page::executeJavaScript(String):
@Route
@JavaScript("frontend://js/script.js")
public class MainView extends VerticalLayout {
public MainView() {
UI.getCurrent().getPage().executeJavaScript("greet('you')");
}
}
pero como se asociaría los eventos y propidedades?
Puedes asociarlos por medio de llamadas al cliente (Java a JavaScript) y llamadas al servidor (JavaScript a Java). El siguiente es un ejemplo:
@Route
@JavaScript("frontend://js/script.js") // load the JavaScript file
public class MainView extends VerticalLayout {
public MainView() {
// call the JavaScript function passing this element and any needed data:
UI.getCurrent().getPage().executeJavaScript(
"confirmGreeting($0, $1)", getElement(), "you");
}
@ClientCallable // expose this method to JavaScript
public void greet(String name) {
Notification.show("Hey, " + name);
}
}
// src/main/webapp/frontend/js/script.js
function confirmGreeting(element, name) {
if (confirm("Wanna see a greeting?")) {
// use the element instance to call the Java method:
element.$server.greet(name);
}
}
Con esto, podrías llamar a un método Java desde tu código JavaScript, por ejemplo, cuando un evento sucede.
Vale la pena resumir algunos ejemplos sobre cómo llamar código JavaScript desde Java:
Cuando la función JavaScript que se desea llamar está asociada a un elemento DOM, usa:
getElement().callFunction("functionName", param1, param2);
Si la función JavaScript está definida en algún otro lugar, usa:
UI.getCurrent().getPage().executeJavascript("functionName($0, $1)", param1, param2);
Adicional a todo esto, podrías crear una plantilla HTML. Esto está bien explicado en la [documentación]
(https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-basic.html).
excelente! respuesta simple y 100% funcional, trabaja perfecto… Una última pregunta para cerrar…
Si quisiera agregar un Api de js de tercero con interfaz grafica, utilizando solo javascript o manipulando en DOM, sin utilizar polymer o componentes web, como lo incluiría?
ej:
<*head> <*script src=“miapi.com/js”> </*head>
<*body> <*div id=“mimapa”></*div>
<*script>
var map;
…
</*script>
</*body>
jose janer:
excelente! respuesta simple y 100% funcional, trabaja perfecto… Una última pregunta para cerrar…Si quisiera agregar un Api de js de tercero con interfaz grafica, utilizando solo javascript o manipulando en DOM, sin utilizar polymer o componentes web, como lo incluiría?
Puedes hacerlo usando los métodos que expliqué anteriormente y manipulando el DOM desde tu código JavaScript + implementando métodos Java para poder usarlo desde el lado servidor.
Hola Alejandro:
Leyendo sus respuestas me pregunto si es posible cargar desde Vaadin una plantilla desarrollada en Bootstrap. La plantilla solo tiene código html, java script y CSS; pero tiene varias páginas y recursos. Se la adjunto…
Siempre he querido hacer esto desde Vaadin, pero no lo he logrado. Sería muy productivo para los desarrolladores de Vaadin poder iniciar un proyecto con plantillas como esas y luego poder seguir desarrollando desde java.
Saludos.
17652585.rar (5.78 MB)
Manuel Enrique:
Hola Alejandro:Leyendo sus respuestas me pregunto si es posible cargar desde Vaadin una plantilla desarrollada en Bootstrap. La plantilla solo tiene código html, java script y CSS; pero tiene varias páginas y recursos. Se la adjunto…
Siempre he querido hacer esto desde Vaadin, pero no lo he logrado. Sería muy productivo para los desarrolladores de Vaadin poder iniciar un proyecto con plantillas como esas y luego poder seguir desarrollando desde java.
Saludos.
En realidad [Lumo theme o Material theme]
(https://vaadin.com/themes) vendrían a reemplazar Bootstrap. No hay necesidad de incorporar otra librería más. Estos dos temas están muy bien diseñados y permiten flexibilidad para adaptarlos a tus requerimientos.
Saludos.