Guía Tecnológica Caché

Capítulo cuarto:
Creación de Aplicaciones Web

Arquitectura de clases de las páginas Web

Para cada página Web, existe su correspondiente clase de página, que contiene métodos (código) para generar el contenido de la página.   Cuando se recibe una solicitud, su URL se utiliza para identificar la clase de página correspondiente y se llama al método "Page()" de esa clase.  Normalmente, las clases de página proceden de una clase de página Web estándar denominada "%CSP.Page", que proporciona a cada página varias posibilidades integradas, como la generación de cabeceras y el cifrado.  Estas posibilidades estándar se pueden omitir por diversos medios: heredando de otra superclase, utilizando la herencia múltiple o simplemente omitiendo métodos específicos.

Esta arquitectura de clases facilita el cambio de comportamiento de una aplicación y la utilización de un estilo común.  También aporta todas las demás ventajas de la programación de objetos al desarrollo para la Web.

La clase de página contiene código para ejecutar la acción solicitada y generar y enviar una respuesta al navegador, pero no todo el código que se ejecuta se encuentra en esa clase de página.  De hecho, la mayoría del código ejecutado está habitualmente en métodos de varias clases de bases de datos y quizás en clases adicionales de reglas de negocio.  De esta forma, el proceso de desarrollo consiste en desarrollar clases de página y de base de datos (y quizás clases adicionales de reglas de negocio).

En general, recomendamos que las clases de página contengan sólo la lógica de la interfaz.  Las reglas de negocio y de la base de datos deben incluirse en clases distintas, de modo que exista una separación clara entre el código de la interfaz de usuario y la lógica de la base de datos, y que sea más fácil añadir interfaces de usuario adicionales más adelante.

Múltiples estrategias de desarrollo

Para cada página Web se crea una clase página que contiene el código que se va a ejecutar para esa página. Hay dos formas de crear clases  página y la mayoría de las aplicaciones utilizan ambas formas:

• Archivo CSP -- Se escribe un archivo HTML con Caché Application Tags embebidas utilizando un editor de texto sencillo o una herramienta de diseño Web.  Ese archivo secuencial ("archivo CSP") no se envía directamente al navegador y se compila para generar la clase  página.
• Programación directa -- Los programadores escriben una clase  página completa codificando los métodos adecuados.
• ZEN – Los programadores escriben la clase de página utilizando componentes de objetos interactivos pre-construidos

Las páginas sencillas suelen desarrollarse más rápidamente con archivos CSP y asistentes, pero es más fácil programar páginas más complejas directamente o con ZEN. 

Ficheros CSP

Los ficheros CSP son archivos HTML secuenciales con Caché Application Tags embebidas que se compilan para formar clases  página, el mismo tipo de clases  página que podría escribir directamente el programador.  Las clases  página se compilan a continuación para generar el código que se ejecuta en el Servidor de Aplicaciones de Caché como respuesta a las solicitudes del navegador.

Caché Studio incluye un Asistente de formularios que genera automáticamente un archivo CSP para editar o ver una clase de base de datos. El usuario simplemente pulsa la clase de base de datos de su interés y a continuación pulsa el conjunto de propiedades que se va a visualizar.  El asistente de Caché hace el resto, añadiendo HTML y Caché Application Tags a la página.  Como la salida del asistente es HTML, si el resultado no es exactamente el deseado, es fácil editarlo.

El concepto de archivo CSP es potente porque:

• Los creadores Web pueden diseñar el formato visual mientras los programadores se concentran en el código.
• Gran parte de la interfaz de usuario se puede programar sin procedimientos en un entorno visual y se puede mantener aislada de las reglas de negocio y de la base de datos.
• A menudo es más fácil personalizar una aplicación para un usuario concreto permitiendo modificar la presentación visual a los no programadores y añadir funcionalidad sencilla.

Como las especificaciones visuales de la aplicación se mantienen separadas de la mayoría de la lógica de programación, es relativamente sencillo cambiar el aspecto sin necesidad de programar de nuevo.   Basta con editar el archivo HTML o XML y recompilar la página.

Aunque de esta forma se puede crear una aplicación completa sencilla, lo más  frecuente es que un programador suministre el código adicional.  Este código adicional se proporciona mediante Application Tags que incluyen el código procedural o que invocan el código de otras clases.  Sin embargo, suele ser más fácil escribir las páginas complejas con gran cantidad de código procedural utilizando el camino de programación directa en lugar del archivo CSP.

