Zapatec

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

Zp includes very stable support for Ajax call-backs and have 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 objective 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 will suppose than the reader is familiarized with IntraWeb, and know the Ajax technique purpose. If the reader is good knower of Zapatec then is phenomenal, but if don’t know about the Zp then maybe is better if you start for look in http://www.zapatec.com to know a little bit about the library.

Trick 1) Include the Zapatec library in files directory.

Really is a very "obvious" step, but is the first 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 in direction
http://127.0.0.1:8080 (for example)

Now, you can try with

http://127.0.0.1:8080/files/index.html

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 is important to consider than 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 of communicates the Zp components with the IntraWeb server.

I had talk about the 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 “traditional” way of IntraWeb (a POST command), which refresh the entire screen, or by an Ajax call which interchange 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 facility the use the Zapatec in a Delphi/IntraWeb application and simplify the job.

zpMenu

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 the component 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 the way to obtain the data to construct the menu and the way to “inform” to the server the option selected.
But the more easy (and probably more practice) 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>Agrario/Pecuario</a>
     <ul>
      <li><a>Salir amablemente</a></li>
     </ul>
   </li>
   <li><a>Filtros</a>
     <ul>
      <li><a onclick="return SubmitClick('ZPMAINMENU','&raiz=00E59140', false)">Delete</a></li>
      <li><a onclick="return SubmitClick('ZPMAINMENU','&raiz=00E591F0', false)">Insert</a></li>
</ul>
   </li>
  </ul>

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

	

We can see than the link is like:

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

Is a classic <a> HTML element which references the SubmitClick function.
To this function, you can must pass the following params:
The component name which processes the response, and the param ‘raiz=00E591F0’ which in our case represented the selected menu item.

Really, it is easy to use in a Web Page, but we have a Delphi component to do it more easy to use in a IntraWeb application.

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

zpGrid

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

zpGrid generates a functional data table, with sort, 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 tray to explain all the ZpGrid functionality, but I must to talk about how is created a ZpGrid in the page. You can use a code similar to next paragraph.

	  objGrid = new Zapatec. Grid
	        ({
			source: app.host,
			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 setting in source.

Here is the great problem, an IntraWeb page communicates with the server by using POST commands in which includes some information needed to 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.
Every 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.

Don’t worry if not understand the line:
objArgs.content=Gran.MakeCallIW (GpZps.elementoXML,GpZps.app)

MakeCallIW is a function which generates the content to pass in the POSTcall.
I don’t explain how to construct the IW server calls, you can read ajax4intraweb.htm which explain how to do it.

There is other consideration in how to create the correct XML answer in the IntraWeb app, and each Zp component have specifics params and rules, I will explain each one in next articles. Really is not easy to talk about all the problematic, for example its necesary to do each Ajax call after the other ( doubt a IntraWeb limitation in handle simultanius POST commands ),

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