Create and Run Your First ZK Application with Eclipse and Maven

Prepared by Senthil Muthiah

http://emrpms.blogspot.in/

Working in ZK is fun

TABLE OF CONTENTS
TABLE OF CONTENTS ................................................................................................................................................................................................................ 2 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. SOFTWARES ........................................................................................................................................................................................................................ 3 JAVA SE SETUP ................................................................................................................................................................................................................... 4 MAVEN ..................................................................................................................................................................................................................................... 7 SETTING UP THE ENVIRONMENT VARIABLES .................................................................................................................................................. 8 ECLIPSE INDIGO ...............................................................................................................................................................................................................14 TOMCAT 7 ..............................................................................................................................................................................................................................15 MAVEN M2E INTEGRATION FOR ECLIPSE ..........................................................................................................................................................16 MAVEN INTEGRATION FOR ECLIPSE WTP .........................................................................................................................................................20 CONFIGURE TOMCAT SERVER IN ECLIPSE ........................................................................................................................................................24 ZK STUDIO INSTALLATION USING OFFLINE PACKAGE OPTION ....................................................................................................27 ZK STUDIO INSTALLATION USING ECLIPSE MARKET PLACE ...........................................................................................................30 ZK SAMPLE PROJECT HELLO WORLD ..........................................................................................................................................................34 ZK CE 6.5.0 INSTALLATION ...................................................................................................................................................................................42 ADD ZK MAVEN ARCHETYPE ..................................................................................................................................................................................48 CREATE A "HELLO WORLD" APPLICATION WITH ZK MAVEN ARCHETYPE .................................................................................50

Page 2 of 54

1. Softwares
Download the following software Java SDK http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html Select : Java SE Development Kit 6u21 (jdk-6u21-windows-i586.exe) Note : The above is for windows 32 bit setup. If your windows is 64 bit setup, then select the corresponding setup. Tomcat7 http://tomcat.apache.org/download-70.cgi. Select : 32-bit Windows zip (pgp, md5) Eclipse Indigo http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/indigo/SR2/eclipse-jee-indigo-SR2win32.zip Maven 3.0.4 http://maven.apache.org/download.html Select : apache-maven-3.0.4-bin.zip ZK Studio 1.0.2 http://www.zkoss.org/download/zkstudio Select Offline installation package for Eclipse 3.7 (Indigo) ZK CE 6.5.0
http://www.zkoss.org/download/zk?utm_expid=97361-1&utm_referrer=https%3A%2F%2Fptop.only.wip.la%3A443%2Fhttp%2Fwww.zkoss.org%2Fdownload%2Fzkstudio

Before installation, goto ZK Site and create a account for you. It is free. http://www.zkoss.org/forum/signup.zul?path=http://www.zkoss.org/ Make note of user id and password, because at the end of the installation, you need to give this information.

Page 3 of 54

2. Java SE Setup
The following steps will guide you how to install Java JDK Kit. Double click jdk-6u21-windows-i586

Page 4 of 54

Select Next for the following screen

Select Next for the following screen

Page 5 of 54

Select Next for the following screen

Select Continue for the following screen

Page 6 of 54

3. Maven
In the c drive , create a folder called Maven Extract the apache-maven-3.0.4-bin into the folder Maven. The folder should look as follows.

Page 7 of 54

4. Setting up the Environment Variables

Open My Computer Properties

Click on Advance system settings. This would open up a window as shown

Page 8 of 54

Page 9 of 54

Click on Environment Variables. This would open up a window as shown

Page 10 of 54

Click on New button under System variables. This would open up a window as shown Create following variables in the under the system variables section JAVA_HOME Create an environment variable called JAVA_HOME. The Variable name should be JAVA_HOME. Variable value should be the folder path you installed Java JDK. e.g. C:\Program Files\Java\jdk1.6.0_21

MAVEN_HOME Variable Name : MAVEN_HOME Variable Value : C:\Maven

Page 11 of 54

Path Variable Select Path variable from System Variables pan and click Edit.

The default path will be as follows %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem

Note : It may vary computer to computer.

Now let us append java and Maven folder to the above path as shown here.
%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;C:\Program Files\Java\jdk1.6.0_21\bin;c:\maven\bin;

Click Ok to save and close.

Page 12 of 54

Now let us verify Both Java and Maven Path are set correctly. Open command prompt and Enter Java Version and mvn version

Page 13 of 54

5. Eclipse Indigo
IDE For java development In the c drive , create a folder called Eclipse Extract the eclipse-jee-indigo-SR2-win32.zip into the folder Eclipse. The folder should look as follows.

Page 14 of 54

6. Tomcat 7
In the c drive , create a folder called Tomcat7 Extract the apache-tomcat-7.0.32-windows-x86.zip into the folder Tomcat7. The folder should look as follows.

Page 15 of 54

7. Maven m2e Integration for Eclipse

Goto the Folder c:\Eclipse and double click Eclipse.exe Goto Help-> Eclipse Marketplace

Page 16 of 54

Enter Maven in the search box and press enter. Select Maven Integration for Eclipse and Click Install Button

