Anterior

Siguiente

Capítulo 3. Arquitectura

Este capítulo proporciona una introducción a la arquitectura de Vaadin en un nivel un tanto técnico.

3.1. Información General

En el Capítulo 1, Introducción, dimos una breve introducción a la arquitectura general de Vaadin. Ahora vamos a profundizar en ella. La Figura 3.1, "Arquitectura de Vaadin" proporciona una ilustración básica de la arquitectura.

Figura 3.1. Arquitectura de Vaadin

Vaadin consiste de una API de aplicación web, una multitud de componentes de interfaz de usuario, temas para controlar la apariencia, y un modelo de datos que le permite vincular los componentes de interfaz de usuario directamente a los datos. Detrás de las cortinas también se emplea un adaptador de terminal para recibir las peticiones de los navegadores web y hacer las respuestas renderizando las páginas.

Una aplicación que utiliza Vaadin se ejecuta como un servlet en un servidor web de Java, sirviendo peticiones HTTP. El adaptador de terminal recibe solicitudes de los clientes a través del servidor web de la API de Java Servlet, y los interpreta para los eventos de usuario para una determinada sesión en particular. Las sesiones son rastreadas utilizando cookies. Los eventos están asociados con los componentes de interfaz de usuario (UI) y entregados a la aplicación, el cual es manejado con oyentes (listeners). Si la lógica de la aplicación realiza cambios en los componentes de interfaz de usuario del lado del servidor, el adaptador de terminal los renderiza en el navegador web generando una respuesta. El motor del lado del cliente que se ejecuta en el navegador recibe las respuestas y los utiliza para hacer los cambios necesarios en la página en el navegador.

El nivel superior de una aplicación de usuario consiste en una clase application que hereda de com.vaadin.Application. Esto crea los componentes de interfaz de usuario que necesita (véase más adelante), recibe los eventos relacionados con ellos, y hace los cambios necesarios en los componentes. Para obtener información detallada sobre heredamiento de Application, vea el Capítulo 4, Escribir una Aplicación Web.

Las partes más importantes de la arquitectura y su función son las siguientes:

• Componentes de Interfaz de Usuario
  Los componentes de la interfaz de usuario se componen de los componentes de interfaz de usuario que son creados y presentados por la aplicación. Cada componente del lado del servidor tiene una contraparte del lado del cliente, con la cual el usuario interactúa. Los componentes del lado del servidor pueden serializar la conexión del cliente con un adaptador de terminal. Los componentes del lado del cliente, a su vez, pueden serializar la interacción del usuario de nuevo a la aplicación, que es recibida en los componentes del lado del servidor como eventos. Los componentes transmiten estos eventos a la lógica de la aplicación. La mayoría de los componentes están vinculados a un origen de datos (véase más adelante). Para una descripción completa de la arquitectura de los componentes de interfaz de usuario, véase el Capítulo 5, Componentes de Interface de Usuario.
  
  Motor de Lado del Cliente
  El Motor del Lado del Cliente de Vaadin gestiona la renderización en el navegador web a través de Google Web Toolkit (GWT). Este comunica la interacción del usuario y los cambios de la interfaz de usuario con el Adaptador de Terminal del lado del servidor usando el Lenguaje de Definición de Interfaz de Usuario (UIDL), un lenguaje basado en JSON. Las comunicaciones se realizan mediante HTTP asincrónico o peticiones HTTPS. Vea la Sección 3.4. "Motor del Lado del Cliente".
  
  Adaptador de Terminal
  Los componentes de interfaz de usuario no se renderizan ellos mismos directamente como una página web, pero usan un Adaptador de Terminal. Esta capa de abstracción permite a los usuarios utilizar aplicaciones Vaadin con prácticamente cualquier navegador web. Las Versiones 3 y 4 de IT Mill Toolkit soporaba HTML y un simple renderizado basado en AJAX, mientras que la versión 5 de Vaadin soporta renderizaciones avanzadas basadas en AJAX utilizando Google Web Toolkit (GWT). Se podría imaginar alguna otra tecnología de navegador, ni siquiera basada en HTML, y usted - o en realidad - podríamos hacerlo trabajar sólo escribiendo un nuevo adaptador. Su aplicación todavía vería la API de Vaadin. Para permitir este tipo de abstracción, los componentes de interfaz de usuario comunican sus cambios al Adaptador de Terminal, que los renderiza para el navegador del usuario. Cuando el usuario hace algo en la página web, los eventos son comunicados al adaptador de terminal (a través del servidor web) como peticiones asincrónicas AJAX. El adaptador de terminal entrega los eventos del usuario a los componentes de interfaz de usuario, que se los entrega a la lógica de la aplicación de interfaz de usuario.
  
  Temas (Estilos)
  La interfaz de usuario se separa entre la presentación y la lógica. Mientra que la lógica de interfaz de usuario se maneja como código de Java, la presentación se define en temas como CSS. Vaadin proporciona unos temas por defecto. Los temas del usuario pueden, además de las hojas de estilo, plantillas HTML que definen diseños personalizados y otros recursos, tales como imágenes. Los temas se discuten en detalle en el Capítulo 8, Temas.
  
  UIDL
  El Adaptador de Terminal dibuja la interfaz de usuario a la página web y cualquier cambio en él usando un especial Lenguaje de Definición de Interfaz de Usuario (UIDL). Las comunicaciones UIDL se realizan mediante JSON (JavaScript Object Notation), que es un formato de intercambio de datos ligero que es especialmente eficaz para interconectar con el código AJAX basadas en JavaScript en el navegador. Consulte la Sección 3.2.3, "JSON" y el Apéndice A, Lenguaje de Definición de Interfaz de Usuario (UIDL) para mas detalles.
  
  Eventos
  La interacción del usuario con los componentes de interfaz de usuario crea eventos, que primero son procesados del lado del cliente con JavaScript y luego son pasados todo el camino a través del servidor HTTP, el adaptador de terminal, y las capas de los componentes de usuario a la aplicación. Vea la Sección 3.5, "Eventos y Oyentes".
  
  Modelo de Datos
  Además del modelo de interfaz de usuario, Vaadin proporciona un modelo de datos para interconectar los datos presentados en los componentes de interfaz de usuario. Usando el modelo de datos, los componentes de interfaz de usuario pueden actualizar los datos de la aplicación directamente, sin necesidad de ningún código de control. Todos los componentes de interfaz de usuario utilizan este modelo de datos internamente, pero pueden ser vinculados a una fuente de datos separada. Por ejemplo, puede vincular un componente table a una respuesta de las consultas SQL. Para una descripción completa del Modelo de Datos de Vaadin, por favor, consulte el Capítulo 9, Vincular Componentes a Datos.

