Get Spreadsheet Running Quickly in JSF"
Line 42: | Line 42: | ||
##: Make sure '''zssjsf.jar''' existed in <tt>/WEB-INF/lib</tt>. | ##: Make sure '''zssjsf.jar''' existed in <tt>/WEB-INF/lib</tt>. | ||
# Set up web.xml | # 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]]. |
## Add servlet mapping for JSF: | ## Add servlet mapping for JSF: | ||
<source lang='xml'> | <source lang='xml'> | ||
Line 75: | Line 75: | ||
:1. Create a Maven project. | :1. Create a Maven project. | ||
:: You should set packaging to '''war'''. | :: You should set packaging to '''war'''. | ||
− | |||
:2. Setup Maven dependency. | :2. Setup Maven dependency. | ||
Line 97: | Line 96: | ||
<!-- ZK --> | <!-- ZK --> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
<dependency> | <dependency> | ||
<groupId>org.zkoss.zss</groupId> | <groupId>org.zkoss.zss</groupId> | ||
Line 115: | Line 109: | ||
</source> | </source> | ||
− | * If <tt>${zss.version}</tt> is 3.0.0 or above | + | * If <tt>${zss.version}</tt> is 3.0.0 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. | ||
:3. Set up web.xml | :3. Set up web.xml | ||
− | :: 1. Please refer to [[ZK_Installation_Guide/ZK_Background/Sample_of_web.xml|Sample of web.xml]] | + | :: 1. Please refer to [[ZK_Installation_Guide/ZK_Background/Sample_of_web.xml|Sample of web.xml]]. |
::2. Add servlet mapping for JSF: | ::2. Add servlet mapping for JSF: | ||
<source lang='xml'> | <source lang='xml'> | ||
Line 148: | Line 142: | ||
</servlet-mapping> | </servlet-mapping> | ||
</source> | </source> | ||
+ | |||
== Verify Your Project == | == Verify Your Project == |
Revision as of 07:30, 7 August 2013
Available in ZK Spreadsheet EE only
Download ZSS JSF Example Project
If you want to run ZK spreadsheet JSF demo in your local site, just [http:// download the example project WAR file] and deploy to your application server.
Create and Run a JSF Project
The following sections tell you how to prepare an environment for working with Spreadsheet in JSF.
Prerequisites
Before developing a web application with Spreadsheet, you should prepare the following softwares:
- Install JDK 1.5 or above
- Install an application server
- You can install any JavaEE application 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
To develop a web application in Eclipse, you could use a dynamic web project or a maven project. We will describe steps to create these two kind of project respectively.
Steps to Prepare an Eclipse Dynamic Web Project
- Create a dynamic web project
- Install JSF
- Download JSF Reference Implementation, and file name might be javax.faces-2.1.24.jar.
- Put the JAR file to /WEB-INF/lib in your web project.
- Install Spreadsheet library
- Download ZK Spreadsheet component (binary). Choose "Free Evaluation Downloads" from product page or licensed EE from premium download.
- Extract the zip and copy those JAR files under /dist/lib and /dist/lib/ext to /WEB-INF/lib of your web project's folder.
- Make sure zssjsf.jar existed in /WEB-INF/lib.
- Download ZK Spreadsheet component (binary). Choose "Free Evaluation Downloads" from product page or licensed EE from premium download.
- Set up web.xml
- Please refer to Sample of web.xml.
- Add servlet mapping for JSF:
<!-- JSF mapping -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Map these files with JSF -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
Steps to Prepare 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. Notice that different edition has a different repository, and licensed products even require authentication.
- Because this feature is only available in EE, you should add following dependencies:
<!-- JSF -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>${jsf-api.version}</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>${jsf-api.version}</version>
<scope>compile</scope>
</dependency>
<!-- ZK -->
<dependency>
<groupId>org.zkoss.zss</groupId>
<artifactId>zssex</artifactId>
<version>${zss.version}</version>
</dependency>
<dependency>
<groupId>org.zkoss.zss</groupId>
<artifactId>zssjsf</artifactId>
<version>${zss.version}</version>
</dependency>
- If ${zss.version} is 3.0.0 or above.
- You can reference the pom.xml in our example project to verify your own pom.xml.
- 3. Set up web.xml
- 1. Please refer to Sample of web.xml.
- 2. Add servlet mapping for JSF:
<!-- JSF mapping -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- Map these files with JSF -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
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 index.xhtml with content below:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:zssjsf="http://www.zkoss.org/jsf/zss"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Application for Leave</title>
<zssjsf:head/>
</h:head>
<h:body>
<h:form>
<div>
<zssjsf:spreadsheet id="myzss"
src="/hellozss.xlsx"
width="1024px" height="768px"
maxVisibleRows="50" maxVisibleColumns="20"
showToolbar="true" showFormulabar="true" showContextMenu="true" showSheetbar="true"/>
</div>
</h:form>
</h:body>
</html>
- Line 5: Declare a tag name space for Spreadsheet JSF component.
- Line 10: The head tag generates ZK required JS and CSS.
- Line 15: Use Spreadsheet JSF tag with prefix you specified previously.
Now, deploy the project to your application server and visit index.xhtml to see if you can see the Spreadsheet.