contenido.adoc

Tutorial de inicio rápido con Vaadin

Traducido del original en Inglés

En este tutorial, podrás aprender como construir una aplicación Vaadin pequeña, pero totalmente funcional. Este ejemplo te enseñará lo básico del desarrollo basado en componentes y manejo de eventos.

La aplicación que contruirás es la aplicación clásica Todo.

Prerequisitos

Para continuar asegúrate que al menos estén instaladas las siguientes herramientas:

• Java Development Kit (JDK) 8 o posterior, como OpenJDK 8

• Un Java IDE, como IntelliJ IDEA Community

Decargando un proyecto Vaadin mínimo

Bajar

Una vez descargado el proyecto, descomprime el archivo, por ej. en tu directorio home. Por ahora, no necesitamos instalar ningún IDE o servidor de aplicaciones. Utilizararemos un servidor simple Java embebido para ejecutar la aplicación y un editor de texto para editar el código fuente.

La carpeta del proyecto tiene algunos archivos y carpetas, muchos de ellos relacionados con las dependencias y la configuración del proyecto. En este tutorial, solo estamos interesados en nuestro código de UI en src/main/java/com/vaadin/example/MainView.java

Construye el proyecto y ejecuta la aplicación en un servidor Jetty embebido. En la carpeta raíz del proyecto, ejecuta el script mvnw.

Navega a localhost:8080, y verás una aplicación Vaadin básica que muestra un botón.

Ahora estamos listos para comenzar a construir la aplicación.

Construyendo UIs con componentes y layouts

Abre src/main/java/com/vaadin/example/MainView.java en un editor de textos.

Vaadin es un framework basado en componentes. Puedes construir interfaces de usuario creando instancias de componentes y colocándolos en layouts que determinan cómo se muestran. MainView extiende de VerticalLayout. Esto significa que cada componente agregado se coloca debajo del anterior. Vaadin agrega espacio alrededor del layout y los componentes para mayor claridad visual.

Reemplaza el código en MainView con lo siguiente:

MainView.java

package com.vaadin.example;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.router.Route;

@Route
public class MainView extends VerticalLayout {

  public MainView() {
    VerticalLayout todosList = new VerticalLayout(); // (1)
    TextField taskField = new TextField(); // (2)
    Button addButton = new Button("Add"); // (3)
    addButton.addClickShortcut(Key.ENTER);
    addButton.addClickListener(click -> {
      // (4)
      Checkbox checkbox = new Checkbox(taskField.getValue());
      todosList.add(checkbox);
    });
    add( // (5)
      new H1("Vaadin Todo"),
      todosList,
      new HorizontalLayout(
        taskField,
        addButton
      )
    );
  }
}

1. todosList es un layout vertical que muestra la tarea y los checkboxes

2. taskField es el campo de entrada de texto para nuevas tareas

3. addButton dispara la lógica para agregar nuevos items a nuestra lista de Todo items

4. En el listener de clic en el botón, crea un checkbox con el valor del taskField como su etiqueta.

5. La llamada a add de VerticalLayout define cómo se deben mostrar los componentes. Observe que taskField y addButton están en un HorizontalLayout que los coloca uno al lado del otro.

Si todavía tienes tu servidor en ejecución, detiene el proceso y vuelve a ejecutar el script mvwn.

Si navegas a localhost:8080, deberías ver lo siguiente:

Siguientes pasos

Para desarrollar aplicaciones más complejas, recomendamos usar un IDE como Eclipse o IntelliJ IDEA. Antes de implementar tu aplicación en producción, debes aplicar técnicas de agrupación y minificación. Estos temas y muchos más están cubiertos en nuestros tutoriales y cursos en video.

• Tutorial de aplicación CRUD

• Curso en video en línea gratuito que cubre los conceptos básicos de Vaadin