Anterior 2.5. Crear un Proyecto con Maven

Arriba Inicio

Siguiente 3.2. Antecedentes Tecnológicos

Anterior

Siguiente

2.5. Crear un Proyecto con Maven

La librería principal de Vaadin y todo los complementos Vaadin están disponibles a través de un repositorio Maven y por lo tanto puede utilizarse fácilmente con Apache Maven. Puede utilizar Maven con un interfaz-grafica de Eclipse o NetBeans, o utilizando la línea de comandos como se describe en esta sección.

Puede crear un nuevo proyecto Maven con el siguiente comando:

$ mvn archetype:generate
    -DarchetypeGroupId=com.vaadin
    -DarchetypeArtifactId=vaadin-archetype-clean
    -DarchetypeVersion=LATEST
    -DgroupId=tu.compania -DartifactId=nombre-proyecto -Dversion=1.0 -Dpackaging=war

Los parámetros son los siguientes:

archetypeGroupId
El group ID del arquetipo es com.vaadin para arquetipos Vaadin.

archetypeArtifactId
El archetype ID. Vaadin es compatible actualmente con los siguientes arquetipos:

• vaadin-archetype-clean es un nuevo proyecto con un esqueleto barebone para una aplicación Vaadin regular. El archivo pom.xml incluye como-comentario las definiciones para los widgets adicionales.
• vaadin-archetype-widget es un esqueleto para un proyecto con widgets personalizados.
• vaadin-archetype-sample también es para el proyecto con widgets personalizados, pero el esqueleto incluye el ejemplo Color Picker utilizado en el Capítulo 11, Desarrollar Nuevos Componentes.
• vaadin-archetype-addon es para proyectos de complementos Vaadin. Este empaqueta el complemento para que pueda ser publicado en el Directorio Vaadin. El arquetipo es para complementos del lado del servidor y no incluye las definiciones necesarias para la construcción de un conjunto de widgets. Si su complemento incluye o requiere que no sean los widgets de la librería principal Vaadin, debe copiar las definiciones necesarias desde un POM de un proyecto vaadin-arquetipo-clean.
• vaadin-archetype-touchkit es para proyectos con Vaadin TouchKit, descrito en el Capítulo 19, Aplicaciones Mobiles con TouchKit. Tenga en cuenta que este arquetipo utiliza la versión con licencia AGPL de TouchKit, que exige que el proyecto también debe ser licenciado bajo la licencia AGPL.

archetypeVersion
Versión del arquetipo a usar. Este normalmente debería ser LATEST.

groupId
Este es utilizado para el nombre del paquete Java y normalmente debe ser su nombre de dominio invertido, tal como com.example.myproject. El group ID es utilizado también para el nombre del paquete fuente de Java de su proyecto, por lo que debe ser compatible con Java - sólo caracteres alfanuméricos y un subrayado.

artifactId
Identificador del artifact, este es, su proyecto. El identificador puede contener caracteres alfanuméricos, menos, y subrayado.

version
Número de la versión inicial de su aplicación. El número debe obedecer al formato de la numeración de la versión de Maven.

packaging
Como será empaquetado el proyecto. Normalmente este es un war.

La creación de un proyecto puede tardar un poco ya que Maven busca todas las dependencias. La estructura del proyecto creado se muestra en la Figura 2.8, "Un Nuevo Proyecto Vaadin con vaadin-archetype-clean".

Figura 2.8. Un Nuevo Proyecto Vaadin con vaadin-archetype-clean

Compilar y Ejecutar la Aplicación