Caché también incluye un complemento para Dreamweaver, la conocida herramienta de diseño de páginas Web. Proporciona soporte "señalar y pulsar" para añadir Caché Application Tags, así como un Asistente de formularios de Caché que genera automáticamente el código necesario para ver o editar un objeto de base de datos.

Caché Application Tags
Se pueden añadir Caché Application Tags a los archivos CSP.  Se utilizan como etiquetas HTML estándar, pero realmente son instrucciones para que el Compilador Caché Web genere código de aplicación que proporciona funcionalidad diversa, como acceder a objetos de base de datos, ejecutar consultas, controlar el flujo del programa y ejecutar código en el Servidor de Aplicaciones de Caché.  Las Caché Application Tags son extensibles: los desarrolladores pueden crear las suyas propias para adaptarlas a sus necesidades especificas.

Las Caché Application Tags no están embebidas en el código HTML que se envía a un navegador, sólo están en el archivo CSP que lee el Compilador Caché Web.  Ese compilador las transforma automáticamente en código HTML estándar, que puede procesar cualquier navegador.

Hipereventos

Los hipereventos de CSP permiten que los eventos que se producen en un navegador (como clicks de ratón, cambios en los valores de los campos o timeouts) invoquen métodos del servidor y actualicen la página activa sin repetirla. Una vez realizada la acción adecuada, el método del servidor puede devolver código, generalmente JavaScript, para que lo ejecute el navegador. Mediante los hipereventos, las aplicaciones Web pueden llegar a ser más interactivas y receptivas.

Dentro de una página CSP, el método del servidor se invoca simplemente con la sintaxis "#server(...)#".  Por ejemplo, supongamos que cuando el usuario pulsa una imagen del carro de la compra, queremos llamar a un método del servidor denominado AddToCart().  La definición HTML de la imagen podría incluir:

El compilador Web sustituirá esta sintaxis con código de JavaScript que, al ejecutarlo en el navegador, llamará al método del servidor de Caché.

ZEN y páginas Web basadas en componentes

ZEN proporciona una forma sencilla de crear rápidamente aplicaciones Web complejas con un aspecto visual sofisticado y una interfaz de usuario muy interactiva. ZEN no es 4GL, es una biblioteca completa de componentes de objetos pre-construidos y herramientas de desarrollo basadas en la tecnología CSP y de objetos de InterSystems. ZEN es especialmente apropiado para desarrollar una versión Web de las aplicaciones cliente/servidor creadas originalmente con herramientas como Visual Basic o PowerBuilder.

Los componentes de ZEN permiten una interacción mucho más dinámica. El usuario no está limitado exclusivamente a los mecanismos de “remisión” para enviar valores al servidor. Por ejemplo, con el componente de formulario de ZEN, podrá definir su propia validación personalizada, incluyendo llamadas inmediatas al servidor sin necesidad de tener que solicitar una página y redibujarla a continuación. Para los usuarios, esto representa una forma más natural de introducir los datos.

ZEN utiliza el mecanismo de gestión de sesiones de CSP que proporciona autentificación de usuarios, cifrado de datos y retención de datos de sesión persistentes entre peticiones de páginas. Todas las comunicaciones entre el navegador y el servidor se producen mediante el envío de objetos entre ellos utilizando una versión más sofisticada de la técnica a la que se suele hacer referencia como AJAX (JavaScript asíncrono y XML).

Las páginas basadas en ZEN pueden entremezclarse fácilmente con páginas desarrolladas utilizando otras técnicas de CSP para el desarrollo Web.

¿Qué es un componente de ZEN?

Un componente de ZEN es una definición de clase que especifica el aspecto y comportamiento del componente en la página. La definición de clase de ZEN contiene, en un único documento, la definición completa de un componente, incluidas las hojas de estilo, el código del servidor y el código del cliente.

En tiempo de ejecución, ZEN crea dos objetos de cada componente utilizado en la página. Un objeto en el cliente, que ZEN crea automáticamente como un objeto JavaScript dentro del navegador, y un objeto en el servidor. ZEN gestiona automáticamente el estado de ambos objetos y gestiona el flujo de información entre ellos.

Tipos de componentes de ZEN

La biblioteca de ZEN incluye componentes que implementan todos los tipos de controles HTML estándar. Cuadros de entrada, cuadros de texto, botones, casillas de verificación, etc. Estos componentes tienen comportamientos adicionales heredados de la clase de controles de ZEN.
 
