Foreign Templating Framework"
| Line 2: | Line 2: | ||
=Employment/Purpose= | =Employment/Purpose= | ||
| − | Here describes how to make a ZUL page to be assembled at the client by using Ajax to request ZUL pages separately in a | + | Here describes how to make a ZUL page to be assembled at the client by using Ajax to request ZUL pages separately in a templating framework<ref>[http://tiles.apache.org/ Apache Tiles] is a typical templating framework and allows developers to assemble UI at both server and client.</ref>. |
| − | Notice that you could skip this chapter if the templating framework assembles UI at the server by use of Servlet's inclusion (javax.servlet.RequestDispatcher's include), since ZK will handle it automatically. | + | Notice that you could skip this chapter if the templating framework assembles UI at the server by use of, say, Servlet's inclusion (javax.servlet.RequestDispatcher's include), since ZK will handle it automatically. |
| − | ZK supports many powerful layout components, such as portallayout, borderlayout, tablelayout, columnlayout and so on<ref>For more information, please refer to [[ZK Component Reference]].</ref>. | + | ZK supports many powerful layout components, such as portallayout, borderlayout, tablelayout, columnlayout and so on<ref>For more information, please refer to [[ZK Component Reference]].</ref>. You could use them to have similar or better effect, and skip this chapter. |
<blockquote> | <blockquote> | ||
Revision as of 05:22, 17 October 2010
Employment/Purpose
Here describes how to make a ZUL page to be assembled at the client by using Ajax to request ZUL pages separately in a templating framework[1].
Notice that you could skip this chapter if the templating framework assembles UI at the server by use of, say, Servlet's inclusion (javax.servlet.RequestDispatcher's include), since ZK will handle it automatically.
ZK supports many powerful layout components, such as portallayout, borderlayout, tablelayout, columnlayout and so on[2]. You could use them to have similar or better effect, and skip this chapter.
- ↑ Apache Tiles is a typical templating framework and allows developers to assemble UI at both server and client.
- ↑ For more information, please refer to ZK Component Reference.
Prerequisite
DOCTYPE
To use ZK components correctly, the templating page must specify DOCTYPE as follows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
...
Browser Cache
Though optional, it is suggested to disable the browser to cache the result page. It can be done as follows.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
Make a ZUL page as a fragment
By default, if a ZUL page is requested by the browser directly, it will generate a complete HTML structure, including HTML, HEAD and BODY tags. On the other hand, if the assembling is done by inclusion (javax.servlet.RequestDispatcher's include), a ZUL page will be generated as a HTML fragment without HTML, HEAD, and BODY. For example, if a ZUL page is included by jsp:include, then it won't generate HTML/HEAD/BODY, such that the following JSP page will be rendered correctly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%-- a JSP page --%>
<html>
<body>
<jsp:include page="frag.zul"/>
...
In other words, if the result page is assembled when the request is received, you don't need to do anything specially[1]. However, if the assembling is done at the client side by using Ajax to request fragments after loaded, you have to read the following section.
- ↑ You might take a look at Use ZK in JSP for more information.
Request a ZUL page with Ajax
If the templating assembles the page at the client side by using Ajax to get back each fragment, the ZUL page has to do the following:
- Specify <?page complete="true" docType=""?> to disable the generation of HTML/HEAD/BODY and DOCTYPE
- Use the native DIV (
<n:div xmlns:n="native">) to enclose the whole content.
For example,
<?page complete="true" docType=""?>
<n:div xmlns:n="native">
<window title="whatever content you want"/>
...
</n:div>
Thus, the generated HTML structure won't contain HTML/HEAD/BODY/DOCTYPE and the templating framework would assemble it easily by use of, say, JavaScript's outerHTML or jQuery's replaceWith.
Of course, if the fragment itself is a JSP page and then use inclusion to include a ZUL page (or use ZK JSP Tags), then the generated HTML structure is already a correct HTML fragment (and you don't need to anything described above).
ID Generator
Each ZUL page we request by Ajax as described above will be an independent desktop. It means the browser window will have several desktops, if we assemble UI this way. Thus, the component's UUID must be unique across different desktops (of the same session[1]). The default ID generator can handle it well.
However, if you use a customized IdGenerator, you have to generate component's UUID (IdGenerator.nextComponentUuid(Desktop, Component)) correctly. A typical trick is to encode desktop's ID as part of component's UUID.
- ↑ In short, component's UUID must be unquie in the same session. It is OK to be duplicated in different session.
Communicate among ZUL pages
If a ZUL page is loaded separately with Ajax, an independent desktop is created. For example, the following HTML page will create three desktops.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.4.2.js"></script>
<title>Assembling at the client with Ajax</title>
</head>
<body>
<table>
<tr>
<td id="top" colspan="2">top</td>
</tr>
<tr>
<td id="left">left</td>
<td id="right">right</td>
</tr>
</table>
<script>
$(function() {
$.get("/frags/banner.zul",
{width : "600px"},
function(response) {
$("#top").html(response);
}
);
$.get("/frags/leftside.zul",
{width : "300px"},
function(response) {
$("#left").html(response);
}
);
$.get("/frags/rightside.zul",
{width : "300px"},
function(response) {
$("#right").html(response);
}
);
});
</script>
</body>
</html>
Since they are in different desktops, you have to use the group-scoped event queue[1] if you want to send events from one desktop (such as leftside.zul) to another (such as rightside.zul). For more information, please refer to Event Queues.
- ↑ The group-scoped event queue is available only in ZK EE. For ZK CE, you have to use the session-scoped event queue.
Version History
| Version | Date | Content |
|---|---|---|
| 5.0.5 | October, 2010 | ZUL page is able to be generated as a HTML fragment. |