Antes de que la aplicación pueda ser desplegada, debe ser compilada y empaquetada como un paquete WAR. Usted puede hacer esto con el goal package de la siguiente manera:

$ mvn package
La ubicación del paquete WAR resultante debe mostrarse en el comando de salida. Luego puede desplegarlo en su servidor de aplicaciones favorito.

La forma más fácil de ejecutar aplicaciones Vaadin con Maven es utilizar el servidor web ligero Jetty. Después de compilar el paquete, todo lo que necesita hacer es teclear:

$ mvn jetty:run
El goal especial arranca el servidor Jetty en el puerto 8080 y despliega la aplicación. Luego puede abrirlo en un navegador web en http://localhost:8080/nombre-proyecto.

Utilizar Complementos y Conjuntos de Widget Personalizados

Si utiliza complementos Vaadin que incluyen un conjunto de widgets o hace sus widgets personalizados, necesita habilitar la compilación de conjunto de widget en el POM. La configuración requerida se describe en la Sección 15.5, "Usar Complementos en un Proyecto Maven".

Anterior 2.4. Crear un Proyecto con Netbeans

Arriba Inicio

Siguiente Capítulo 3. Arquitectura

Anterior

Siguiente

2.4 Crear un Proyecto con NetBeans

Vaadin no tiene un plugin oficial para NetBeans en este momento, por lo que las tareas tienen que hacerse más manualmente que con Eclipse.

Tiene dos opciones para crear un proyecto Vaadin en NetBeans: como un proyecto de aplicación web regular o como un proyecto Maven. Abarcamos estas dos formas en las siguientes secciones.

2.4.1. Proyecto de Aplicación Web Regular

En esta sección se describe la manera básica de crear un proyecto de aplicación Vaadin en NetBeans. Este enfoque es útil si no desea utilizar Maven, pero requiere más trabajo manual.

1. Abra Archivo → Proyecto Nuevo....
2. Seleccione Java Web → Web Application y haga clic en Next.
3. Proporcione un nombre al proyecto, como miproyecto. Como el nombre del proyecto también se utiliza por defecto como la ruta de contexto, este debe contener sólo caracteres alfanuméricos, subrayado y signo menos. Haga clic en Siguiente.
4. Seleccione un servidor. La referencia de herramienta de programación recomienda Apache Tomcat, ya que muchas instrucciones en este libro se dan específicamente para Tomcat, pero cualquier otro servidor debería funcionar igual de bien. Haga clic en Siguiente.
5. Haga clic en Finish.

El proyecto es creado. Sin embargo, es un simple esqueleto para un proyecto web basado en una aplicación JSP. Para que sea un proyecto Vaadin adecuado, es necesario incluir la librería Vaadin, crear la clase application y definir el descriptor de despliegue web.xml.

2.4.2. Proyecto Maven desde un Arquetipo Vaadin

La creación de un proyecto Maven con el arquetipo Vaadin es más simple que un proyecto de aplicación web regular en NetBeans. Este crea un esqueleto de la aplicación, define el descriptor de despliegue web.xml, y también recupera automáticamente la librería más reciente de Vaadin.

1. Seleccione Archivo → Proyecto Nuevo....
2. Seleccione Maven → Project from Archetype y haga clic en Siguiente.
3. Seleccione un arquetipo desde un repositorio:
   
   
   • Si ha utilizado Vaadin con Maven antes, puede que ya tenga el arquetipo en el repositorio local - seleccione Archetypes from Local Repository.
   • Agregue un nuevo arquetipo haciendo clic en Add. Para Group Id, poner com.vaadin. Para Artifact Id, poner vaadin-archetype-clean para un proyecto normal, vaadin-archetype-widget para un proyecto widget GWT personalizado, o vaadin-archetype-sample para un esqueleto más avazado de application. Para Version, poner LATEST o especificar el número de la versión. A continuacion, haga clic en OK.
     
     Figura 2.6. Agregar un Nuevo Arquetipo en NetBeans
     
     
     A continuacion seleccione el Arquetipo personalizado - vaadin-archetype-clean (LATEST) desde el arbol de seleccion.
   Haga clic en Siguiente.
4. En el paso Nombre y ubicación, introduzca el Nombre del Proyecto, el cual se recomienda que sea sólo carácteres alfabéticos en minúsculas, ya que también es utilizado como una sugerencia para el nombre del paquete Java del proyecto. Modifique los otros parámetros de su proyecto y haga clic en Terminar.
   
   Figura 2.6. Agregar un Nuevo Arquetipo en NetBeans
   
   

La creación del proyecto puede tomar un tiempo ya que Maven carga todas las dependencias necesarias. Una vez creado, se puede ejecutar haciendo clic derecho sobre el proyecto en la vista Proyectos y seleccionando Ejecutar. En la ventana Select deployment server que se abre, seleccione Apache Tomcat y haga clic en Aceptar. Si todo va bien, NetBeans inicia el servidor y lanza el navegador por defecto para mostrar la aplicación web.

Anterior 2.3. Tu Primera Proyecto con Vaadin

Arriba Inicio

Siguiente 2.5. Crear un Proyecto con Maven

Anterior

Siguiente