Page 17 of 54

Select all the sub items as shown here and click Next. Follow the on screen instruction to complete the installation

Page 18 of 54

Finally the system will ask you to restart the eclipse as shown here.

Page 19 of 54

8. Maven Integration for Eclipse WTP

Goto the Folder c:\Eclipse and double click Eclipse.exe Goto Help-> Eclipse Marketplace

Page 20 of 54

Enter Maven Integration for Eclipse WTP in the search box and press enter. Select Maven Integration for Eclipse WTP and Click Install Button

Page 21 of 54

Select all the sub items as shown here and click Next. Follow the on screen instruction to complete the installation

Finally the system will ask you to restart the eclipse as shown here.

Page 22 of 54

Page 23 of 54

9. Configure Tomcat server in Eclipse

In the Eclipse server Window, Click New Server Wizard as shown.

Page 24 of 54

Select Tomcat 7 Server as shown and click next

Page 25 of 54

Select Tomcat 7 Installation director and JRE as shown and click Finish

Page 26 of 54

10. ZK Studio installation using Offline Package Option

Open eclipse and goto Help -> Install New Software Go to Help and Select Install New Software

Page 27 of 54

Click Add Button

Click Add and Type name : ZK Studio and for the location select the zip file zkstudio_1.0.2_indigo.zip which downloaded earlier.

Now Select zk studio 1.0.2 and Click Next

Page 28 of 54

Follow the on screen instruction to complete the installation.

Page 29 of 54

11. ZK Studio installation using eclipse Market Place

You can skip this step if you are successful for the previous step
Open Eclipse Select Help ->select Eclipse Markpetplace Enter ZK Studio and Click Go

Click Install

Page 30 of 54

After successful installation and close the eclipse and open again.

Page 31 of 54

Enter the user name and password (Registration is free)

Page 32 of 54

Page 33 of 54

12. ZK Sample Project Hello world

Open Eclipse Select File -> New -> Other and type ZK as shown here

Select ZK Project and Click Next

Page 34 of 54

Enter Project Name as Helloworld and Click New Runtime

Page 35 of 54

Note : ZK Studio comes with ZK 6.0.0 Commercial version. In the later section, we will see how to can use latest ZK CE Version which is free

Page 36 of 54

Next step to setup the server . For the target runtime option , Select Apache Tomcat v7.0 and click Next Click Browse Button

Select Tomcat7 folder and Click Finish Button.

Page 37 of 54

Here the project structure created by zk

Since we installed ZK Studio, now in the eclipse, we can change to ZK Perspective

Page 38 of 54

Goto Project Explorer and Expand Helloword. Expand Webcontent and Right Click Index.zul file And Select Run as and Select Run on Server as shown here

Page 39 of 54

Select Tomcat 7 and click finish button

Page 40 of 54

Finally you can see the output as follows

Now you can close the eclipse IDE

Page 41 of 54

13. ZK CE 6.5.0 Installation

Open Eclipse and Go to window -> Preferences -> ZK-> ZK Packages Click Add Files/Directory Select File Import

Page 42 of 54

Click File Import and Select zk-bin-6.5.0.zip

Page 43 of 54

After install, Change the Priority as follows

Now all the ZK Project will run on ZK CE Version.

Page 44 of 54

If you want to change existing Project to ZK CE Version, then Please follow the steps 1. 2. 3. 4. Right Click on the Existing ZK Project (Hello world) and Select Properties Expand ZK in the Tree Select Package Settings Select ZK-bin-6.5.0

Page 45 of 54

Click Apply Button and for the following window, select check box to overwrite the jar file

Click Finish button

Page 46 of 54

Now again, we will go back to our hello world and run in the index.zul file

Page 47 of 54

14. Add ZK Maven Archetype

Open eclipse and Go to Window -> Preference -> Maven -> Archetypes and Click Add Remote catalog as shown here

In the catalog file enter http://mavensync.zkoss.org/maven2/ and description enter as ZK Maven Archetype and click verify

Page 48 of 54

After successful verify, it will show Found 4 archetype(s) as shown here

Click ok button to close the window and for the Click ok button for Preferences window also. Now we are ready and we will create ZK Application.

Page 49 of 54

15.

Create a "Hello World" application with ZK Maven Archetype

In Eclipse, Select File -> New -> Other -> Maven Project

Page 50 of 54

Make sure that Create a simple project is unchecked and click next as shown here.

Page 51 of 54

From the Select an Archetype screen, select ZK Maven Archetype from the catalog dropdown list. And Select zk-archetype-webapp from the list. (At the time of writing this is at version 6.0).

Click Next

Page 52 of 54

Next, fill in details for group id, artifact id, version number and package name.

Page 53 of 54

Click Finish and the Eclipse status bar should say ' Creating zk-archetype-webapp ' and ' Updating Maven Dependencies '. If this is the user's first time dealing with ZK libraries, Maven will download the necessary dependencies to compile and run this example, and would be stored in .m2/repository in the user's home directory.

Page 54 of 54