Overview"

From Documentation
Line 116: Line 116:
  
 
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 instead of <zk> tag.
 
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 instead of <zk> tag.
 
= Generate ZK HTML Head resource links at Given Position=
 
 
In order to generate ZK's javascript and css links at the desired location(normally should inside HTML <head> tag), you have to declare ''zkhead'' tag in your jsp page, for example:
 
<source lang="xml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title>ZK JSP Tag Library Demo</title>
 
<z:zkhead/>
 
<style type="text/css">
 
<%@include file="/resource/jspdemo.css" %>
 
</style>
 
</head>
 
</source>
 
  
 
=A Simple JSP page=
 
=A Simple JSP page=

Revision as of 09:57, 28 January 2013


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 a specific place

In some cases, developers will include two or more ZK pages, and each page will have its own <link> (containing JavaScript and Style Sheet). This makes customization a hard work. Besides, every time the developer places a <page> into the BODY of JSP page, zk will generate a corresponding <link> into the BODY, and this would diminish page performance. So the best solution is to add a <zkhead /> into the HEAD tags, then zk will generate only the desired JS and CSS.

This is also required by some features 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 instead 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>

Page Defined ZK Component in JSP

To support ZK's dynamic component definition in JSP page parsing life-cycle, we introduced two JSP tags, one is for definition, the <z:component> tag, and the other is for declaration, the <z:ui> tag. In zk jsp demo( downloadable archive is here), you can take a look at index.jsp to see how it works:

<z:component name="hp-link" extends="toolbarbutton" class="org.zkoss.jspdemo.ui.HPLink" />
...
<z:ui tag="hp-link" url="./foreach.jsp" label="forEach Demo" />

Version History

Last Update : 2013/01/28


Version Date Content
     


Last Update : 2013/01/28

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