Aprendiendo Vaadin #1: Hola Mundo

Gestor de proyectosLlevaba tiempo buscando una forma de poder desarrollar una aplicación RIA sin tener que sufrir una dura curva de aprendizaje, aprovechando mis conocimientos de Java y obteniendo unos resultados suficientemente buenos. De primeras, GWT me pareció una buena opción, pero después descubrí Vaadin, que bajo mi punto de vista va un paso más allá y me convenció mucho más. En esta serie de entradas compartiré mis primeras experiencias con este framework.

Y bien, ¿por qué Vaadin? Creo que es un framework muy a tener en cuenta pues aporta a cualquier equipo de desarrollo RIA grandes y claras ventajas competitivas. Generalmente en este tipo de proyectos suelen existir 2 perfiles claramente diferenciados: el desarrollador de front-end y el de back-end. Aunque se pueda dar el caso, no es muy común contar con miembros en el equipo que dominen ambas vertientes, y más difícil aún es encontrar alguien de estas características en el mercado laboral con cierta urgencia.
Pues bien, usando Vaadin, sólo con perfiles Java es posible desarrollar aplicaciones 100% RIA de resultados sorprendentemente buenos, lo cual aporta una gran flexibilidad para poder echar en cualquier momento más carne en el asador de un lado o de otro.
Por otro lado, la posibilidad de crear aplicaciones móviles HTML5 mediante el add-on TouchKit usando exclusivamente Java para su desarrollo me parece muy atractiva.

Cómo no podía ser de otra forma, el primer acercamiento será creando el típico “Hola Mundo”. Crearé el proyecto AprendiendoVaadin montando primeramente un entorno siguiendo las indicaciones del libro de Vaadin. En mi caso, como voy a usar Eclipse, he seguido las instrucciones para instalar el plugin de Eclipse y para crear y ejecutar un nuevo proyecto. Tras ello me encuentro que ya tengo un pequeño código de ejemplo:

public class AprendiendoVaadinUI extends UI {

	@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout layout = new VerticalLayout();
		layout.setMargin(true);
		setContent(layout);

		Button button = new Button("Click Me");
		button.addClickListener(new Button.ClickListener() {
			public void buttonClick(ClickEvent event) {
				layout.addComponent(new Label("Thank you for clicking"));
			}
		});
		layout.addComponent(button);
	}
}

Resulta fácil de leer y muy claro lo que hace. La clase extiende UI (User Interface) que es la clase padre de donde deben heredar las interfaces de usuario que vayamos a crear. A continuación sobreescribe el método init que inicializará la interfaz de usuario.
Define un Layout vertical que se asigna a la interfaz. Después crea un botón al que asigna un comportamiento ante el evento Click y añade el botón al layout creado previamente.
Ante un click en el botón lo que ocurrirá es que aparecerá un Label dándonos las gracias justo debajo del botón, ya que el layout definido es vertical.

VaadinClickMe

Para llevar este ejemplo tan sencillo un pequeño paso más allá voy a hacer que el mismo botón sirva tanto para mostrar como para ocultar el mensaje “Hola Mundo!!!”. Para ello bastará con jugar con la visibilidad del Label que contiene el mensaje y con la propiedad Caption del botón como se puede ver en el código:

public class AprendiendoVaadinUI extends UI {

	private final String BTN_CAPTION_MOSTRAR_MENSAJE = "Mostrar mensaje";
	private final String BTN_CAPTION_OCULTAR_MENSAJE = "Ocultar mensaje";
	private final String MENSAJE = "Hola Mundo!!!";

	@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout layout = new VerticalLayout();
		final Label mensaje = new Label(MENSAJE);
		final Button button = new Button(BTN_CAPTION_MOSTRAR_MENSAJE);

		layout.setMargin(true);
		setContent(layout);

		layout.addComponent(button);
		mensaje.setVisible(false);
		layout.addComponent(mensaje);

		button.addClickListener(new Button.ClickListener() {
			public void buttonClick(ClickEvent event) {
				mensaje.setVisible(!mensaje.isVisible());
				if (mensaje.isVisible())
					button.setCaption(BTN_CAPTION_OCULTAR_MENSAJE);
				else
					button.setCaption(BTN_CAPTION_MOSTRAR_MENSAJE);
			}
		});
	}
}

Como primer acercamiento no está mal. De una forma muy sencilla y rápida he conseguido algo que de otra forma seguramente me habría costado más, y usando sólo Java. ¿Alguien da más?

Puedes descargar el código fuente de este ejemplo aquí.

Anuncios

7 pensamientos en “Aprendiendo Vaadin #1: Hola Mundo

  1. Hola David. Soy un colega novato y quiero darte la Enhorabuena por tu blog. Pese a su juventud (sin contar las entradas que veo que tienes anterioriores a 2013) ya se ha convertido en uno de mis blogs de referencia.

    Programo regularmente en GWT y ZK y desde hace tiempo tenía en la lista de asuntos pendientes aprender Vaadin. Así que seguiré tu serie de artículos con especial interés. Un saludo.

  2. Hola, leo regularmente tu blog, a raiz de tus artículos sobre carreras profesionales, te doy la enhorabuena. Yo trabajo habitualmente con Zk Framework, lo has probado? me interesaría una comparación entre Vaadin y Zk Framework si es que es un si 😉

    • Hola Iván, gracias por tus comentarios.
      No conozco Zk Framework, aunque sí te digo que lo primero que no me ha gustado de Zk es que si bien no necesitas saber JavaScript o AJAX, resulta que tienes que aprender ZUL.
      Lo que me gusta de Vaadin es que es 100% Java, ni Javascript, ni AJAX, ni ZUL ni nada más.
      De todas formas, Zk no tiene mala pinta y lo de ZUL puede ser un mal menor. Me lo apunto para mirármelo.
      Saludos!

      • Yo Vaadin no lo he probado, pero si que he probado durante tres años Echo Framework, que era 100% puro java. El tema del zul no es muy importante, ya que es una especie de html básico. De hecho creo que es un gran punto, ya que da mucha versatilidad al desarrollo. Te aconsejo que le des una vuelta, a ver si te gusta 😉

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s