Capítulo 4. Escribir una Aplicación Web
Este capítulo proporciona los fundamentos del desarrollo de aplicaciones web con Vaadin, concentrándose en los elementos básicos de una aplicación desde un punto de vista práctico.
Si eres un principiante en el desarrollo con AJAX, puede beneficiarse de la Sección 12.1, "Caracteristicas Especiales de Aplicaciones AJAX". En él se explica el rol de las páginas en aplicaciones web AJAX, y proporciona algunos modelos de diseño básico para las aplicaciones.
4.1. Información General
Una aplicación hecha con Vaadin se ejecuta como un Servlet Java en un contenedor de Servlets. El punto de entrada es la clase application, que necesita crear y administrar todos los componentes de la interfaz de usuario necesarios, incluyendo las ventanas. La interacción del usuario es manejada con oyentes de eventos, simplificado directamente por las vinculaciones de los componentes de interfaz de usuario a los datos. El aspecto visual es definido en temas como archivos CSS. Los iconos, otras imágenes, y archivos descargables son manejados como recursos, que pueden ser externos o servidos por el servidor de aplicaciones o por la propia aplicación.
Figura 4.1. Arquitectura de una Aplicación
La Figura 4.1, "Arquitectura de una Aplicación" arriba es la arquitectura básica de una aplicación hecha con el framework Vaadin, con todos los elementos principales, que se presentan a continuación y discutidos en detalle en este capítulo.
Primero que todo, una aplicación que utiliza Vaadin debe definir una clase application que hereda la clase abstracta
Además de actuar como el punto de entrada en el servlet, la clase
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. Sin embargo, 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
Lo más importante en la inicialización, es la creación de la ventana principal (véase más adelante), que cualquier aplicación tiene. Esto, y el despliegue de la aplicación como un Servlet Java en el contenedor de Servlets, tal como se describe en la Sección 4.8, "Configurar el Entorno de la Aplicación", son los requisitos mínimos para una aplicación.
A continuación se muestra una breve descripción de los elementos básicos de una aplicación:
Ventanas
Una aplicación siempre tiene una ventana principal, tal como se describe en la Sección 4.2, "Administrar la Ventana Principal". Una aplicación puede realmente tener varias ventanas de nivel de aplicación, todas unidas a la misma sesión de la aplicación, como se describe en la Sección 12.2, "Ventanas de Nivel de Aplicación". Las ventanas de nivel de aplicación pueden contener sub-ventanas no nativas, que son esencialmente los componentes de diseño flotante manejados dentro del navegador.
Componentes de Interfaz de Usuario
La interfaz de usuario se compone de los componentes de interfaz de usuario (UI) que son creados y presentados por la aplicación. La interacción del usuario con los componentes causa eventos (véase abajo) relacionados con el componente que la aplicación debe manejar. La mayor parte de los componentes están vinculados a algun dato utilizando el Modelo de Datos (véase abajo). Puede hacer sus propios componentes de interfaz de usuario ya sea a través de herencia o composición. Para una referencia completa de los componentes de interfaz de usuario, véase el Capítulo 5, Componentes de Interfaz de Usuario, para los componentes de diseño, vea el Capítulo 6, Admnistrar el Diseño, y para la composición de componentes, consulte la Sección 5.23 "Composición de Componentes con
Eventos y Oyentes
Los eventos y oyentes que manejan los eventos, son la base del manejo de la interacción del usuario en una aplicación. La Sección 3.5, "Eventos y Oyentes" aportó una introducción a los eventos y oyentes desde un punto de vista arquitectónico, mientras que la Sección 4.4, "Controlar Eventos con Oyentes", más adelante este capítulo tiene una visión más práctica.
Recursos
Una interfaz de usuario puede mostrar imágenes o enlaces a páginas web o documentos descargables. Estos son recursos, que pueden ser externos o proporcionados por el servidor web o la propia aplicación. La Sección 4.5, "Referencias Recursos" proporciona una visión práctica de los diferentes tipos de recursos.
Temas (Estilos)
La presentación y la lógica de la interfaz de usuario están separadas. Mientras que la lógica de la interfaz de usuario es controlada como código de Java, la presentación es definida en temas como CSS. Vaadin proporciona un tema predeterminado. Los temas definidos por el usuario pueden, ademas de las hojas de estilo, incluir plantillas HTML que definen diseños personalizados y otros recursos temáticos, tales como imágenes. Los temas son discutidos en detalle en el Capítulo 8, Temas, los diseños personalizados en la Sección 6.13, "Diseños Personalizados", y los recursos de temas en la Sección 4.5.4, "Recursos de Temas".
Vincular Datos
Los campos de los componentes son esencialmente vistas a datos, representados en un modelo de datos. Utilizando el modelo de datos, los componentes pueden actualizar los datos de la aplicación directamente, sin la necesidad de ningún código de control. Un modelo de componentes de un campo siempre está vinculado a una propiedad, un elemento, o un contenedor, dependiendo del tipo de campo. Si bien todos los componentes tienen un modelo de datos por defecto, que pueden vincularse a un origen de datos definido por el usuario. Por ejemplo, puede vincular un componente table a la respuesta de una consulta SQL. Para una descripción completa de vinculación de datos en Vaadin, por favor, consulte el Capítulo 9, "Vincular Componentes a Datos".
Este capítulo proporciona los fundamentos del desarrollo de aplicaciones web con Vaadin, concentrándose en los elementos básicos de una aplicación desde un punto de vista práctico.
Si eres un principiante en el desarrollo con AJAX, puede beneficiarse de la Sección 12.1, "Caracteristicas Especiales de Aplicaciones AJAX". En él se explica el rol de las páginas en aplicaciones web AJAX, y proporciona algunos modelos de diseño básico para las aplicaciones.
4.1. Información General
Una aplicación hecha con Vaadin se ejecuta como un Servlet Java en un contenedor de Servlets. El punto de entrada es la clase application, que necesita crear y administrar todos los componentes de la interfaz de usuario necesarios, incluyendo las ventanas. La interacción del usuario es manejada con oyentes de eventos, simplificado directamente por las vinculaciones de los componentes de interfaz de usuario a los datos. El aspecto visual es definido en temas como archivos CSS. Los iconos, otras imágenes, y archivos descargables son manejados como recursos, que pueden ser externos o servidos por el servidor de aplicaciones o por la propia aplicación.
Figura 4.1. Arquitectura de una Aplicación
La Figura 4.1, "Arquitectura de una Aplicación" arriba es la arquitectura básica de una aplicación hecha con el framework Vaadin, con todos los elementos principales, que se presentan a continuación y discutidos en detalle en este capítulo.
Primero que todo, una aplicación que utiliza Vaadin debe definir una clase application que hereda la clase abstracta
com.vaadin.Application. La clase application debe implementar el método init().
public class MiApp extends com.vaadin.Application {
public void init() {
... el código de inicialización va aquí ...
}
}
Además de actuar como el punto de entrada en el servlet, la clase
Application proporciona facilidades para acceder a la ventana, el control de ejecución y la selección de temas. La API de application puede parecer similar a la API de Java Servlet, pero sólo es superficial. El framework Vaadin asocia las peticiones con sesiones, de modo que una instancia de la clase application es realmente un objeto de sesión. Debido a esto, puede desarrollar aplicaciones web, como lo haría con el desarrollo de aplicaciones de escritorio.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. Sin embargo, 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.Lo más importante en la inicialización, es la creación de la ventana principal (véase más adelante), que cualquier aplicación tiene. Esto, y el despliegue de la aplicación como un Servlet Java en el contenedor de Servlets, tal como se describe en la Sección 4.8, "Configurar el Entorno de la Aplicación", son los requisitos mínimos para una aplicación.
A continuación se muestra una breve descripción de los elementos básicos de una aplicación:
Ventanas
Una aplicación siempre tiene una ventana principal, tal como se describe en la Sección 4.2, "Administrar la Ventana Principal". Una aplicación puede realmente tener varias ventanas de nivel de aplicación, todas unidas a la misma sesión de la aplicación, como se describe en la Sección 12.2, "Ventanas de Nivel de Aplicación". Las ventanas de nivel de aplicación pueden contener sub-ventanas no nativas, que son esencialmente los componentes de diseño flotante manejados dentro del navegador.
Componentes de Interfaz de Usuario
La interfaz de usuario se compone de los componentes de interfaz de usuario (UI) que son creados y presentados por la aplicación. La interacción del usuario con los componentes causa eventos (véase abajo) relacionados con el componente que la aplicación debe manejar. La mayor parte de los componentes están vinculados a algun dato utilizando el Modelo de Datos (véase abajo). Puede hacer sus propios componentes de interfaz de usuario ya sea a través de herencia o composición. Para una referencia completa de los componentes de interfaz de usuario, véase el Capítulo 5, Componentes de Interfaz de Usuario, para los componentes de diseño, vea el Capítulo 6, Admnistrar el Diseño, y para la composición de componentes, consulte la Sección 5.23 "Composición de Componentes con
CustomComponent".Eventos y Oyentes
Los eventos y oyentes que manejan los eventos, son la base del manejo de la interacción del usuario en una aplicación. La Sección 3.5, "Eventos y Oyentes" aportó una introducción a los eventos y oyentes desde un punto de vista arquitectónico, mientras que la Sección 4.4, "Controlar Eventos con Oyentes", más adelante este capítulo tiene una visión más práctica.
Recursos
Una interfaz de usuario puede mostrar imágenes o enlaces a páginas web o documentos descargables. Estos son recursos, que pueden ser externos o proporcionados por el servidor web o la propia aplicación. La Sección 4.5, "Referencias Recursos" proporciona una visión práctica de los diferentes tipos de recursos.
Temas (Estilos)
La presentación y la lógica de la interfaz de usuario están separadas. Mientras que la lógica de la interfaz de usuario es controlada como código de Java, la presentación es definida en temas como CSS. Vaadin proporciona un tema predeterminado. Los temas definidos por el usuario pueden, ademas de las hojas de estilo, incluir plantillas HTML que definen diseños personalizados y otros recursos temáticos, tales como imágenes. Los temas son discutidos en detalle en el Capítulo 8, Temas, los diseños personalizados en la Sección 6.13, "Diseños Personalizados", y los recursos de temas en la Sección 4.5.4, "Recursos de Temas".
Vincular Datos
Los campos de los componentes son esencialmente vistas a datos, representados en un modelo de datos. Utilizando el modelo de datos, los componentes pueden actualizar los datos de la aplicación directamente, sin la necesidad de ningún código de control. Un modelo de componentes de un campo siempre está vinculado a una propiedad, un elemento, o un contenedor, dependiendo del tipo de campo. Si bien todos los componentes tienen un modelo de datos por defecto, que pueden vincularse a un origen de datos definido por el usuario. Por ejemplo, puede vincular un componente table a la respuesta de una consulta SQL. Para una descripción completa de vinculación de datos en Vaadin, por favor, consulte el Capítulo 9, "Vincular Componentes a Datos".
Anterior 3.5. Eventos y Oyentes |
Siguiente 4.2. Administrar la Ventana Principal |
