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=http%3A%2F%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
