java eclipse zk maven tomcat setup

Create and Run Your First ZK Application with Eclipse and Maven

Prepared by Senthil Muthiah http://emrpms.blogspot.in/

Working in ZK is fun

of 54

TABLE OF CONTENTS

TABLE OF CONTENTS ................................................................................................................................................................................................................ 2

1. SOFTWARE’S ........................................................................................................................................................................................................................ 3

2. JAVA SE SETUP ................................................................................................................................................................................................................... 4

3. MAVEN ..................................................................................................................................................................................................................................... 7

4. SETTING UP THE ENVIRONMENT VARIABLES .................................................................................................................................................. 8

5. ECLIPSE INDIGO ...............................................................................................................................................................................................................14

6. TOMCAT 7 ..............................................................................................................................................................................................................................15

7. MAVEN M2E INTEGRATION FOR ECLIPSE ..........................................................................................................................................................16

8. MAVEN INTEGRATION FOR ECLIPSE WTP .........................................................................................................................................................20

9. CONFIGURE TOMCAT SERVER IN ECLIPSE ........................................................................................................................................................24

10. ZK STUDIO INSTALLATION USING OFFLINE PACKAGE OPTION ....................................................................................................27

11. ZK STUDIO INSTALLATION USING ECLIPSE MARKET PLACE ...........................................................................................................30

12. ZK SAMPLE PROJECT – HELLO WORLD ..........................................................................................................................................................34

13. ZK CE 6.5.0 INSTALLATION ...................................................................................................................................................................................42

14. ADD ZK MAVEN ARCHETYPE ..................................................................................................................................................................................48

15. CREATE A "HELLO WORLD" APPLICATION WITH ZK MAVEN ARCHETYPE .................................................................................50

of 54

1. Software’s

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-SR2-

win32.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.

of 54

2. Java SE Setup

The following steps will guide you how to install Java JDK Kit.

Double click “jdk-6u21-windows-i586”

of 54

Select Next for the following screen


of 54


Select Continue for the following screen

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.

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

of 54

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

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

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.

of 54

Now let us verify Both Java and Maven Path are set correctly.

Open command prompt and Enter “Java –Version” and “mvn –version”

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.

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.

of 54

7. Maven m2e Integration for Eclipse

Goto the Folder c:\Eclipse and double click “Eclipse.exe”

Goto Help-> Eclipse Marketplace

of 54

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

of 54

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

of 54

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

of 54

8. Maven Integration for Eclipse WTP

Goto the Folder c:\Eclipse and double click “Eclipse.exe”

Goto Help-> Eclipse Marketplace

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

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.

of 54

9. Configure Tomcat server in Eclipse

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

of 54

Select Tomcat 7 Server as shown and click next

of 54

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

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”

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

of 54

Follow the on screen instruction to complete the installation.

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

of 54

After successful installation and close the eclipse and open again.

of 54

Enter the user name and password (Registration is free)

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

of 54

Enter Project Name as “Helloworld” and Click “New Runtime”

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

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.

of 54

Here the project structure created by zk

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

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

of 54

Select Tomcat 7 and click finish button

of 54

Finally you can see the output as follows

Now you can close the eclipse IDE

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

of 54

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

of 54

After install, Change the Priority as follows

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

of 54

If you want to change existing Project to ZK CE Version, then Please follow the steps

1. Right Click on the Existing ZK Project (Hello world) and Select Properties

2. Expand ZK in the Tree 3. Select Package Settings 4. Select ZK-bin-6.5.0

of 54

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

Click Finish button

of 54

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

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

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.

of 54

15. Create a "Hello World" application with ZK Maven Archetype

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

of 54

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

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

of 54

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

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.

java eclipse zk maven tomcat setup

Documents

zk maven archetype

zk studio installation

zk application

eclipse wtp

eclipse indigo

maven integration

eclipse market place

maven m2e integration