Vaadin es un conjunto de herramientas para crear aplicaciones web dirigido tanto a desarrolladores frontend como backend. Si eres, por ejemplo, un Desarrollador JavaScript, puedes usar los Componentes de Vaadin en cualquier documento HTML. Si eres un Desarrollador Java, puedes usar la API de Java y olvidarte de programar en HTML y JavaScript.
En este art铆culo te mostrar茅 c贸mo crear la famosa aplicaci贸n “Hola Mundo” usando el Lenguaje de Programaci贸n Java y Vaadin 12 (tambi茅n v谩lido para Vaadin 10 y 11). Ponte c贸modo, aseg煤rate de tener Maven instalado, inicia tu IDE favorito, 隆y empecemos!
Comienza con un starter, obviamente#
Visita https://vaadin.com/start/latest y selecciona Project Base. Este es el starter de proyecto m谩s sencillo y sirve bien como un punto inicial. Haz clic en Descargar y extrae el archivo zip. Obtendr谩s un directorio que contiene un proyecto Maven. Importa este proyecto en tu IDE favorito (el m铆o es IntelliJ IDEA, por cierto).
Resultar谩s con una estructura de directorios similar a la siguiente:
No te preocupes por los subdirectorios resources y webapp por ahora. Adem谩s, quiero que te pongas manos a la obra e implementes la aplicaci贸n de ejemplo por ti mismo. Ahora, el starter incluye la clase MainView que implementa una especie de aplicaci贸n Hola Mundo. As铆 que, deshazte del c贸digo en la clase MainView eliminando cualquier anotaci贸n, clases extendidas y c贸digo en el constructor. Contin煤a y elimina el c贸digo hasta que se vea como lo siguiente (o elimina el archivo y crea uno nuevo):
package org.vaadin.alejandro; // usa el tuyo, por supuesto
public class MainView {
聽 聽 public MainView() {
聽 聽 }
}
El proyecto est谩 listo. 隆Agreguemos un poco de c贸digo!
Agrega componentes de UI a la p谩gina web#
Piensa en la clase MainView como la p谩gina web mostrada cuando solicitas la aplicaci贸n en el navegador web. Comencemos haciendo la aplicaci贸n Hola Mundo m谩s sencilla que podamos hacer con Vaadin: Una aplicaci贸n web que muestra un saludo en la pantalla.
Primero, necesitamos que la clase MainView sea de un tipo que Vaadin reconozca como un componente de UI con el que pueda tratar. Tienes muchas opciones, pero extenderemos una clase popular llamada VerticalLayout:
package org.vaadin.alejandro;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
public class MainView extends VerticalLayout {
聽 聽 public MainView() {
聽 聽 }
}
Ahora la clase MainView es m谩s poderosa que antes. Revisa en tu IDE algunos de los m茅todos disponibles en VerticalLayout. Puedes usar la funci贸n de autocompletado de tu IDE para explorar r谩pidamente lo que est谩 disponible:
驴Pero qu茅 es un VerticalLayout? Un VerticalLayout es un componente de UI que organiza otros componentes de UI (como botones o tables) de manera vertical (en columna). Para esto se usa el m茅todo VerticalLayout.add(Component...). Pero primero, necesitamos preparar el componente que queremos agregar al VerticalLayout. Usemos uno muy simple: Text. Adelante, crea una nueva instancia de esta clase dentro del constructor:
public MainView() {
聽 聽 Text text = new Text("Hola, Mundo!");
}
Ahora llama al m茅todo add(Component...) para agregar el componente de texto al VerticalLayout:
public MainView() {
聽 聽 Text text = new Text("Hola, Mundo!");
聽 聽 add(text);
}
Expone la vista como una p谩gina web#
Para servir esta clase como una p谩gina web, necesitas informarle a Vaadin tu intenci贸n de hacerlo. Esto es muy f谩cil. Simplemente anota tu clase MainView con @Route:
@Route
public class MainView extends VerticalLayout {
聽 聽 ...
}
La anotaci贸n @Route acepta un par谩metro opcional para especificar la ruta actual (la 煤ltima parte de la URL) que deseas usar para mostrar esta vista. Por ejemplo, @Route("hola") har铆a que la vista estuviera disponible en http://localhost:8080/hola. Sin embargo, Vaadin utiliza una convenci贸n con el nombre de la clase. Como nuestra clase se llama MainView, Vaadin expone la vista en la ra铆z del contexto (http://localhost:8080/). Adem谩s, si agregas una clase llamada CustomersView, por ejemplo, Vaadin expone la vista en http://localhost:8080/customers (n贸tese c贸mo se ignora la parte “View” en el nombre de la clase). Cualquier otro nombre se expone usando el nombre de la clase. Solo recuerda que puedes anular esto usando el par谩metro de tipo String en la anotaci贸n @Route.
Despliega y ejecuta la aplicaci贸n web#
Dado que usamos un starter de Vaadin para crear el proyecto, el archivo pom.xml incluye el plugin de Jetty para Maven, que te permite usar Maven para desplegar y ejecutar la aplicaci贸n web en un servidor Jetty local. La forma m谩s r谩pida de ejecutar la aplicaci贸n es usar un terminal de l铆nea de comandos y ejecutar:
mvn jetty:run
Sin embargo, te recomiendo crear una configuraci贸n de ejecuci贸n en tu IDE. Una configuraci贸n de ejecuci贸n es como un atajo dentro del IDE para ejecutar una acci贸n, por ejemplo, un comando Maven. La mayor铆a de los IDEs ofrecen la posibilidad de crear esto desde una vista Maven que muestra todos los complementos y sus metas correspondientes. En IntelliJ IDEA se ve de la siguiente forma:
Simplemente puedes hacer doble clic en la opci贸n jetty:run para desplegar la aplicaci贸n e iniciar el servidor Jetty. O puedes hacer clic derecho en la opci贸n para crear una configuraci贸n de ejecuci贸n que se mostrar谩 en la parte superior de la ventana del IDE. Este 煤ltimo m茅todo tiene la ventaja de ofrecer un atajo de teclado para la configuraci贸n de ejecuci贸n tambi茅n. Alternativamente, puedes usar cualquier otro servidor que incluya un Servlet Container para desplegar y ejecutar la aplicaci贸n. Por ejemplo, Tomcat o GlassFish. No cubriremos este tema aqu铆. Hay muchos recursos 煤tiles online que explican c贸mo usar estos servidores.
Una vez que la aplicaci贸n est茅 compilada, dirige tu navegador a http://localhost:8080 para ver el resultado. Ten en cuenta que la compilaci贸n puede tardar un tiempo la primera vez que la hagas, ya que es posible que no tengas todas las dependencias de Maven en tu disco duro, pero esto ser谩 mucho m谩s r谩pido despu茅s, tanto para este proyecto como para los nuevos. Aqu铆 hay una captura de pantalla de la aplicaci贸n:
Agrega comportamiento a la aplicaci贸n web#
Vaadin incluye muchos componentes de UI listos para usar. Hay botones, cuadros combinados, tablas (grids), casillas de verificaci贸n, campos de texto, gr谩ficos y muchos m谩s. Usemos las clases TextField y Button para agregar interactividad a la aplicaci贸n web.
Comienza creando instancias de estas dos clases en el constructor:
TextField textField = new TextField("驴C贸mo te llamas?");
Button button = new Button("Ok");
Queremos mostrar un saludo personalizado que contenga el nombre introducido en el campo de texto cada vez que el usuario haga clic en el bot贸n. La forma en que reaccionas a las acciones del usuario (como hacer clic en un bot贸n) es agregando listeners. En el caso de un Button, un listener de clics:
button.addClickListener(e -> ... tu c贸digo personalizado aqu铆 ...);
Usemos otro componente de UI de Vaadin para mostrar un mensaje:
button.addClickListener(e -> Notification.show("Hola"));
El saludo a煤n no es personalizado. Queremos usar el nombre introducido en el campo de texto como parte del saludo. Podemos obtener este valor usando el m茅todo TextField.getValue(). No podr铆a ser m谩s f谩cil:
button.addClickListener(e -> Notification.show("Hola " + textField.getValue()));
Ah铆 est谩. Tienes nuevos componentes y comportamiento en tu aplicaci贸n. S贸lo nos falta una 煤ltima cosa: Hemos creado y configurado componentes de UI, pero nunca los agregamos al VerticalLayout. Usa el m茅todo add para solucionarlo:
add(textField, button);
Reinicia el servidor Jetty y ve a http://localhost:8080 para ver los cambios:
驴Qu茅 sigue?#
Hay muchas otras caracter铆sticas interesantes en Vaadin. Te sugerir铆a continuar con el tutorial oficial de Vaadin en https://vaadin.com/tutorials/getting-started-with-flow que explica c贸mo construir una aplicaci贸n m谩s realista. Si quieres dominar Vaadin, sugiero leer la documentaci贸n en https://vaadin.com/docs.