2.3. Tu Primer Proyecto con Vaadin

Esta sección proporciona instrucciones para la creación de un nuevo proyecto de Eclipse utilizando el plugin Vaadin. La tarea incluirá los siguientes pasos:

1. Cree un nuevo proyecto
2. Escriba el código de fuente
3. Configure y arranque Tomcat (o algún otro servidor web)
4. Abra un navegador web para poder usar la aplicación web

También mostramos cómo puede depurar la aplicación en modo de depuración en Eclipse.

En este tutorial asume que ya tiene instalado el Plugin Vaadin y configurado su entorno de desarrollo, como se indicó en la Sección 2.2.2, "Instalar el Paquete JAR" y la Sección 2.1, "Configurar el Entorno de Desarrollo".

2.3.1. Crear el Proyecto

Vamos a crear el proyecto de la primera aplicación con las herramientas instaladas en la sección anterior. En primer lugar, inicie Eclipse y siga los siguientes pasos:

1. Empiece creando un nuevo proyecto seleccionando en el menú File → New → Project....
2. En la ventana New Project que se abre, seleccione Web → Vaadin Project y haga clic en Next.
   
3. En el paso Vaadin Project, es necesario establecer los ajustes básicos del proyecto web. Tiene que dar por lo menos el project name y el runtime, los valores por defecto deberían estar bien para los otros ajustes.
   
   
   Project name
   Dé un nombre al proyecto. El nombre debe ser un identificador válido utilizable multiplataforma como un nombre de archivo y dentro de una URL, así que utilice sólo caracteres alfanuméricos en minúsculas, subrayado y el signo menos es lo recomendado.
   
   Use default
   Define el directorio en el cual se crea el proyecto. Normalmente, debe dejarlo como está. Puede que tenga que establecer el directorio, por ejemplo, si está creando un proyecto de Eclipse en la parte superior de un árbol de fuentes con control de versiones.
   
   Target runtime
   Define el servidor de aplicaciones a utilizar para desplegar la aplicación. El servidor que tiene instalado, por ejemplo Apache Tomcat, se debe seleccionar de forma automática. Si no, haga clic en New para configurar un nuevo servidor en Eclipse.
   
   Configuration
   Seleccione la configuración a utilizar, que normalmente debería utilizar la configuración predeterminada para el servidor de aplicaciones. Si tiene que modificar aspectos del proyecto, haga clic en Modify.
   
   Deployment configuration
   Esta configuración define el entorno en que la aplicación se desplegará, para generar el diseño apropiado del directorio del proyecto y los archivos de configuración. Las opciones son:
   
   
   • Servlet (default)
   • Google App Engine Servlet
   • Generic Portlet (Portlet 2.0)
   • Old Portlet (Portlet 1.0)
   
   Los pasos adicionales en el asistente New Project dependen de la configuración de despliegue seleccionada; los pasos enumerados en esta sección son para la configuración del servlet por defecto. Vea la Sección 12.8, "Integración con el Motor de Google App" y el Capítulo 13, Integracion con Portal para obtener más información sobre el uso de Vaadin en ambientes alternativos.
   
   Vaadin version
   Seleccione la versión Vaadin a utilizar. La lista desplegable muestra, de forma predeterminada, la última versión disponible de Vaadin. Si desea utilizar otra versión, haga clic en Download. El diálogo que se abre lista todas las versiones oficiales de Vaadin.
   
   Si deseas utilizar una versión preliminar o una versión nightly builds, seleccione Show pre-release versions and nightly builds. Seleccione una versión y haga clic en Ok para descargarlo. Aparecerá como una opción en la lista desplegable.
   
   Si quiere cambiar el proyecto para utilizar otra versión de Vaadin, por ejemplo, para actualizarlo a uno más nuevo, puedes ir a la configuración del proyecto y descarga y seleccionar otra versión.
   
   Aquí puede hacer clic en Finish para utilizar los valores predeterminados para el resto de la configuración, o hacer clic en Next.


4. Los ajustes en el paso Web Module definen los ajustes básicos relacionados con el servlet y la estructura del proyecto de la aplicación web. Todos los ajustes son precargados, y normalmente debes aceptarlos como son.
   
   
   Context Root
   El context root (de la aplicación) identifica la aplicación en la dirección URL utilizada para acceder a ella. Por ejemplo, si el servidor se ejecuta en el contexto apps y la aplicación tiene el contexto miproyecto, la dirección sería http://example.com/app/url. El asistente le sugerirá miproyecto para el nombre de contexto.
   
   Content Directory
   El directorio que contiene todo el contenido que debe incluirse en el servlet y servido por el servidor web. El directorio es relativo al directorio raíz del proyecto.
   
   Java Source Directory
   El directorio fuente por defecto que contiene las fuentes de la aplicación. Se sugiere el directorio src; otra convención común en aplicaciones web es utilizar WebContent/WEB-INF/src, en cuyo caso las fuentes se incluyen en el servlet (pero no servidas en peticiones HTTP).
   
   Generate deployment descriptor
   El asistente debería genera el descriptor de despliegue web.xml necesario para ejecutar el servlet en el directorio WebContent/WEB-INF. Muy recomendado. Consulte la Sección 4.8.3, "El Descriptor de Despliegue web.xml" para obtener más detalles.
   
   Esta será la sub-ruta en la URL, por ejemplo http://localhost:8080/miproyecto. El valor predeterminado para la raíz de la aplicación será / (root).
   
   Usted puede simplemente aceptar los valores predeterminados y hacer clic en Next.
