Foreign Templating Framework"
| Line 118: | Line 118: | ||
</source> | </source> | ||
| − | Since they are in different desktops, you have to use the ''desktop-scoped' event queue 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 [[ZK_Developer%27s_Reference/Event_Handling/Event_Queues|Event Queues]]. | + | Since they are in different desktops, you have to use the ''desktop-scoped'' event queue 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 [[ZK_Developer%27s_Reference/Event_Handling/Event_Queues|Event Queues]]. |
=Version History= | =Version History= | ||
Revision as of 06:47, 15 October 2010
Employment/Purpose
Here describes how to make a ZUL page to be assembled with Ajax in a foreign templating framework, such as Apache Tiles.
ZK supports many powerful layout components, such as portallayout, borderlayout, tablelayout, columnlayout and so on[1]. It is recommended to use them. Of course, read this chapter only if you prefer to use other templating framework.
- ↑ For more information, please refer to ZK Component Reference.
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>
...
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).
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>ZK Client Trick</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 desktop-scoped event queue 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.
Version History
| Version | Date | Content |
|---|---|---|
| 5.0.5 | October, 2010 | ZUL page is able to be generated as a HTML fragment. |