Zapatec and Delphi

Zapatec is an Ajax library writing in JavaScript, with a clear and well commented source code. It includes lot of examples well combinated with a helpful documentation.

Zp includes very steady support for Ajax call-backs and it has some solutions to interchange data with the server: in XML, Json and HTML document formats.

Zp incorporates a complete UI of very flexible components (Widgets), which have complete Ajax support and permit to construct very impressive user interfaces.
Windows, Menus, Tabs, Form, Calendar, Grid/Tables, and more.

The aim is to use the Zapatec in a Delphi/IntraWeb application, with the intention to utilize ZP Ajax techniques to communicate the two worlds. We can call it ZADI.

I suppose that the reader is familiar with IntraWeb, and that he knows the Ajax technique purpose. If the reader is very knowledgeable about Zapatec then it is wonderful, but if you don’t know about the Zp then maybe it is better if you start looking for in to learn a little bit about the library.


Trick 1) Include the Zapatec library in files directory.

Really it is a very "obvious" step and it is the first one, which is also very simple way to use Ajax in your IW program.

You can do easily the first ZADI version by creating a normal Delphi IW application, coping the Zapatec Ajax library to the /files directory in the new application.

When executing the application, you access to it at following direction: (for example)

Now, you can try with

Then you will see the demo page, and it is served by the IW application. So really this is the very first Zapatec Ajax Delphi IntraWeb application.

Really there is not so much new in this step for an experimented programmer, but it is important to bear in mind that in /files directory, you can hook any JavaScript library useful for the program.

Trick 2) Communication between Zapatec and IntraWeb

We must find the way to communicate the Zp components with the IntraWeb server.

I have explained How connect IntraWeb and Ajax, with details from the IntraWeb server perspective. But now, I will talk about the Zapatec possibilities and problems.

We can do it in a “traditional” way of IntraWeb (a POST command), which refreshes the entire windows, or by an Ajax call which interchanges partial information.

By the moment, we will see the ZpMenu, ZpGrid and ZpForms components. The objective is to create a complete set of components than to make easy the use of the Zapatec in a Delphi/IntraWeb application and simplify the job.


With zpMenu, we can illustrate the traditional way to communicate with the server.

zpMenu is an elegant component to create Menus in Web Pages.

Basically, it is build from a list of elements ( <UL> <LI> ) which convert in a pretty menu. You can personalice the menu in a lot of aspects, by choosing in the predefined themes and adding dynamic effects.

The way to communicate with the server can be in Ajax, both in order to obtain the data to construct the menu and to “inform” to the server the selected option .

But the easier (and probably more practical) is in “traditional” way, by sending the data menu included in the Web page, and doing each selection trigger a POST call to the server.

A zpMenu can be defined as following:

<ul name="designMenu1" id="designMenu1"  style="display:none" >
      <li><a>Salir amablemente</a></li>
      <li><a onclick="return SubmitClick('ZPMAINMENU','&raiz=00E59140', false)">Delete</a></li>
      <li><a onclick="return SubmitClick('ZPMAINMENU','&raiz=00E591F0', false)">Insert</a></li>

<SCRIPT type="text/javascript">
  var myMenu1 = new Zapatec.Menu({ source: "designMenu1", 
         theme: "barblue",themePath:"/files/zpmenu/themes/", onClick: true});


We can see then the link is like this:

<a onclick="return SubmitClick('ZPMAINMENU','&raiz=00E591F0', false)">Insert</a>

It is a classical <a> HTML element which makes the reference to the SubmitClick function.

To make this function work, you must pass the following params:

The component name which processes the response, and the param ‘raiz=00E591F0’ which in our case is represented by the selected menu item.

Really, it is easy to use it on a Web Page, but we have a Delphi component to make it easier to be used in an IntraWeb application.

TGpZpMenu Generates a zpMenu, from the classic TmainMenu in our application. It includes some codes to render the HTML code.


In this component, we will see more “complex” aspects in the Zapatec library.

zpGrid generates a functional data table, with sorting, selection, editing and more…

If you use the ZpGrid component, you want to serve the data by the IW program connected to a database

I don’t try to explain all the ZpGrid functionality, but I must talk about how a ZipGrid is created on the page. You can use a code similar to the next paragraph.


objGrid = new Zapatec. Grid
sourceType: "xml/url",
container: contain,
rowsPerPage: rows,
theme: tema

sourceType: Indicates de type of data transport to obtain de data for the table. In the example “ xml/url” refer to data in XML format obtained in a URL direction set in source.

Here the great problem is:

An IntraWeb page communicates with the server by using POSTcommands in which some necessary information is included locate the component which process the answer.

But ZpGrid call to the URL which obtain the data by using GET commands (with no any additional information). Really, the XML support in other Widgets have the same problem, and this is not good for the IW application.

To solve the problem, we will use a second trick.

All the XML calls in the components, are handled by Zapatec.Transport.fetchXmlDoc function.

Let’s go to “intercept” this function, in order to include the missing params.

GpZps= {};;

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

Zapatec.Transport.fetchXmlDoc = function(objArgs) {

if (!objArgs.method) {
objArgs.method = 'POST';
objArgs.content=Gran.MakeCallIW (GpZps.elementoXML,
if (GpZps.old){ return GpZps.old (objArgs)} return null;


Don’t worry if you do not understand the line:

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

MakeCallIW is a function which generates the content to pass in the POSTcall.

I don’t explain how to construct the IW server calls, because you can read ajax4intraweb.htm which explain how to do it.

There is another consideration about how to create the correct XML answer in the IntraWeb app, and each Zp component has specifics params and rules, I will explain each one in next articles. Really it is not easy to talk about all the problems/issues, because for example its necesary to make each Ajax call after the other one ( here we can doubt about an IntraWeb limitation in handling simultanius POST commands ),

By the moment, we have Delphi IntraWeb components which support ZpMenu, ZpGrid and ZpForms. The objective is to create a complete set of components that make easy the use of the Zp components in a Delphi/IntraWeb application and simplify the job. We will publish the first demos ASAP.


core Components  
TGpZapatecLibrary Component which references to the main javaScript zapatec files in the page.
TGpZpMainMenu To create zpMenus from the mainMenu component

Create a zpGrid in XML.

TAjaxForm To create a WEB form which connects easily with the server program.

core Components  
TGpFrThread Thread extension, to create a FastReport
TIwFrx Hi level component, which defines a report to easy handle pdf and web responses










Teléfono: 978-610539 - Fax: 978-610861 -Trav.Agustina Aragón 1,1e 44002 Teruel ( España ).webmaster

Copyright © 1997-2004 , [Multi-Informatica Teruel, S.L].La información contenida en este documento está sujeta a modificaciones sin previo aviso. Otros productos u organizaciones mencionadas aquí son marcas comerciales o marcas registradas propiedad de sus respectivas organizaciones o propietarios.