Get Spreadsheet Running Quickly in JSF"
Line 152: | Line 152: | ||
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. | + | # Create <tt>index.xhtml</tt> with content below: |
− | <source lang='xml' high=''> | + | <source lang='xml' high='7, 10, 13'> |
− | + | <?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:h="http://java.sun.com/jsf/html" | ||
+ | xmlns:f="http://java.sun.com/jsf/core" | ||
+ | xmlns:zssjsf="http://www.zkoss.org/jsf/zss"> | ||
+ | <h:head> | ||
+ | <title>My First ZK Spreadsheet JSF application</title> | ||
+ | <zssjsf:head/> | ||
+ | </h:head> | ||
+ | <h:body> | ||
+ | <zssjsf:spreadsheet id="myzss" src="/WEB-INF/hellozss.xlsx" width="100%" height="100%" | ||
+ | maxVisibleRows="200" maxVisibleColumns="40"> | ||
+ | </zssjsf:spreadsheet> | ||
+ | </h:body> | ||
+ | </html> | ||
</source> | </source> | ||
− | * Line | + | * Line 7: Declare a taglib before using Spreadsheet JSP tag is necessary. |
− | + | * Line 10: 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 previously. | ||
− | Now, deploy the project to your application server and visit <tt>index. | + | Now, deploy the project to your application server and visit <tt>index.xhtml</tt> to see if you can see the Spreadsheet. |
Revision as of 04:50, 1 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 and Sample of web.xml for Servlet 2.3 (For some web container which support Servlet 2.3 only (e.g. Tomcat 4.x) to setup web.xml for ZK.
- 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.
- We recommend you to create a project from an archetype, then you can skip step 3.
- 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.zk</groupId>
<artifactId>zkmax</artifactId>
<version>${zk.version}</version>
</dependency>
<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, ${zk.version} should be 6.5.2.
- 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 and Sample of web.xml for Servlet 2.3 (For some web container which support Servlet 2.3 only (e.g. Tomcat 4.x) to setup web.xml for ZK.
- 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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:zssjsf="http://www.zkoss.org/jsf/zss">
<h:head>
<title>My First ZK Spreadsheet JSF application</title>
<zssjsf:head/>
</h:head>
<h:body>
<zssjsf:spreadsheet id="myzss" src="/WEB-INF/hellozss.xlsx" width="100%" height="100%"
maxVisibleRows="200" maxVisibleColumns="40">
</zssjsf:spreadsheet>
</h:body>
</html>
- Line 7: Declare a taglib before using Spreadsheet JSP tag is necessary.
- Line 10: The head tag generates ZK required JS and CSS.
- Line 13: Use spreadsheet JSP 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.