Using Spreadsheet in JSP"

From Documentation
Line 3: Line 3:
  
  
__TOC__
 
  
 
{{ZSS EE}}
 
{{ZSS EE}}
  
= Download ZSS JSP Example Project =
+
ZK Spreadsheet can also be embedded in a JSP by spreadsheet custom tag to empower JSP with AJAX. You can just download the example project to experience it. Furthermore, if you want a DOM element can interact with Spreadsheet, you can use [http://jquery.com JQuery]. We will demonstrate the usage with an example application.
If you want to run ZK spreadsheet JSP demo in your local site, just [http:// download the example project WAR file] and deploy to your application server.  
 
 
 
= Create and Run a JSP Project =
 
 
 
Follow instructions in [[ZK Spreadsheet Essentials 3/Working with Spreadsheet/Setting Up Environment]] to create a "dynamic web project" or a "maven project" named '''myzssjsp''' then do the following extra steps for using in JSP.
 
 
 
== Extra Steps for Eclipse Dynamic Web Project ==
 
This feature is only available in EE, so you should download EE version. (Free Evaluation Download or Premium Download). After you install ZK Spreadsheet library, make sure '''zssjsp.jar''' existed under  <tt>/WEB-INF/lib</tt>.
 
 
 
== Extra Steps for Maven Project ==
 
In addition to <tt>org.zkoss.zss:zssex</tt> and <tt>org.zkoss.zk:zkmax</tt>, you should add the dependency (<tt>zssjsp</tt>) below:
 
<source lang='xml'>
 
<dependency>
 
    <groupId>org.zkoss.zss</groupId>
 
    <artifactId>zssjsp</artifactId>
 
    <version>${zss.version}</version>
 
</dependency>
 
</source>
 
 
 
 
 
== Verify Your Project ==
 
After completing above steps, preparation for working with Spreadsheet and JSP is done. You can use a simple page to verify your preparation. Steps are as follows:
 
# Create a simple Excel file or use the sample file in our example project. Put the file under your web application's root folder.
 
# Create <tt>index.jsp</tt> with content below:
 
<source lang='xml' high='11,14'>
 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 
    pageEncoding="ISO-8859-1"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 
<title>My First ZK Spreadsheet JSP application</title>
 
<zssjsp:head/>
 
</head>
 
<body>
 
<%@ taglib prefix="zssjsp" uri="http://www.zkoss.org/jsp/zss"%>
 
<div width="100%" style="height: 100%;">
 
<zssjsp:spreadsheet
 
id="myzss" src="/WEB-INF/hellozss.xlsx" width="100%"
 
height="800px" maxrows="200" maxcolumns="40" showSheetbar="true"/>
 
</div>
 
</body>
 
</html>
 
</source>
 
* Line 11: Declare a taglib before using Spreadsheet JSP tag is necessary.
 
* Line 13: Use spreadsheet JSP tag with prefix you specified previously.
 
 
 
Now, deploy the project to your application server and visit <tt>index.jsp</tt> to see if you can see the Spreadsheet.
 
 
 
= Interact with Spreadsheet in JSP =
 
 
 
* must know JQuery
 
 
 
* bookProvider
 
*  handle events with jquery
 
* JS variable <tt>zssjsp</tt> ?
 
 
 
= example =
 

Revision as of 04:31, 30 July 2013


Using Spreadsheet in JSP





Available in ZK Spreadsheet EE only

ZK Spreadsheet can also be embedded in a JSP by spreadsheet custom tag to empower JSP with AJAX. You can just download the example project to experience it. Furthermore, if you want a DOM element can interact with Spreadsheet, you can use JQuery. We will demonstrate the usage with an example application.