JSP"

From Documentation
m
 
(18 intermediate revisions by 4 users not shown)
Line 42: Line 42:
 
</source>
 
</source>
  
−
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.
+
In addition, 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.
  
 
<source lang="xml">
 
<source lang="xml">
Line 54: Line 54:
 
=HTML Form=
 
=HTML Form=
  
−
ZK input components (datebox, slider, listbox and so on) work seamlessly with HTML form. In additions to Ajax, you could process input in batch with legacy Servlets.
+
ZK input components (datebox, slider, listbox and so on) work seamlessly with HTML form. In addition to Ajax, you could process input in batch with Servlets.
  
 
<source lang="xml">
 
<source lang="xml">
Line 90: Line 90:
 
== The name Property ==
 
== The name Property ==
  
−
If you want to submit the values of the ZK components, you have to place the component inside the form and then specify the <tt>name</tt> property. Thus, when the form is submitted, the value of, say, the datebox will be sent together with the name you specified. For example,
+
If you want to submit the values of the ZK components, you have to place the component inside the form and then specify the <code>name</code> property. Thus, when the form is submitted, the value of, say, the datebox will be sent together with the name you specified. For example,
  
−
[[Image:DrForm.png]]
+
[[Image:DrForm.png | center]]
 
   
 
   
 
<source lang="xml" >
 
<source lang="xml" >
Line 127: Line 127:
 
</source>
 
</source>
 
   
 
   
−
Once users press the submit button, a request is posted to the <tt>/fooLegacy</tt> servlet with the query string as follows.
+
Once users press the submit button, a request is posted to the <code>/fooLegacy</code> servlet with the query string as follows.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 136: Line 136:
  
 
== Components that Support the name Property ==
 
== Components that Support the name Property ==
−
All input-types components support the <tt>name</tt> property, such as <tt>textbox</tt>, <tt>datebox</tt>, <tt>decimalbox</tt>, <tt>intbox</tt>, <tt>combobox</tt>,<tt> bandbox</tt>, <tt>slider</tt> and <tt>calendar</tt>.
+
All input-types components support the <code>name</code> property, such as <code>textbox</code>, <code>datebox</code>, <code>decimalbox</code>, <code>intbox</code>, <code>combobox</code>,<code>bandbox</code>, <code>slider</code> and <code>calendar</code>.
  
−
In addition, list boxes and tree controls are also support the <tt>name</tt> property. If the <tt>multiple</tt> property is true and users select multiple items, then multiple name/value pairs are posted.
+
In addition, the list boxes and tree controls also support the <code>name</code> property. If the <code>multiple</code> property is true and users select multiple items, then multiple name/value pairs are posted.
  
 
<source lang="xml" >
 
<source lang="xml" >
Line 146: Line 146:
 
         <listheader label="gender"/>
 
         <listheader label="gender"/>
 
     </listhead>
 
     </listhead>
−
     <listitem value="mary>
+
     <listitem value="mary">
 
         <listcell label="Mary"/>
 
         <listcell label="Mary"/>
 
         <listcell label="FEMALE"/>
 
         <listcell label="FEMALE"/>
Line 165: Line 165:
 
</source>
 
</source>
 
   
 
   
−
[[Image:html_5.png]]   
+
[[Image:html_5.png | center]]   
  
 
If both John and Henry are selected, then the query string will contain:
 
If both John and Henry are selected, then the query string will contain:
Line 171: Line 171:
 
  who=john&who=henry
 
  who=john&who=henry
  
−
Notice that, to use list boxes and tree controls with the <tt>name</tt> property, you have to specify the <tt>value</tt> property for <tt>listitem</tt> and <tt>treeitem</tt>, respectively. They are the values being posted to the servlets.
+
Notice that, to use the list boxes and tree controls with the <code>name</code> property, you have to specify the <code>value</code> property for <code>listitem</code> and <code>treeitem</code>, respectively. They are the values being posted to the servlets.
  
 
== Rich User Interfaces ==
 
== Rich User Interfaces ==
−
Because a <tt>form</tt> component could contain any kind of components, the rich user interfaces could be implemented independent of the existent servlets. For example, you could listen to the <tt>onOpen</tt> event and fulfill a tab panel as illustrated in the previous sections. Yet another example, you could dynamically add more rows to a grid control, where each row might control input boxes with the <tt>name</tt> property. Once user submits the form, the most updated content will be posted to the servlet.
+
Because a <code>form</code> component could contain any kind of components, the rich user interfaces could be implemented independently of the existent servlets. For example, you could listen to the <code>onOpen</code> event and fulfill a tab panel as illustrated in the previous sections. Yet another example, you could dynamically add more rows to a grid control, where each row might control input boxes with the <code>name</code> property. Once user submits the form, the most updated content will be posted to the servlet.
  
−
=Version History=
+
= Communication with zul=
 +
 
 +
== Pass Data to zul==
 +
===Query String===
 +
If the data you pass can be visible to users, you can just pass it through a query string.
 +
 
 +
Just put a hyperlink on a page: <code><a href="mypage.zul?myparam=myvalue"/></code>
 +
 
 +
or
 +
 
 +
call <code>HttpServletResponse.sendRedirect(req.getContextPath() + "/redirected.zul?myparam=myvalue")</code> in a Servlet.
 +
 
 +
 
 +
In ZK, you get the passed data with <code>Executions.getCurrent().getParameter("mykey")</code>
 +
 
 +
===Session Attributes ===
 +
<code>HttpServletRequest.getSession().setAttribute("myKey", "myValue")</code>
 +
 
 +
 
 +
== Pass Data to JSP ==
 +
 
 +
===Query String===
 +
 
 +
