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
Las partes más importantes de la arquitectura y su función son las siguientes:
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 |
Siguiente 3.2. Antecedentes Tecnológicos |
No hay comentarios.:
Publicar un comentario