ZK Spreadsheet Quick Start Guide/Quick Start/Create and Run Your First ZK Spreadsheet JSF Application

Available in ZK Spreadsheet EE only

Create Web Application

Web applications use a standard directory structure defined in the Servlet specification.

When developing web applications, you must follow this structure so that the application can be deployed in any J2EE compliant web server.

All you need to do is create a web application directory with related files.

• Create one for example named myZSSJSF

---

Install JSF

1. Download the latest version of the JSF Reference Implementation from JavaServer Faces Technology - Download
2. Save the zip file (named something like mojarra-2.0.3-FCS-binary.zip) to your computer.
3. Unzip the file into a directory of your choice
4. Copy all JAR files files from the lib subdirectory of your JSF installation to myZSSJSF/WEB-INF/lib
5. In addition to this JSF requires the following jars to run. Please download them from their respective apache/oracle projects and copy to myZSSJSF/WEB-INF/lib

   • commons-beanutils.jar, commons-collections.jar, commons-digester.jar, commons-logging.jar, jstl.jar and standard.jar

Install ZK Library Distribution

1. Download ZK libraries archive from ZK Download and save it on your computer.
2. Unzip zk-bin-5.0.5.zip into a folder of your choice.
3. Copy JAR files under the following list to myZSSJSP/WEB-INF/lib

   • {YOUR_ZK_UNZIP_FOLDER}/dist/lib
   • {YOUR_ZK_UNZIP_FOLDER}/dist/lib/ext
   • {YOUR_ZK_UNZIP_FOLDER}/dist/lib/zkforge

Install ZK Spreadsheet Library Distribution

1. Download ZK Spreadsheet libraries archive "zk-spreadsheet-bin-2.0.0.zip" from ZK Spreadsheet Download page and save it on your computer.
2. Unzip zk-spreadsheet-bin-2.0.0.zip into a folder of your choice
3. Copy JAR files under the following list to myZSS/WEB-INF/lib

   • {YOUR_ZK_SPREADSHEET_UNZIP_FOLDER}/dist/lib
   • {YOUR_ZK_SPREADSHEET_UNZIP_FOLDER}/dist/lib/ext

Create Deployment Descriptor(Web.xml)

web.xml is called the web application deployment descriptor. This is a XML file that defines servlets, servlet mappings, listeners, filters, welcome files etc.

Deployment descriptor is a heart of any J2EE web application, so every web application must have a web.xml deployment descriptor directly under WEB-INF folder. To use ZK Spreadsheet in your JSF application all you need is to declare ZK's asynchronous update engine servlet and its servlet mapping. Either create an empty web.xml and copy following contents into it or copy the auEngine servlet/servlet-mapping fragment into your existing web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>myzssjsf</display-name>
	<servlet>
		<description>
  	The asynchronous update engine for ZK</description>
		<servlet-name>auEngine</servlet-name>
		<servlet-class>org.zkoss.zk.au.http.DHtmlUpdateServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>auEngine</servlet-name>
		<url-pattern>/zkau/*</url-pattern>
	</servlet-mapping>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
</web-app>

• For more information on the content of web.xml, please refer to Sample of web.xml and Sample of web.xml for Servlet 2.3 (For some web container which support Servlet 2.3 only (e.g. Tomcat 4.x). This is for your reference only.

Create a sample MS Excel file

1. Open MS Excel
2. Create a new Excel spreadsheet
3. Enter "Hello from ZK Spreadsheet" in the first or any empty cell
4. Save this file as "HelloZSS.xlsx" into myZSSJSF/WEB-INF location

Create XHTML file

Create a simple JSF file named helloZSS.xhtml under "myZSSJSF" folder and enter following contents in it.

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:zk="http://www.zkoss.org/jsf/zss">
<h:head>
	<title>My First ZK Spreadsheet JSF application</title>
</h:head>
<h:body>
	<zk:spreadsheet id="myzss" src="/WEB-INF/HelloZSS.xlsx" width="100%"
		height="800px" maxrows="200" maxcolumns="40">
	</zk:spreadsheet>
</h:body>
</html>

Pack your project

1. Compress the myZSSJSF directory(e.g. myZSSJSF.zip)
2. Rename myZSSJSF.zip to myZSSJSF.war
3. Done!!

Confirm your ZK Spreadsheet JSF application Web Archive (WAR) file

 myZSSJSF.war
 ¦  helloZSS.xhtml
 - WEB-INF
     ¦  web.xml
     ¦  HelloZSS.xlsx
     - lib
          *.jar

Deploy and run your first ZK Spreadsheet JSF application

1. Copy myZSSJSF.war to web server web applications folder. For Tomcat it would be TOMCAT_HOME/webapps folder
2. Open Browser and visit http://localhost:8080/myZSSJSF/helloZSS.xhtml

Download

myZSSJSF.war

Version History

Version	Date	Content