Get Spreadsheet Running Quickly in JSP"

From Documentation
m (correct highlight (via JWB))
 
(19 intermediate revisions by 4 users not shown)
Line 8: Line 8:
 
{{ZSS EE}}
 
{{ZSS EE}}
  
= Download ZSS JSP Example Project =  
+
= Quick Start ZSS JSP Demo Project =  
If you want to run ZK spreadsheet JSP demo in your local site, just [https://zkbooks.googlecode.com/files/zssjspdemo-3.0.0.RC.war download the example project WAR file] and deploy to your application server.
+
Suggest you to run ZK spreadsheet JSP demo project in your local site without coding, just [https://github.com/zkoss/zssjspdemo download/clone the example project] and execute the command below (require to install [https://maven.apache.org/ Maven])
 +
 
 +
mvn jetty:run
 +
 
 +
then visit http://localhost:8080/zssjspdemo with your browser.
  
 
= Create and Run a JSP Project =
 
= Create and Run a JSP Project =
 +
We suggest you to start your project based on the demo project above. That will save you the setup effort.
  
The following sections tell you how to prepare an environment for working with Spreadsheet in JSP.
+
The following sections tell you how to start a project from the scratch for working with Spreadsheet in JSP.
  
 
== Prerequisites ==
 
== Prerequisites ==
  
 
Before developing a web application with Spreadsheet, you should prepare the following softwares:
 
Before developing a web application with Spreadsheet, you should prepare the following softwares:
* Install [http://www.oracle.com/technetwork/java/javase/downloads/index.html JDK] 1.5 or above
+
* Install [http://www.oracle.com/technetwork/java/javase/downloads/index.html JDK] 1.6 or above
 
* Install an application server
 
* Install an application server
 
** You can install any Java web server you like. If you don't have one, [http://tomcat.apache.org Tomcat] is a good choice.
 
** You can install any Java web server you like. If you don't have one, [http://tomcat.apache.org Tomcat] is a good choice.
Line 26: Line 31:
 
== Prepare a Project ==
 
== Prepare a Project ==
  
 +
We introduce 2 ways: '''By Maven'''(recommended) or '''By Eclipse'''. You just need to choose one of them:
  
=== Steps to Prepare an Eclipse Dynamic Web Project ===
+
=== By a Maven Project ===
To save your time creating a project out of nothing, you can just [https://zkbooks.googlecode.com/files/zssessentials.zip download the sample project] which is a ready-to-run Eclipse dynamic web project.
 
 
 
If you have to create a project by your own, you can follow the steps below:
 
# Create a dynamic web project
 
# Install Spreadsheet library
 
## Download ZK Spreadsheet component (binary). Choose [http://www.zkoss.org/download/zkspreadsheet "Free Evaluation Downloads" from product page] or licensed  EE from [http://www.zkoss.org/download/premium premium download].
 
##:
 
## Extract the zip and copy those JAR files under '''<tt>/dist/lib</tt>''' and '''<tt>/dist/lib/ext</tt>''' to '''<tt>/WEB-INF/lib</tt>''' under your web project's root folder.
 
##: Make sure '''zssjsp.jar''' existed under  <tt>/WEB-INF/lib</tt>.
 
# Set up web.xml
 
#: Please refer to [[ZK_Installation_Guide/ZK_Background/Sample_of_web.xml|Sample of web.xml]].
 
 
 
=== Steps to Prepare a Maven Project ===
 
  
 
:1. Create a Maven project.
 
:1. Create a Maven project.
Line 63: Line 56:
  
 
</source>
 
</source>
 
+
* You can browser ZK maven repository to know available zss.version
* If <tt>${zss.version}</tt> is 3.0.0.RC or above.
 
  
 
You can reference the pom.xml in our example project to verify your own pom.xml.
 
You can reference the pom.xml in our example project to verify your own pom.xml.
Line 70: Line 62:
 
: 3. Set up web.xml.  
 
: 3. Set up web.xml.  
 
:: Please refer to [[ZK_Installation_Guide/ZK_Background/Sample_of_web.xml|Sample of web.xml]].
 
:: Please refer to [[ZK_Installation_Guide/ZK_Background/Sample_of_web.xml|Sample of web.xml]].
 +
 +
=== By an Eclipse Dynamic Web Project ===
 +
<!--
 +
To save your time creating a project out of nothing, you can just [ download the sample project] which is a ready-to-run Eclipse dynamic web project.
 +
-->
 +
 +
If you have to create a project by your own, you can follow the steps below:
 +
# Create a dynamic web project
 +
# Install Spreadsheet library
 +
## Download ZK Spreadsheet component (binary). Choose [http://www.zkoss.org/download/zkspreadsheet "Free Evaluation Downloads" from product page] or licensed  EE from [http://www.zkoss.org/download/premium premium download].
 +
##:
 +
## Extract the zip and copy those JAR files under '''<code>/dist/lib</code>''' and '''<code>/dist/lib/ext</code>''' to '''<code>/WEB-INF/lib</code>''' under your web project's root folder.
 +
##: Make sure '''zssjsp.jar''' existed under  <code>/WEB-INF/lib</code>.
 +
# Set up web.xml
 +
#: Please refer to [[ZK_Installation_Guide/ZK_Background/Sample_of_web.xml|Sample of web.xml]].
 +
 +
 +
 +
=== Trouble Shooting ===
 +
If you have problem switching from the evaluation repository to the licensed one, please check [http://books.zkoss.org/wiki/ZK_Installation_Guide/Setting_up_IDE/Maven/Resolving_ZK_Framework_Artifacts_via_Maven#Trouble_Shooting here].
  
 
== Verify Your Project ==  
 
== 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:
 
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 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:
+
# Create <code>index.jsp</code> with content below:
<source lang='xml' high='8, 11,14'>
+
<source lang='xml' highlight='3, 9,13'>
 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 
     pageEncoding="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">
+
<%@taglib prefix="zssjsp" uri="http://www.zkoss.org/jsp/zss"%>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
 +
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<html>
 
<head>
 
<head>
Line 86: Line 100:
 
</head>
 
</head>
 
<body>
 
<body>
<%@ taglib prefix="zssjsp" uri="http://www.zkoss.org/jsp/zss"%>
 
 
<div width="100%" style="height: 100%;">
 
<div width="100%" style="height: 100%;">
 
<zssjsp:spreadsheet
 
<zssjsp:spreadsheet
Line 95: Line 108:
 
</html>
 
</html>
 
</source>
 
</source>
* Line 8: The head tag generates ZK required JS and CSS.
+
* Line 3: Declare a taglib before using Spreadsheet JSP tag is necessary.
* Line 11: Declare a taglib before using Spreadsheet JSP tag is necessary.
+
* Line 9: The head tag generates ZK required JS and CSS.
* Line 13: Use spreadsheet JSP tag with prefix you specified previously.
+
* Line 13: Use spreadsheet JSP tag with prefix you specified in taglib.
 +
 
  
Now, deploy the project to your application server and visit <tt>index.jsp</tt> to see if you can see the Spreadsheet.
+
Now, deploy the project to your application server and visit <code>index.jsp</code> to see if you can see the Spreadsheet.
  
  

Latest revision as of 12:48, 19 January 2022


Get Spreadsheet Running Quickly in JSP





Available in ZK Spreadsheet EE only

Quick Start ZSS JSP Demo Project

Suggest you to run ZK spreadsheet JSP demo project in your local site without coding, just download/clone the example project and execute the command below (require to install Maven)

mvn jetty:run

then visit http://localhost:8080/zssjspdemo with your browser.

Create and Run a JSP Project

We suggest you to start your project based on the demo project above. That will save you the setup effort.

The following sections tell you how to start a project from the scratch for working with Spreadsheet in JSP.

Prerequisites

Before developing a web application with Spreadsheet, you should prepare the following softwares:

  • Install JDK 1.6 or above
  • Install an application server
    • You can install any Java web server you like. If you don't have one, Tomcat is a good choice.
  • Install a development tool.
    • In this book, we will use Eclipse as the default IDE to explain related setup.

Prepare a Project

We introduce 2 ways: By Maven(recommended) or By Eclipse. You just need to choose one of them:

By a Maven Project

1. Create a Maven project.
You should set packaging to war.
2. Setup Maven dependency.
First, you should setup zk maven repository to use "EE Evaluation" or "EE". Notice that different editions are available at different repositories, and EE requires authentication.
Because this feature is only available in EE, you should add following dependencies:
<dependency>
	<groupId>org.zkoss.zss</groupId>
	<artifactId>zssex</artifactId>
	<version>${zss.version}</version>
</dependency>
<dependency>
    <groupId>org.zkoss.zss</groupId>
    <artifactId>zssjsp</artifactId>
    <version>${zss.version}</version>
</dependency>
  • You can browser ZK maven repository to know available zss.version

You can reference the pom.xml in our example project to verify your own pom.xml.

3. Set up web.xml.
Please refer to Sample of web.xml.

By an Eclipse Dynamic Web Project

If you have to create a project by your own, you can follow the steps below:

  1. Create a dynamic web project
  2. Install Spreadsheet library
    1. Download ZK Spreadsheet component (binary). Choose "Free Evaluation Downloads" from product page or licensed EE from premium download.
    2. Extract the zip and copy those JAR files under /dist/lib and /dist/lib/ext to /WEB-INF/lib under your web project's root folder.
      Make sure zssjsp.jar existed under /WEB-INF/lib.
  3. Set up web.xml
    Please refer to Sample of web.xml.


Trouble Shooting

If you have problem switching from the evaluation repository to the licensed one, please check here.

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:

  1. Create a simple Excel file or use the sample file in our example project. Put the file under your web application's root folder.
  2. Create index.jsp with content below:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib prefix="zssjsp" uri="http://www.zkoss.org/jsp/zss"%>
<!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>
<div width="100%" style="height: 100%;">
	<zssjsp:spreadsheet
	id="myzss" src="/WEB-INF/hellozss.xlsx" width="100%"
	height="100%" maxVisibleRows="200" maxVisibleColumns="40" showSheetbar="true"/>
</div>
</body>
</html>
  • Line 3: Declare a taglib before using Spreadsheet JSP tag is necessary.
  • Line 9: The head tag generates ZK required JS and CSS.
  • Line 13: Use spreadsheet JSP tag with prefix you specified in taglib.


Now, deploy the project to your application server and visit index.jsp to see if you can see the Spreadsheet.



All source code listed in this book is at Github.


Last Update : 2022/01/19

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