Inicio una serie de entradas sobre Vaadin en las cuales realizaré una descripción de esta tecnología desde un punto de vista práctico. En esta primera entrada, cuyo título es Vaadin I: Introducción, realizaré una breve presentación de la tecnología así como la creación de una aplicación básica de tipo “Hola Mundo”.
Vaadin es aquel framework de nivel de presentación que permite realizar la definición de interfaces de usuario desde el servidor y utilizando un motor JavaScript del lado del cliente. La ejecución de una aplicación Vaadin se ejecuta como un Servlets en una servidor Web Java.
Vaadin está basado en aplicaciones con tecnologías AJAX, GWT (Google Web Toolkit) y JSON; pero estas tecnologías, no son necesarias conocerlas en el desarrollo porque todo el código es Java. Vaadin contiene un conjunto de componentes y controladores. Los componentes que tiene, entre otros, son: Label, TextField, TextArea, Tree, Table,etc,…
La referencia del site oficial es la siguiente: http:/www.vaadin.com
Entorno de desarrollo
El entorno de desarrollo que utilizo es Eclipse, en concreto, STS SpringSource Tools Suite; para este IDE, existe un plugin cuyo nombre es Vaadin plugin for Eclipse. Para su instalación, se realiza desde Eclipse Marketplace en la opción Help/Eclipse Marketplace; tras realizar su búsqueda en el market, se instalada conforme al proceso de instalación de un plugin.
Para la gestión del ciclo de vida he utilizado Maven. He creado un proyecto a partir de los arquetipos de proyectos que ofrece Maven para Vaadin; y, en la configuración del arquetipo, se utiliza el servidor Jetty. El proyecto maven utiliza un plugin de Vaadin cuya definición es la siguiente:
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.plugin.version}</version>
<configuration>
<extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
<webappDirectory>${basedir}/src/main/webapp/VAADIN/widgetsets
</webappDirectory>
<hostedWebapp>${basedir}/src/main/webapp/VAADIN/widgetsets
</hostedWebapp>
<noServer>true</noServer>
<draftCompile>false</draftCompile>
<compileReport>true</compileReport>
<style>OBF</style>
<strict>true</strict>
<runTarget>http://localhost:8080/</runTarget>
</configuration>
<executions>
<execution>
<configuration>
</configuration>
<goals>
<goal>resources</goal>
<goal>update-widgetset</goal>
<goal>compile</goal>
</goals>
</execution>
</executions>
</plugin>
Ejemplo «Hola Mundo»
La aplicación está definida en una clase java que hereda de la clase com.vaadin.ui.UI. Esta clase representa la aplicación y es a la que se referencia desde la configuración del Servlet.
La definición de una clase básica UI es la siguiente:
@Title("Demo")
@SuppressWarnings("serial")
public class Vaadin1 extends UI
{
@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.addComponent( new Label(“Hola Mundo”) );
setContent(layout);
}
}
El código anterior define una pantalla con el texto “Hola Mundo” dentro de un layout vertical y, el título de la pantalla, se define mediante la anotación @Title . Para la ejecución del código anterior, es necesario la configuración del servlet. Esta configuración se puede realizar de dos formas: utilizando anotaciones; o bien, utilizando el fichero web.xml. La configuración del servlet utilizando anotaciones, se realiza definiendo en la clase Vaadin1 el servlet de la siguiente forma:
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = Vaadin1.class)
public static class Servlet extends VaadinServlet {}
La configuración en el fichero web.xml, se realiza de la siguiente forma:
<servlet> <servlet-name>Vaadin</servlet-name> <servlet-class> com.vaadin.server.VaadinServlet</servlet-class> <init-param> <description>Vaadin UI to display</description> <param-name>UI</param-name> <param-value>es.directoandroid.vaadin.Vaadin1</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>Vaadin</servlet-name> <url-pattern>/*</url-pattern> </servlet-mapping>
Para la ejecución del proyecto, se realiza ejecutando los comandos característicos de maven en la carpeta del proyecto: mvn clean install, para la compilación y creación del war; y, jetty:run, para la iniciar el servidor. La url a insertar en el navegador para realizar las pruebas es http://localhost:8080.
Si se desea el código de este proyecto se puede acceder aquí.
En la siguiente entrada, Vaadin II: MVP con Guava, realizaré la descripción del modelado del patrón MVP con Vaadin.
Directo Android 