Create a Project with Eclipse

This section guides you through how to setup a project and use ZK in Eclipse. If you want to know how to build the application with ZK first, please skip it and start from Declaring Domain Class. To begin, we will start with how to prepare an environment to build a ZK web application in including setting the IDE, installing ZK, and running an application in a server.

Setup Eclipse

In this tutorial, Eclipse IDE 3.7 (indigo) for Java EE developer is used to demonstrate the building of the car catalog application. (Download Eclipse here, extract the downloaded zip file to a folder and execute eclipse.exe to run Eclipse.)

In order to edit ZK UI pages in Eclipse, add "zul" (ZK UI page's file extension name) as a content type of XML format following these steps below:

1. Select Window \ Preferences to open Preferences window
2. On the left, select General --> Content Types. On right, expand Text node in "Content types" box and select XML
3. Click Add and type in the content type you wish to add which is *.zul in this case, then click OK

After this has been done, Eclipse will use XML editor to open your zul file.

Install ZK in a Web Project

Download ZK

Download the ZK CE first (file name would look like zk-bin-[version].zip) and extract it to a folder.

Create a Project

To build a web application, first, create a "Dynamic Web Project" in Eclipse:

1. Select File \ New \ Dynamic Web Project
2. Enter tutorial in Project name and keep everything else default.

• You can leave "Target runtime" as "none".
• Notice that we set Dynamic web module version to 3.0 because we want to use Servlet 3.0 to eliminate application configuration.

Install ZK JAR

To use ZK in your project, you have to copy ZK JAR files into your project's library folder.

Copy the JAR files from the following directory to WebContent\WEB-INF\lib:

• {YOUR_ZK_UNZIP_FOLDER}\dist\lib
• {YOUR_ZK_UNZIP_FOLDER}\dist\lib\ext

If you prefer to use an application server that supports older (< 3.0) Servlet specification or JDK 1.5, you need to add more configuration on web.xml. Please refer to ZK Installation Guide.

Create a Simple Page

After installation, you can create a simple zul to verify if the installation has been successful or not.

In Eclipse,

1. Select File \ New \ File (or File \ New \ Other \ File ) to add a new file, hello.zul, under WebContent.
2. Click Source tab to modify source.

   

   creating a zul-file in eclipse's xml editor

3. Copy and paste the following sample code into hello.zul and save.

hello.zul

 <window title="My First ZK Application" border="normal">
 	Hello World!
 </window>

Now, in Project Explorer view your project would look something like:

If you cannot find Project Explorer view, select menu Window \ Show View \ Project Explorer to open it.

Run an Application

Before running a web application, we must create a server in Eclipse. Select Window \ Preferences to open Preferences window and select Server \ Runtime Environments from the left. Click Add to add a server runtime environment.

Select Apache \ Tomcat v7.0 Server as it supports Servlet 3.0 and tick Create a new local server, then click Next.

If you use JDK 1.5, you could choose Tomcat v6.0 but you will need more configuration on web.xml. Please refer to ZK Installation Guide in References .

If you have installed Tomcat 7 previously, simply provide the directory path. If you haven't, proceed with the following steps:

1. Click Download and Install and choose a folder.

   Notice that the installation path must not contain non-ASCII characters.

   

2. Accept the license agreement and wait.

   Eclipse will show an error message before installation completes, please ignore this message.

   

   Please wait and do not interrupt the installation before it completes to ensure that the installation has been done properly.

   

   Eclipse will download and install Tomcat into the folder you have specified.

3. After the installation has been completed, click Finish

Now you should be able to see a new entry in Server runtime environments.

Right click on hello.zul and select Run As \ Run on Server to run this zul on an application server.

Choose an existing Tomcat 7. Yon can also tick Always use this server when running this project option to avoid choosing a server each time you run the application in the future. Click Finish and wait for the server to start running.

After the server starts running, Eclipse will open a browser and connect to http://localhost:8080/tutorial/hello.zul automatically . If you can see the following image, then your project is ready to use ZK.

You can come back and follow these steps to run your application during this tutorial

Import and Run Example Application

We have prepared an Eclipse project zip file that contains the complete source code, you can download and import it to your Eclipse without having to start from scratch.

To use example application, follow the steps below:

1. Download example application project zip file.
2. In Eclipse, select File \ Import \ General \ Existing Projects into Workspace, choose Select archive file to import example application zip file as a project into your Eclipse.
3. Then follow the instructions from Run an Application to run it.