Just put a hyperlink on a page: <code><a href="mypage.zul?myparam=myvalue"/></code>
 +
 
 +
or
 +
 
 +
call <code>Executions.getCurrent().sendRedirect("/redirected.zul?myparam=myvalue")</code> in a ZK Controller.
 +
 
 +
===Session Attributes ===
 +
<code>Sessions.getCurrent().setAttribute("myKey", "myValue")</code>
  
−
{| border='1px' | width="100%"
 
−
! Version !! Date !! Content
 
−
|-
 
−
| &nbsp;
 
−
| &nbsp;
 
−
| &nbsp;
 
−
|}
 
  
 
{{ZKDevelopersReferencePageFooter}}
 
{{ZKDevelopersReferencePageFooter}}

Latest revision as of 04:49, 1 February 2024


DocumentationZK Developer's ReferenceIntegrationPresentation LayerJSP
JSP


Employment/Purpose

Basically there are two approaches to use ZK in JSP pages.

  1. Use <jsp:include> to include a ZUL page.
  2. Use ZK JSP Tags in a JSP page directly.

Here we discuss the general concepts applicable to both approaches. For information of ZK JSP Tags, please refer to ZK JSP Tags Essentials. It is also worth to take a look at the HTML Tags section.

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) for you, 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 addition, 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.

HTML Form

ZK input components (datebox, slider, listbox and so on) work seamlessly with HTML form. In addition to Ajax, you could process input in batch with Servlets. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib uri="http://www.zkoss.org/jsp/zul" prefix="z" %>

<html>
  <body>
    <z:page>
    <form action="/foo/legacy">
      <table>
        <tr>
          <td>When</td><td><z:datebox name="when"/></td>
        </tr>
        <tr>
          <td>Which></td>
          <td>
            <z:listbox name="which">
                <z:listitem label="choice 1"/>
                <z:listitem label="choice 2"/>
            </z:listbox>
          </td>
        </tr>
        <tr>
          <td><z:button type="submit" label="Submit"/></td>
          <td><z:button type="reset" label="Reset"/></td>
        </tr>
    </form>
    </z:page>
  </body>
</html>

The name Property

If you want to submit the values of the ZK components, you have to place the component inside the form and then specify the name property. Thus, when the form is submitted, the value of, say, the datebox will be sent together with the name you specified. For example,

DrForm.png
<window title="Submit" border="normal" xmlns:n="native">
	<n:form action="/fooLegacy">
		<grid>
			<rows>
				<row>
					When
					<datebox name="when" />
					Name
					<textbox name="name" />
				</row>
				<row>
					Department
					<combobox name="department">
						<comboitem label="RD" />
						<comboitem label="Manufactory" />
						<comboitem label="Logistics" />
					</combobox>
					Type
					<listbox name="type">
						<listitem label="New" value="new"/>
						<listitem label="Average" value="avarage"/>
					</listbox>
				</row>
				<row>
					<button type="submit" label="Submit"/>
				</row>
			</rows>
		</grid>
	</n:form>
</window>

Once users press the submit button, a request is posted to the /fooLegacy servlet with the query string as follows. 

?when=Nov+10%2C+2010&name=Mark+Gates&department=Manufactory&type=new

Thus, as long as you maintain the proper associations between name and value, your servlet could work as usual without any modification.

Components that Support the name Property

All input-types components support the name property, such as textbox, datebox, decimalbox, intbox, combobox,bandbox, slider and calendar.

In addition, the list boxes and tree controls also support the name property. If the multiple property is true and users select multiple items, then multiple name/value pairs are posted. 

 <listbox name="who" multiple="true" width="200px">
     <listhead>
         <listheader label="name"/>
         <listheader label="gender"/>
     </listhead>
     <listitem value="mary">
         <listcell label="Mary"/>
         <listcell label="FEMALE"/>
     </listitem>
     <listitem value="john">
         <listcell label="John"/>
         <listcell label="MALE"/>
     </listitem>
     <listitem value="jane">
         <listcell label="Jane"/>
         <listcell label="FEMALE"/>
     </listitem>
     <listitem value="henry">
         <listcell label="Henry"/>
         <listcell label="MALE"/>
     </listitem>
 </listbox>
Html 5.png

If both John and Henry are selected, then the query string will contain: 

who=john&who=henry

Notice that, to use the list boxes and tree controls with the name property, you have to specify the value property for listitem and treeitem, respectively. They are the values being posted to the servlets.

Rich User Interfaces

Because a form component could contain any kind of components, the rich user interfaces could be implemented independently of the existent servlets. For example, you could listen to the onOpen event and fulfill a tab panel as illustrated in the previous sections. Yet another example, you could dynamically add more rows to a grid control, where each row might control input boxes with the name property. Once user submits the form, the most updated content will be posted to the servlet.

Communication with zul

Pass Data to zul

Query String

If the data you pass can be visible to users, you can just pass it through a query string.

Just put a hyperlink on a page: <a href="mypage.zul?myparam=myvalue"/>

or

call HttpServletResponse.sendRedirect(req.getContextPath() + "/redirected.zul?myparam=myvalue") in a Servlet.


In ZK, you get the passed data with Executions.getCurrent().getParameter("mykey")

Session Attributes

HttpServletRequest.getSession().setAttribute("myKey", "myValue")


Pass Data to JSP

Query String

Just put a hyperlink on a page: <a href="mypage.zul?myparam=myvalue"/>

or

call Executions.getCurrent().sendRedirect("/redirected.zul?myparam=myvalue") in a ZK Controller.

Session Attributes

Sessions.getCurrent().setAttribute("myKey", "myValue")



Last Update : 2024/02/01

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Reference/Integration/Presentation_Layer/JSP&oldid=56708"