5. Los pasos de la página Vaadin project tiene varios parámetros específicos de la aplicación Vaadin. Si está trabajando Vaadin por primera vez, no tiene por qué cambiar nada. Puede establecer la mayor parte de los ajustes más tarde, a excepción de la creación de la configuración del portlet.
   
   Create project template
   Hace que el asistente cree una parte de la clase application.
   
   Application Name
   Nombre de la aplicación que aparece en el título de la ventana del navegador.
   
   Base package name
   Nombre del paquete Java bajo el cual la clase application debe ser colocada.
   
   Application class name
   Nombre de la clase application Vaadin.
   
   Create portlet configuration
   Cuando se selecciona esta opción, el asistente creará los archivos necesarios para ejecutar la aplicación en un portal. Vea el Capítulo 13, Integración con Portal para obtener más información sobre los portlets.
   
   Por último, haga clic en Finish para crear el proyecto.


6. Eclipse le puede pedir que cambie a la perspectiva J2EE. Un Proyecto Web Dinámico utiliza un servidor web externo y la perspectiva J2EE proporciona herramientas para controlar el servidor y gestionar el despliegue de la aplicación. Haga clic en Yes.

2.3.1. Explorar el Proyecto

Después de que el asistente New Project existe, este ha hecho todo el trabajo por nosotros: las librerías Vaadin son instalada en el directorio WebContent/WEB-INF/lib, un esqueleto de la clase application se ha escrito en el directorio src, y WebContent/WEB-INF/web.xml ya contiene un descriptor de despliegue.

Figura 2.3. Un Nuevo Proyecto Web Dinámico

La clase application creada por el plugin contiene el siguiente código:

package com.example.miproyecto;

import com.vaadin.Application;
import com.vaadin.ui.*;
public class MiproyectoApplication extends Application
{
   @Override 
   public void init() {
      Window mainWindow = 
         new Window("Myproject Application");
      Label label = new Label("Hello Vaadin user");
      mainWindow.addComponent(label);
      setMainWindow(mainWindow);
 }
}

Vamos a agregar un botón a la aplicación para que sea un poco más interesante. El metodo init() resultante podría ser algo como:

public void init() {
   final Window mainWindow = 
      new Window("Aplicacion Mi Proyecto");

   Label label = new Label("Hola usuario Vaadin");
   mainWindow.addComponent(label);

   mainWindow.addComponent(
      new Button("Qué hora es?",
         new Button.ClickListener() {
         public void buttonClick(ClickEvent event) {
            mainWindow.showNotification(
               "La hora es " + new Date());
         }
      }));
 
 setMainWindow(mainWindow);
}

El descriptor de despliegue WebContent/WEB-INF/web.xml define el servlet del framework Vaadin, la clase application y el servlet mapping:

