Vaadin basic example

After the short introduction, server-side RIA framework, we are going to make a our first easy example with Vaadin. As we mentioned in the previous post Vaadin is perfectly integrated with Maven 2. There is a specific Maven 2 archetype for Vaadin which can be found in here Using Vaadin with Maven.

 

Ejemplo básico con Vaadin y Maven

Después de la breve introducción que se dio en server-side RIA framework, vamos a realizar un breve ejemplo con Vaadin que sirva de primera toma de contacto. Como ya contamos en el post anterior Vaadin queda perfectamente integrado con Maven 2. Es más tenemos un arquetipo específico en Maven 2 para Vaadin que podemos encontrar en Using Vaadin with Maven.

 

Vaadin , server-side RIA framework

Today we are going to talk about Vaadin, a server-side RIA framework that makes easy the UI development in our web applications. As the official Vaadin homepage says, Vaadin is:

Vaadin is a server-side AJAX web application development framework that enables developers to build high-quality user interfaces with Java. It provides a library of ready-to-use user interface components and a clean framework for creating your own components. The focus is on ease-of-use, re-usability, extensibility, and meeting the requirements of large enterprise applications. Vaadin has been used in production since 2001 and it has proven to be suitable for building demanding business applications.

 

Vaadin , server-side RIA framework

Hoy vamos a hablar acerca Vaadin, un framework RIA que facilita el desarrollo de la parte de interfaz de usuario en aplicaciones web. Según la página oficial del proyecto, Vaadin es:

Vaadin is a server-side AJAX web application development framework that enables developers to build high-quality user interfaces with Java. It provides a library of ready-to-use user interface components and a clean framework for creating your own components. The focus is on ease-of-use, re-usability, extensibility, and meeting the requirements of large enterprise applications. Vaadin has been used in production since 2001 and it has proven to be suitable for building demanding business applications.

 

Interfaz de usuario y eventos en GWT

Visit my new website http://java4developers.com

Como veíamos en el post ejemplo básico con GWT vamos a continuar con la creación de una interfaz de usuario sencilla y con la gestión de los eventos en un cliente GWT que se hace de ella. Para este post vamos a seguir el tutorial básico de la página de GWT.

 

Ejemplo básico con GWT

Tras la breve introducción del post anterior, vamos a hacer un ejemplo básico con GWT. Para ello lo primero que vamos a hacer es instalar el plugin que tiene GWT para Eclipse. Obviamente podemos usar GWT sin necesidad de Eclipse. Para la compilación de una aplicación GWT se utiliza Ant. Podríamos desde línea de comandos compilar y lanzar nuestra aplicación, pero pienso que el uso de Eclipse facilita bastante las cosas. Si quieres echar un vistazo a cómo comenzar, visita la sección de getting started de GWT. Después de instalar el plugin vamos a hacer lo siguiente.

1. Estudiar los conceptos básicos (ficheros en una aplicación GWT, modos de ejecucción, …) a partir de un proyecto GWT de Google Code.
2. Crear una interfaz de usuario para nuestra aplicación GWT.
3. Gestionar los eventos en el cliente.

 

Introducción a GWT (Google Web Toolkit)

Google Web Toolkit, conocido como GWT, es un framework de desarrollo de aplicaciones Ajax. El desarrollador puede escribir en código Java la funcionalidad de nuestra aplicación y será GWT el que se encargue de compilar estas clases en código Javascript. Ventajas que tiene utilizar GWT como framework de desarrollo:

• Permite a los desarrolladores crear aplicaciones Javascript con interfaces complejas a partir de código Java.
• Facilidad a la hora de depurar el correcto funcionamiento del código. Es más fácil depurar en Java que en Javascript.
•  El compilador de GWT se encarga de optimizar las clases Java para crear el mínimo de Javascript necesario para correr nuestra aplicación.
•  Asimismo el compilador de GWT se va a encargar de crear código Javascript optimizado para los distintos navegadores. Si alguna vez has desarrollado directamente sobre Javascript comprenderás perfectamente lo que significa que este punto. No se necesita escribir distinto código Javascript en función del navegador web utilizado.

Para ver una introducción más detallada sobre GWT recomiendo leer la sección de aspectos generales del producto. Viene con un video explicativo que recomiendo ver.