Overview"

From Documentation
Line 51: Line 51:
  
 
<source lang="html" high='1'>
 
<source lang="html" high='1'>
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="zk" %>
+
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="z" %>
 
</source>
 
</source>
  
Line 79: Line 79:
  
 
<source lang="xml">
 
<source lang="xml">
<zk:page zscriptlanguage="java" >
+
<z:page zscriptlanguage="java" >
  
 
...
 
...
Line 85: Line 85:
 
// The ZK Component Tags declaration Area...
 
// The ZK Component Tags declaration Area...
  
... </zk:page>
+
... </z:page>
 
// Wrong place to put ZK Component Tags...
 
// Wrong place to put ZK Component Tags...
 
</source>
 
</source>
Line 92: Line 92:
  
 
<source lang="xml">
 
<source lang="xml">
<zk:page  id="pg1" style="height:100px;width=300px">
+
<z:page  id="pg1" style="height:100px;width=300px">
 
// The ZK Components declaration Area...
 
// The ZK Components declaration Area...
</zk:page>
+
</z:page>
 
//Other JSP Content...
 
//Other JSP Content...
<zk:page  id="pg2" style="height:100px;width=300px">
+
<z:page  id="pg2" style="height:100px;width=300px">
 
// The ZK Components declaration Area...
 
// The ZK Components declaration Area...
</zk:page
+
</z:page
 
</source>
 
</source>
  

Revision as of 02:21, 27 March 2012


This section demonstrates how to use ZK JSP tags in your JSP document.

Prerequisite

DOCTYPE

To use ZK components correctly, the JSP 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>
...

BODY Style

By default, ZK will set the CSS style of the BODY tag to width:100%;height:100% If you prefer to have the browser to decide the height (i.e., the browser's default), you could specify height:auto to the BODY tag (optional).

<body style="height:auto">
...

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" />

In additions, you could invoke the following statement in JSP to tell ZK to drop desktops once the user navigates to other URL. It is optional but it saves memory since the browser page is not cached and safe to remove if the user navigates away.

<%
	request.setAttribute(org.zkoss.zk.ui.sys.Attributes.NO_CACHE, Boolean.TRUE);
%>

Notice that it has to be invoked before ZK JSP's zkhead tag, if ZK JSP is used, or before the first jsp:include that includes a ZUL page.


Taglib Declaration

Using ZK JSP Tags is the same as using other JSP tag libraries. You can declare a <%@taglib %> to define the prefix and mapping URI of the ZK JSP Tags as follows:

<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="z" %>

Head Tag Declaration

since 1.3.0

Generate zk's <link> in specific place

In some cases, developers include two or more ZK page, then each page will have its own <link>(contain JavaScript and Style Sheet). That makes customization a hard work. Besides, if place <page> into the BODY of JSP page, zk will generate <link> into the BODY, this would diminish page performance. So the best solution is adding <zkhead /> into the HEAD tags ,then zk will generate the JS and CSS there only.

It is also required by some feature such like hflex/vflex.

<head>
	<z:zkhead />
	   ...
</head>

Page Tag Declaration

In ZK world, every ZK component must be contained by a Desktop instance. It will manage the Ajax connections of each component. In JSP, you have to specify a <page> tag to initialize the Desktop instance if it's not existed:

<z:page zscriptlanguage="java" >

...

// The ZK Component Tags declaration Area...

... </z:page>
// Wrong place to put ZK Component Tags...

The page tag also creates a Page instance automatically, and this page instance is a container to contain components. In one JSP document, you can declare multiple pages like this:

<z:page  id="pg1" style="height:100px;width=300px">
// The ZK Components declaration Area...
</z:page>
//Other JSP Content...
<z:page  id="pg2" style="height:100px;width=300px">
// The ZK Components declaration Area...
</z:page

The rule to access variables across pages is the same as to do so in pure ZK document. For more detailed information about Page(Page), please refer to ZK Developer's Reference.

Component Tag Declaration

After declaring page tag, now we can add some component tags into it. For example:

<z:page>
    <z:window id="myWin" title="ZK JSP Tags Demo">
        Hello ZK JSP Tags! <z:textbox/>
    </z:window>
<h1>mix with other tags.</h1>

As you can see, the code is very similar to a typical ZUML document, except that you need to add proper prefix for each tag and use <z:page> tag in stead of <zk> tag.

A Simple JSP page

Let us see a simple JSP page:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="z"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<z:zkhead />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Hello ZK!</title>
	</head>
	<body>
		<z:page zscriptLanguage="java">
			<z:window border="normal">
				Hello ZK!
			</z:window>
		</z:page>
	</body>
</html>


Version History

Last Update : 2012/03/27


Version Date Content
     


Last Update : 2012/03/27

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.