Ejemplo 2.1. El Descriptor de Despliegue web.xml para su proyecto

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns="http://java.sun.com/xml/ns/javaee" 
  xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
  id="WebApp_ID" version="2.5">

  <display-name>myproject</display-name>

  <context-param>
   <description>Vaadin production mode</description>
   <param-name>productionMode</param-name>
   <param-value>false</param-value>
  </context-param>

  <servlet>
   <servlet-name>Aplicación Mi Proyecto</servlet-name>
   <servlet-class>
     com.vaadin.terminal.gwt.server.ApplicationServlet
   </servlet-class>
   <init-param>
      <description>Vaadin application class to start</description>
      <param-name>application</param-name>
      <param-value>
        com.example.miproyecto.MiproyectoApplication
      </param-value>
 </init-param>
 </servlet>
 
 <servlet-mapping>
 <servlet-name>Aplicacion Mi Proyecto</servlet-name>
 <url-pattern>/*</url-pattern>
 </servlet-mapping>
</web-app>

Para un tratamiento más detallado del archivo web.xml, Vea la Sección 4.8.3, "El Descriptor de Despliegue web.xml".

2.3.3. Configurar e Iniciar el Servidor Web

Eclipse IDE for Java EE Developers tiene instalado el paquete Web Standard Tools, que soporta el control de varios servidores web y el despliegue automático de contenidos web en el servidor cuando se realizan cambios a un proyecto.

Asegúrese de que Tomcat fue instalado con permisos de usuario. La configuración del servidor web en Eclipse fallará si el usuario no tiene permisos de escritura en los directorios de configuración y despliegue en el directorio de instalación de Tomcat.

Siga los siguientes pasos.

1. Cambie a la pestaña Servers en el panel inferior en Eclipse. La lista de servidores debería estar vacía después de que Eclipse es instalado. Haga clic derecho en el área vacía en el panel y seleccione New → Server.
   
2. Seleccione Apache → Tomcat v7.0 Server y establezca Server's host name a localhost, que debería ser el valor predeterminado. Si sólo tiene un Tomcat instalado, Server runtime tiene sólo una opción. Haga clic en Next.
   
3. Añada su proyecto al servidor seleccionándolo en la parte izquierda y haciendo clic en Add para agregarlo a los proyectos configurados en la parte derecha. Haga clic en Finish.
   
4. El servidor y el proyecto se han instalado ahora en Eclipse y se muestran en la pestaña Servers. Para iniciar el servidor, haga clic derecho en el servidor y seleccione Debug. Para iniciar el servidor en modo no-depuración, seleccione Start.
   
5. El servidor se inicia y el directorio WebContent del proyecto es publicado en el servidor en http://localhost:8080/miproyecto/.
   

2.3.4. Ejecutar y Depurar

Iniciar su aplicación es tan fácil como seleccionar miproyecto desde el Project Explorer y luego en Run → Debug As → Debug on Server. Eclipse entonces, abre la aplicación en el navegador web incorporado.

Figura 2.4. Ejecutar una Aplicación Vaadin

Puede insertar puntos de interrupción en el código Java, haciendo doble clic en la barra de lado izquierdo de la ventana de código fuentes. Por ejemplo, si inserta un punto de interrupción en el método buttonClick() y haga clic en el botón Que hora es?, Eclipse le pedirá que cambie a la perspectiva Debug. La perspectiva Debug aparecerá donde se detuvo la ejecución en el punto de interrupción. Puede examinar y cambiar el estado de la aplicación. Para continuar con la ejecución, seleccione Resume en el menú Run.

Figura 2.4. Depurar una Aplicación Vaadin

El procedimiento descrito anteriormente permite la depuración de la aplicación del lado del servidor. Para obtener más información sobre la depuración de los widgets del lado del cliente, Vea la Sección 11.8.6, "El Modo de Desarrollo GWT".

Reiniciar la Sesión de la Aplicación

Cuando abre la dirección URL de la aplicación, se crea una nueva sesión de usuario. La sesión se conserva incluso si vuelve a cargar la página. Además, ya que a Eclipse le gusta hacer el despliegue en caliente para Tomcat, y a Tomcat le gusta persistir sesiones en el cierre del servidor, usted puede experimentar un problema y es que la aplicación no vuelve a su estado inicial después de modificar el código o incluso reiniciar el servidor.

Añadiendo el parámetro ?restartApplication en la URL le indica al servlet Vaadin que cree una nueva instancia de Application cuando se recarge la página.

Anterior 2.2. Instalar Vaadin

Arriba Inicio

Siguiente 2.4. Crear un Proyecto con NetBeans

Anterior

Siguiente

2.2. Instalar Vaadin

Esta sección proporciona instrucciones para instalar Vaadin in su entorno de desarrollo. Tiene dos opciones básicas para instalar:

1. Si utiliza Eclipse, recomendamos que instale el Plugin de Vaadin para Eclipse, tal como se describe en la Sección 2.2.1, "El Plugin Vaadin para Eclipse"
2. De lo contrario, descarge e instale el paquete JAR, tal como se describe en la Sección 2.2.2, "Instalar el Paquete JAR".

Estas opciones son explicadas en detalle en las secciones siguientes.

2.2.1. El Plugin Vaadin para Eclipse

Si está utilizando el IDE Eclipse, utilizar el plugin de Vaadin debería ayudarle mucho. El plugin incluye:

• Una integración del plugin con los asistentes para la creación de nuevos proyectos Vaadin basados en temas y widgets del lado del cliente y conjuntos de widgets.
• Un editor visual para la edición de componentes personalizados compuesto de una interfaz de usuario en modo WYSIWYG. Con el soporte completo ida y vuelta desde el código fuente para el modelo visual y detrás, el editor se integra perfectamente con su proceso de desarrollo.
• Una versión del Libro de Vaadin que puede ver en el sistema de Ayuda de Eclipse.

Puede instalar el plugin de la siguiente manera:

1. Inicie Eclipse.
2. Selecione Help → Software Updates....
3. Selecione la pestaña Available Software.
4. Añada el sitio de actualización del plugin de Vaadin haciendo clic en Add Site....
   
   Escriba la URL del Sitio de Actualización de Vaadin: http://vaadin.com/eclipse y haga clic en OK. El sitio Vaadin debería aparecer ahora en la ventana Software Updates.
5. Seleccione todos los plugins Vaadin en el árbol.
   
   Por último, haga clic en Install.

Las instrucciones de instalación detalladas y actualizadas para el plugin de Eclipse se pueden encontrar en http://vaadin.com/eclipse.

Actualizar el Plugin Vaadin
Si tiene habilitadas las actualizaciones automáticas en Eclipse (véa Window → Preferences → Install/Update → Automatic Updates), el plugin Vaadin se actualizará de forma automática junto con otros plugins. De lo contrario, puedes actualizar el plugin Vaadin (realmente hay varios plugins) manualmente de la siguiente manera:

1. Seleccione Help → Software Updates..., se abrirá la ventana Software Updates and Add-ons.
2. Seleccione la pestaña Software Updates and Add-ons.
3. Si desea actualizar sólo los plugins Vaadin, selecciónelos en la lista haciendo clic en los plugins y manteniendo pulsada la tecla Ctrl para todos excepto el primero.
   
4. Haga clic en Update.

Observe que la actualización del plugin de Vaadin solo actualiza el plugin y no la librería Vaadin, que es el proyecto específico. Vea a continuación las instrucciones para actualizar la librería.

Actualizar la Librería Vaadin
La actualización del plugin Vaadin no actualiza la librería Vaadin. La librería es para proyectos específicos, como una versión diferente puede ser requerido para diferentes proyectos, por lo que tiene que actualizarlo por separado para cada proyecto. Para cambiar la librería a una versión más nueva (o algún otro), haga lo siguiente:

1. Seleccione el proyecto en Project Explorer y seleccione Project → Preferences o presione Alt+Enter.
2. En la ventana project preferences que se abre, seleccione Vaadin → Vaadin Version.
3. Si la versión que desea utilizar no está incluida en la lista desplegable Vaadin version, haga clic en Download para abrir la ventana de descarga.
   
   
   Si desea utilizar una versión en desarrollo, seleccione Show pre-release versions and nightly builds. Seleccione la versión que desea descargar y de clic en OK.
4. Seleccione la versión que desee utilizar en la lista desplegable Vaadin version y haga clic en Apply.

Puede observar que la nueva librería aparece en la carpeta WebContent/WEB-INF/lib.

2.2.2. Instalar el Paquete JAR

Puede instalar el paquete de instalación Vaadin en unos sencillos pasos:

1. Descargue el paquete de instalación Vaadin más reciente desde la página de descarga en http://vaadin.com/download/.
2. Coloque el JAR en la carpeta de librería web WEB-APP/lib del proyecto.

La ubicación de la carpeta WEB-APP/lib depende de la organización del proyecto.

• En los proyectos de Eclipse: WebContent/WEB-INF/lib.
• En los proyectos de Maven: src/main/webapp/WEB-INF/lib.

Anterior Capítulo 2. Primeros Pasos con Vaadin

Arriba Inicio

Siguiente 2.3. Tu Primer Proyecto con Vaadin

Anterior

Siguiente

Capítulo 2. Primeros Pasos con Vaadin

Este capítulo proporciona instrucciones prácticas para la instalación del conjunto de herramientas de programación recomendadas, o bien sea el Plugin Vaadin para Eclipse o, si usted utiliza otro o ningún IDE en lo absoluto, el JAR de Vaadin.

2.1. Configurar el Entorno de Desarrollo

Esta sección proporciona una guía paso a paso para configurar un entorno de desarrollo. Vaadin soporta una amplia variedad de herramientas, para que pueda utilizar cualquier IDE para escribir código, para ver los resultados en la mayoría de los navegadores web, cualquier sistema operativo o procesador con el soporte de la plataforma Java 1.5, y casi cualquier servidor web de Java para desplegar la aplicación.

En este ejemplo, usamos las siguientes herramientas de programación:

• Windows XP, Linux, or Mac OS X
• Sun Java 2 Standard Edition 6.0 (es requerido Java 1.5 o superior)
• Eclipse IDE for Java EE Developers
• Apache Tomcat 7.0 (Core) o superior.
• El navegador Mozilla Firefox
• Herramienta de depuración Firebug (opcional)
• Vaadin Framework

La anterior referencia de herramientas de programación es una buena selección de herramientas, pero puede utilizar casi cualquier herramienta con la cual se sienta cómodo.

Figura 2.1. Desarrollo de Procesos y Herramientas de Programación

La Figura 2.1, "Desarrollo de Procesos y Herramientas de Programación" ilustra el entorno de desarrollo y de proceso. Desarrolla tu aplicación como un proyecto de Eclipse. El proyecto debe incluir, además de su código fuente, la Librería Vaadin. También puede incluir sus temas específicos del proyecto.

Debe compilar y desplegar un proyecto en un contenedor web antes de poder utilizarlo. Puede implementar un proyecto a través de la Plataforma de Herramientas Web de Eclipse, que permiten la implementación automática de las aplicaciones web de Eclipse. También puede implementar un proyecto de forma manual, creando un archivo de aplicación web (WAR) y desplegándolo a través de la interfaz de los contenedores web.

2.1.1. Instalar Java SDK

Java SDK es requerido por Vaadin y también por el IDE Eclipse. Vaadin es compatible con Java 1.5 y ediciones posteriores.

Windows

1. Descargue Sun Java 2 Standard Edition 6.0 desde http://java.sun.com/javase/downloads/index.jsp
2. Instale el Java SDK ejecutando el instalador. Las opciones por defecto están bien.

Linux / UNIX

1. Descargue Sun Java 2 Standard Edition 6.0 desde http://java.sun.com/javase/downloads/index.jsp
2. Descomprímalo en un directorio base adecuado, como /opt. Por ejemplo, para Java SDK, escriba (ya sea root o con sudo en Linux):
   
   # cd /opt # sh (path-to-installation-package)/jdk-6u1-linux-i586.bin y siga las instrucciones del instalador.

2.1.2. Instalar el IDE Eclipse

Windows
Eclipse está instalado ahora en C:\dev\eclipse y se puede iniciar desde allí (haciendo doble clic en eclipse.exe).

1. Descargue el IDE Eclipse for Java EE Developers (versión Ganymede) desde http://www.eclipse.org/downloads/
2. Descomprima el paquete del IDE Eclipse en un directorio adecuado. Es libre de seleccionar cualquier directorio y utilizar cualquier descompresor ZIP, pero en este ejemplo descomprimimos el archivo ZIP solo con un doble clic en él y seleccionando "Extraer todos los archivos" en Windows seleccionando la carpeta de trabajo. En nuestro ejemplo de instalación, utilizamos C:\dev como el directorio de destino.

Linux / UNIX
Tiene dos opciones básicas para instalar Eclipse en Linux y UNIX: puedes instalarlo con el administrador de paquetes de su sistema operativo o descargando e instalando los paquetes manualmente. Se recomienda el método de instalación manual, debido a que las últimas versiones de los paquetes disponibles en el repositorio de paquetes de Linux pueden ser incompatibles con los plugins de Eclipse que no se instalan mediante el administrador de paquetes.

1. Descargue el IDE Eclipse for Java EE Developers (versión Ganymede) desde http://www.eclipse.org/downloads/
2. Descomprima el paquete del IDE Eclipse en un directorio adecuado. Es importante asegurarse de que no haya una antigua instalación de Eclipse en el directorio destino. La instalación de una nueva versión encima de una antigua probablemente deja inutilizable Eclipse.
3. Eclipse normalmente se debe instalar como un usuario normal, ya que esto hace más fácil la instalación de plugins. Eclipse también almacena algunas configuraciones de usuario en el directorio de instalación. Para instalar el paquete, escriba:
   
   $ tar zxf (path-to-installation-package)/eclipse-jee-ganymede-SR2-linux-gtk.tar.gz
   Esto extraerá el paquete en un subdirectorio con el nombre de eclipse.
4. Es posible que desee agregar el directorio de instalación de Eclipse y el subdirectorio bin en el directorio de instalación de Java SDK a su sistema o PATH del usuario.

Una alternativa al procedimiento anterior es utilizar el sistema de administración de paquetes de su sistema operativo. Por ejemplo, en Ubuntu Linux, que incluye Sun Java SDK y Eclipse en su repositorio APT, puedes instalar los programas desde un administrador de paquetes GUI o desde la línea de comandos con un comando como:

$ sudo apt-get install sun-java6-jdk eclipse
Sin embargo, esto no se recomienda, porque el paquete de Eclipse no puede incluir necesariamente todas las herramientas de Java EE, la más importante es la Herramienta Web Estándar, y puede provocar incompatibilidades con algunos componentes que no se instalan con el sistema de administración de paquetes de su sistema operativo.

2.1.3. Instalar Apache Tomcat

Apache Tomcat es un servidor ligero para Java Web propicio tanto para desarrollo como para producción. Hay muchas maneras de instalarlo, pero aquí simplemente descomprimimos el paquete de instalación.

Apache Tomcat debería estar instalado con permisos de usuario. Durante el desarrollo, ejecutarás Eclipse o algún otro IDE con permisos de usuario, pero el despliegue de aplicaciones web en el servidor Tomcat que se instala en todo el sistema requiere permisos de administrador o root.

1. Descargue el paquete de instalación:
   
   Apache Tomcat 7.0 (Core Binary Distribution) desde http://tomcat.apache.org/


2. Descomprima el paquete de Apache Tomcat en un directorio de destino adecuado, tal como C:\dev (Windows) o /opt (Linux o Mac OS X). El directorio de inicio de Apache Tomcat será C:\dev\apache-tomcat-7.0.x ó /opt/apache-tomcat-7.0.x, respectivamente.

2.1.4. Firefox y Firebug

Vaadin soporta muchos navegadores web, y puedes utilizar cualquiera de ellos para el desarrollo. Si vas a crear un tema personalizado, diseños personalizados o nuevos componentes de interfaz de usuario, le recomendamos que utilice Firefox con Firebug para la depuración.

Si no tiene Firefox instalado, vaya a www.getfirefox.com y descargue y ejecute el instalador. En Linux, también puede instalarlo con el administrador de paquetes.

Opcional. Después de instalar Firefox, utilícelo para abrir http://www.getfirebug.com/. Siga las instrucciones en el sitio para instalar la última versión estable de Firebug disponible para el navegador. Puede que tenga que decirle a Firefox que permita la instalación haciendo clic en la barra de advertencia de color amarillo en la parte superior de la ventana del navegador.

Cuando Firebug está instalado, puedes activarlo en cualquier momento desde la esquina inferior derecha de la ventana de Firefox. La Figura 2.2, "Depurador Firebug para Firefox" muestra un ejemplo de como se ve Firebug.

Figura 2.2. Depurador Firebug para Firefox

Ahora que ha instalado el entorno de desarrollo, puedes proceder a la creación de su primera aplicación.

Anterior 1.5. Antecedentes

Arriba Inicio

Siguiente 2.2. Instalar Vaadin