Zapatec (Zp) es una librería Ajax escrita en JavaScript, con un claro y bien comentado código fuente. Incluye gran cantidad de ejemplos en buena combinación con la documentación de ayuda.

Zp incluye un soporte de Ajax muy estable y tiene soluciones para intercambiar datos con el servidor en formatos de documentos XML, JSON y HTML.

Zp incorpora un completo UI (Interface de Usuario) de componentes ( o WidGets) muy flexibles, que permiten construir interface de usuario muy impactantes. Ventanas, Menos, Tabuladores, Formularios, Calendario, Tabla y mucho mas.

El objetivo es usar Zp en una aplicación Delphi / IntraWeb, con la intención de usar las técnicas Ajax de Zp para comunicar los “dos mundos”. A nuestra aplicación la podemos llamar ZADI.

Supondré que el lector está familiarizado con IntraWeb, y conoce el propósito del Ajax.
Si el lector conoce Zapatec, fenomenal. Sino entonces mejor si empieza por mirar en
http://www.zapatec.com para saber más acerca de la librería.

1) Incluye la librería Zapatec en el directorio /files

Tal y como puedes hacer con otras librerías JavaScript, puedes poner la librería Zp en el directorio /files de la aplicación.

Realmente es un paso muy obvio, pero es la forma más simple de usar Ajax en un programa IW.

Puedes hacer fácilmente la primera aplicación ZADI, creando una aplicación delphi/IntraWeb normal, copiar la librería Ajax en el directorio /files de la nueva aplicación.
Si ejecutamos la aplicación, accedes a una dirección del como esta:
http://127.0.0.1:8080 ( por ejemplo)

Ahora, puedes probar con
http://127.0.0.1:8080/files/index.html

Y veras que se muestra la demo de la librería Zapatec.

Realmente, esto no es muy nuevo para un programador con experiencia, pero es importante considerar que en el directorio /files, se pueden colgar cualquier librería útil en el programa. Cualquier recurso lo podemos añadir en la página haciendo regencia a los mismos colgados del directorio files.
Por ejemplo
<script type="text/javascript" src="/files/zpgrid/src/zpgrid.js"></script>

2) Comunicación entre Zapatec e IntraWeb.

Debemos encontrar la manera de comunicar los componentes de Zp con el servidor IntraWeb. Por ejemplo, si utilizas el componente ZpGrid, querrías servir los datos procedentes de una tabla en una base de datos
.

Vamos a suponer que nuestro primer objetivo sea mostrar los datos de un DataSet de nuestra aplicación, usando el componente ZpGrid e intercambiando los datos usando XML.

No trataré de explicar toda la funcionalidad de un ZpGrid, pero debo de comentar como se crearía un Grid en nuestra página. Se utilizaría un código similar al siguiente:

objGrid = new Zapatec. Grid
({
source: app.host,
sourceType: "xml/url",
container: contain,
rowsPerPage: rows,
theme: tema
});

sourceType: Indica el tipo de transporte por el cual se van a obtener los datos para crear la tabla. En el ejemplo “xml/url” indica que los datos vienen en formato XML, y que se obtienen de una dirección (URL) del servidor puesta en el campo “source”.

Aquí, nos presentamos con el primer gran problema, una página IntraWeb realiza cualquier comunicación con el servidor usando comandos PUT, en los que incluye información necesaria para localizar el objeto que va a procesar la respuesta.
Sin embargo, ZpGrid llama a la dirección donde cargar el grid usando solo comandos ‘GET’. Realmente gran parte del soporte XML de los componentes utilizan solo comandos GET para obtener los datos, y esto va a ser un problema para nuestra aplicación IW.

Para solucionar el problema usaremos el segundo truco del artículo.
Todas las llamadas de documentos XML están gestionadas en la funcion
Zapatec.Transport.fetchXmlDoc

Vamos a “interceptar” esta función, e incluiremos los parámetros que faltan.

GpZps= {};
GpZps.app=null;

GpZps.old= Zapatec.Transport.fetchXmlDoc; //Get the old funcion referente.

Zapatec.Transport.fetchXmlDoc = function(objArgs) {
if (objArgs == null || typeof objArgs != 'object') {return null }
if (!objArgs.method) {
objArgs.method = 'POST';
objArgs.content=Gran.MakeCallIW (GpZps.elementoXML,GpZps.app)
};
if (GpZps.old){ return GpZps.old (objArgs)} // Llama a la función original de la libreria.
return null;

};

No te preocupes si no comprendes completamente la línea

objArgs.content=Gran.MakeCallIW (GpZps.elementoXML,GpZps.app)

MakeCallIW es una función que genera el contenido a pasar en la llamada PUT.
No he comentado como se construyen las llamadas al servidor IntraWeb, puedes leer articulo.htm que explica como puedes hacerlas.