El Libro de Vaadin: Version 6

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