ZK Light: Talking to the Python Server

From Documentation

Overview

Let's illustrate the communication between the client and the server with a small application called Book Suggest.

Book Suggest shows up a combobox to let user select an interested category.

After user selects a category, it displays a list of suggested books in a grid.

Creating a Python project

The setup of a Python project depends on the Web server. Here we use Google App Engine as the target Web server. However, it is easy to port to other Web server since there are only a few lines of codes depends on the Web server.

To create a ZK Light project, you have to prepare the following^[1]:

• ZK JavaScript files. Let us copy them to the WebContent/js directory of the project
• ZK CSS and image files. Let us copy them to the WebContent/cssdirectory of the project
• [Optinal] Simple JSON. It is required if you want to use JSON to communicate. You can choose other implementation instead, too.

To focus more on ZK Light itself, here we simply open an existent project called booksuggest that can be found in the download. And copy two directories named booksuggest and simplejson to the directory where Google App Engine was installed.

---

1. ↑ Here we assume Google App Engine was installed. Refer to here for more information.

Creating a HTML page

In this example, we use iZUML to implement the HTML page. If you prefer other approach, refer to the example with JavaScript.

Let us create a file named index.html with the following content, and place it under the WebContent directory^[1].

1. ↑ The directory to put index.html depends on the configuration. Refer to #Creating app.yaml

Then, we have to fire the request to the server when user selects a category. To listen the event, just specify onSelect as follows.

<combobox onSelect="loadSuggest(event.data.items[0])">

where loadSuggest is the function we are going to implement later to load the book suggestion from the server.

As shown above, when an event is received, we can retrieve the event by use of a variable named event, which is an instance of zk.Event. Moreover, we can retrieve the detailed information via the data property. Because it is onSelect, we can retrieve the selected item via data.items[0] (there is only one selected item since it is a combobox).^[1]

Then, we implement loadSuggest by use of the ajax function of jQuery to send the request to the server as follows.

function loadSuggest(item) {
	jq.ajax({
		type: 'POST',
		url: '/suggest',
		dataType: 'json',
		data: 'categoryId=' + item.id,
		success: function (bookInfo) {
			... //the function to handle the response sent back from the server
		}
	});
}

where jq references to the jQuery object (it has an alias called $). The URL specified in url depends on how we map the python program to handle the request. Here, we map it to /suggest.

---

1. ↑ Refer to Event Data for details.

Processing the response sent from the server

When using jQuery's ajax(), we can specify a function to process the content responsed from the server. It can be done by specifying a function with the success attribute as show in the above example. In this example, we will show a list of suggested books based on the category selected by user, so we implement it as follows.

success: function (bookInfo) {
	var suggestInfo = zk.Widget.$('suggestInfo');
	if (suggestInfo) suggestInfo.detach();
	main.appendChild(zk.zuml.Parser.createAt('#suggestInfo',
		{replaceHTML:false}, {infos: bookInfo}));
}

where we use the createAt method to load a template stored in a hidden DIV (whose id is suggestInfo). Because we want to keep the template for later use, we have to specify replaceHTML as false. Furthermore, we append the created widget to the widget named main.

Refer to zk.zuml.Parser#createAt for more information.

Creating app.yaml

Google App Engine uses app.yaml to specify runtime configuration, including versions and URLs. Let us create app.yaml with the following content.

Creating suggest.py to handle the request

To handle the request sent from the client, we have to implement a handle. Let us create suggest.py with the following content.

Processing the request with AuRequest

Processing the request

The processing of the request is straightforward: retrieve the category, look for the suggestion, and then send it back. In this example, we use JSON to transfer the data back^[1].

self.response.out.write(json.dumps(self._bookInfos[self.request.get('categoryId')]))

Once the response arrives at the client, the success function will be called to display the suggestion, as described in the previous section.

---

1. ↑ You can use any format you like as long as both the client and the server can interpret it correctly

Testing the application

To test the application, you have to start Google App Engine with the following instruction.

python dev_appserver.py booksuggest

Then, open a browser to access the following URL (where the port depends on your Web server's configuration).

http://localhost:8080/index.html

Next

• Download ZK Light.
• Go to ZK Light: Widget Overview
• Back to ZK Light: Getting Started
• Back to ZK Light

Further Reading

• How to implement AuRequest and AuResponse if you want to know inside of the Ajax communication