En este tutorial vamos a ver una introducción a Vaadin, que es un framework de la capa de vista en Java
Índice de contenidos
- 1. Introducción
- 2. Entorno
- 3. Creación de un proyecto Vaadin
- 4. Fundamentos de la clase UI
- 5. Layouts programáticos vs declarativos
- 6. Conclusiones
- 7. Referencias
1. Introducción
Vaadin es un framework de desarrollo de SPA que permite escribir el código de dichas aplicaciones en Java o en cualquier otro lenguaje soportado por la JVM 1.6+. Esto permite la programación de la interfaz gráfica en lenguajes como Java 8, Scala o Groovy, por ejemplo.
Uno de las características diferenciadores de Vaadin es que, contrario a las librerías y frameworks de JavaScript típicas, presenta una arquitectura centrada en el servidor, lo que implica que la mayoría de la lógica es ejecutada en los servidores remotos. Del lado del cliente, Vaadin está construido encima de Google Web Toolkit, con el que puede extenderse.
2. Entorno
El tutorial está escrito usando el siguiente entorno:
- Hardware: MacBook Pro Intel Core 2 Duo 8GB RAM.
- Sistema Operativo: Mac OS Yosemite 10.10
- Entorno de desarrollo: Eclipse Mars 4.5
- JRE 1.8.0_51
- Apache Maven 3.3.3
- Apache Tomcat 8.0.24
3. Creación de un proyecto Vaadin
Para empezar a desarrollar aplicaciones en Vaadin se nos presentan dos alternativas muy sencillas:
- Utilizar los plugins específicos para IDEs como NetBeans, Eclipse o IntelliJ (utilizan como gestor de dependencias Ivy)
- Crear directamente un proyecto con Maven haciendo uso del arquetipo de aplicación con Vaadin.
En este tutorial se seguirá la segunda alternativa, ya que tenemos un mejor control de lo que estamos haciendo, reduciendos los niveles de «magia» considerablemente.
Empezamos creando el proyecto Vaadin en una terminal con Maven. Para ello utilizamos la última versión del arquetipo de aplicación de este tipo:
|
1 2 3 4 |
$ mvn archetype:generate \ -DarchetypeGroupId=com.vaadin \ -DarchetypeArtifactId=vaadin-archetype-application \ -DarchetypeVersion=7.5.6 |
Iremos suministrando al asistente de Maven los datos de grupo y nombre de artefacto de nuestro proyecto. En mi caso:
- Grupo: com.autentia.vaadin.
- Artefacto: tutorial_vaadin.
- Version: la por defecto, 1.0-SNAPSHOT.
Si todo ha ido bien, podremos cambiar al directorio creado y realizar una instalación de la aplicación Vaadin:
|
1 2 |
$ cd tutorial_vaadin $ mvn clean install |
Dependiendo de si ya tenemos las dependencias en nuestro repositorio local de Maven, ésta última operación será más o menos larga. Lo que se llevará la mayoría de tiempo es la compilación de los módulos de Widgets de Vaadin personalizados (esqueleto MyAppWidgetSet auto-generado por el arquetipo).
Como alternativa, podemos hacer uso del objetivo verify, que construirá y pasarás las pruebas a nuestro proyecto:
|
1 |
$ mvn verify |
Vamos a arrancar la aplicación con el servidor Jetty empotrado en el arquetipo de Vaadin:
Si ahora abrimos un navegador y accedemos a http://localhost:8080/ , veremos la aplicación de muestra de Vaadin ejecutándose:
|
1 |
$ mvn jetty:run |
3.1. Importación a un proyecto Eclipse
Importemos ahora el proyecto en Eclipse mediante «Import Maven Project».
NOTA: Si al realizar la importación del proyecto, Eclipse nos muestra un mensaje de error parecido a «Plugin execution not covered by lifecycle configuration […] update-theme» lo que me ha funcionado a mí es añadir el objetivo en conflicto (en este caso, update-theme) dentro de lifecycle-mapping de org.eclipse.me2:
pom.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<plugin> <groupId>org.eclipse.m2e</groupId> <artifactId>lifecycle-mapping</artifactId> [...] <goals> <goal>resources</goal> <goal>update-widgetset</goal> <goal>compile</goal> <goal>compile-theme</goal> <goal>update-theme</goal> </goals> [...] |
4. Fundamentos de la clase UI
Entre los ficheros fuente que nos ha generado el arquetipo Maven de Vaadin, el más interesante es MyUI.java:
MyUI.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@Theme("mytheme") @Widgetset("com.autentia.vaadin.MyAppWidgetset") public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { final VerticalLayout layout = new VerticalLayout(); layout.setMargin(true); setContent(layout); Button button = new Button("Click Me"); button.addClickListener(new Button.ClickListener() { @Override public void buttonClick(ClickEvent event) { layout.addComponent(new Label("Thank you for clicking")); } }); layout.addComponent(button); } @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } } |
Repasemos las partes más interesantes de este código:
- Líneas 1-2: Mediante anotaciones, le decimos a Vaadin qué temas y conjunto de Widgets vamos a hacer uso. También podremos decirle el título de la página con @Title, por ejemplo.
- Línea 3: La superclase UI representa una página que se mostrará en el cliente.
- Línea 6: El método init() es el punto de entrada de toda subclase de UI. Su objetivo básico es la inicialización y configuración de la interfaz gráfica visible al usuario. Es ejecutada en cada refresco de página.
- Línea 7: Como muchos frameworks de este tipo, la organización de la interfaz viene dada por la definición de layouts.
- Líneas 11-12: Fácil definición de funciones de callback para la comunicación asíncrona con el servidor.
- Líneas 22-24: Ya que hace uso de la especificación 3.0+ de Servlets, no existe necesidad de un archivo web.xml, si no que mediante anotaciones podemos exponer nuestra clase con una URI personalizada.
5. Layouts programáticos vs declarativos
A la hora de definir layouts, Vaadin nos permite elegir entre hacerlo mediante código Java (muy parecido a la definición con Swing) o haciendo uso de ficheros HTML específicos.
Por ejemplo, la creación de un layout de un formulario, en su versión programática sería algo parecido a lo siguiente:
SampleForm.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
public class SampleForm extends FormLayout { Button button1 = new Button("Click me", this::button1Action); Button button2 = new Button("DO NOT Click me", this::button2Action); TextField textField1 = new TextField("I am a TextField, nothing more"); [...] public SampleForm() { configureComponents(); buildLayout(); } [...] private void configureComponents() { button1.setStyleName(ValoTheme.BUTTON_PRIMARY); button1.setClickShortcut(ShortcutAction.KeyCode.ENTER); setVisible(false); } private void buildLayout() { setSizeUndefined(); setMargin(true); HorizontalLayout actions = new HorizontalLayout(button1, button2); actions.setSpacing(true); addComponents(actions, textField1); } [...] } |
La versión declarativa de este snippet constaría de un fichero HTML de definición de los espacios donde reside cada componente, la clase Java que lee dicho fichero y por último, el propio código de lógica del formulario.
SampleFormLayout.html
|
1 2 3 4 5 6 7 |
<v-form-layout size-auto margin> <v-horizontal-layout spacing> <v-button style-name="primary" _id="button1">Click me</v-button> <v-button _id="button2">DO NOT Click me</v-button> </v-horizontal-layout> <v-text-field caption="I am a TextField, nothing more" _id="textField1"></v-text-field> </v-form-layout> |
SampleFormLayout.java
|
1 2 3 4 5 6 7 8 9 |
@DesignRoot public class SampleFormLayout extends FormLayout { protected Button button1; protected Button button2; public SampleFormLayout() { Design.read(this); } } |
SampleForm.java
|
1 2 3 4 5 6 7 8 9 10 |
public class SampleForm extends SampleFormLayout { [...] public SampleForm() { setVisible(false); button1.setClickShortcut(ShortcutAction.KeyCode.ENTER); button1.addClickListener(this::button1Action); button2.addClickListener(this::button2Action); } [...] |
El resultado de ambos es el mismo:
6. Conclusiones
Vaadin presenta una alternativa interesante a toda la fiebre de librerías y frameworks del lado del cliente con JavaScript para la creación de aplicaciones de una sola página, rápidas e interactivas, volviendo a la arquitectura del lado servidor. Bien vale que se le eche un ojo, ya que su comunidad no hace más que crecer.