ZEN también incluye un conjunto de componentes más complejos que visualizan datos automáticamente de la base de datos y saben cómo actualizar estos datos dinámicamente en respuesta a los eventos del usuario. Por ejemplo, el potente componente de tabla de ZEN visualiza automáticamente los datos dentro de una tabla HTML utilizando una consulta de la base de datos. El componente de tabla soporta paginado, desplazamiento, clasificación por columnas, filtrado y una gran variedad de estilos. El contenido de la tabla puede renovarse desde el servidor sin necesidad de redibujar toda la página

Otros componentes de ZEN son:

• Menús – Se admiten diversos tipos de menús.
• Grids – Añada a la página Web un comportamiento similar a las hojas de cálculo.
• Árboles – Los datos se visualizan de forma jerárquica con un control de árbol.
• Fichas – Un componente de ficha contiene una serie de fichas, cada una de las cuales contiene otros componentes.
• Gráficos – Con SVG se implementa un conjunto completo de componentes de gráficos, que incluye gráficos de líneas, áreas, barras, circulares, máximo-mínimo y XY.
• Dashboards Los velocímetros, indicadores, etc., le permiten visualizar los datos como componentes visuales dinámicos.

 

Cambio del aspecto de los componentes de la biblioteca de ZEN

Todos los componentes de ZEN disponen de un conjunto de propiedades que controlan el aspecto. Las aplicaciones pueden definir estas propiedades en tiempo de ejecución para cambiar los valores, el aspecto y el comportamiento de los componentes.

El aspecto visual también se controla mediante definiciones de estilos de CSS (Hojas de estilo en cascada) estándar. Puede modificar estos estilos (para cambiar las fuentes, colores, tamaño, etc.) a nivel de aplicación, página o en un componente individual.

Puede crear subclases de los componentes de la biblioteca de ZEN para modificar su aspecto y comportamiento.

Creación de nuevos componentes de ZEN

Una de las principales ventajas de ZEN es la facilidad de creación de nuevos componentes.

Cada componente se implementa como una clase. Para crear un nuevo componente: (1) cree una nueva clase de componente, que puede ser una subclase de un componente existente; (2) implemente un método que represente el contenido HTML del componente; (3) defina los métodos del servidor y del cliente que implementan el comportamiento en tiempo de ejecución del componente; y (4) asegúrese de que la clase incluye las definiciones de estilos de CSS necesarias para especificar el aspecto visual del componente.

Cómo localizar una aplicación ZEN a diferentes idiomas

Si se desea, ZEN mantiene automáticamente dentro de una tabla de localización especial un conjunto de todos los valores de texto (títulos, etiquetas, etc.) visualizados por los componentes incorporados en la aplicación. Puede exportar la tabla de localización de la aplicación como un documento XML, traducir los valores a otros idiomas e importar las nuevas tablas.

En tiempo de ejecución, ZEN utiliza los valores de texto basándose en la preferencia de idioma actual del navegador del usuario.

Soporte de SVG

Los SVG (gráficos vectoriales escalables) proporcionan una forma estándar y potente de visualizar datos gráficos dentro de una página Web.  ZEN incluye la capacidad de crear componentes gráficos que se representan a sí mismos utilizando SVG e incluye un conjunto completo de componentes pre-construidos basados en SVG.

¿Qué navegadores soporta ZEN?

ZEN trabaja con Firefox (v1.5 y superior) e Internet Explorer (v6.0 y superior). En el caso de Firefox, no son necesarios plugins, porque SVG está incorporado. En el caso de Internet Explorer, se necesita el plugin SVG de Adobe si desea utilizar componentes de SVG en ZEN. La biblioteca gestiona las diferencias entre SVG de Firefox e Internet Explorer.

Las ventajas de Caché Interfaces Web de usuario completas Pueden generarse páginas muy interactivas y visualmente sofisticadas cuyo aspecto sea más similar a las aplicaciones cliente/servidor de la GUI que a un formulario de navegador simple y tradicional con un botón enviar. El usuario encuentra el formato interactivo más natural y fácil de usar. Desarrollo rápido basado en objetos La utilización de componentes pre-construidos agiliza el desarrollo y lo hace más fácil de modificar en un futuro. Interfaces de usuario coherentes La arquitectura basada en componentes facilita la definición y cumplimiento de las directrices de estilo y comportamiento en toda la aplicación.

 

 

Caché Technology Guide

Página anterior

Tabla de contenidos

Página siguiente