Create and Run Your First ZK Application with Eclipse and Maven"

From Documentation
Line 53: Line 53:
 
----
 
----
  
== How to run Maven project on Run-Jetty-Run (Optional) ==
+
==Run the application==
Notice that [http://code.google.com/p/run-jetty-run/ Run-Jetty-Run] is optional. The speed of deployment is much faster, but the server is [http://jetty.codehaus.org/jetty/ Jetty] embedded in Run-Jetty-Run. If you prefer to use your own server, you could skip this step.
+
#Go to '''Run As''' > '''Maven build...'''
 +
#: [[File:ZK_Installation_Guide_Quick_Start_Maven_run_project-01.png]]
 +
#In the goals textbox enter ''jetty:stop jetty:run'' and check ''Skip Tests'' then click "Apply" then "Run".
 +
#: [[File:ZK_Installation_Guide_Quick_Start_Maven_run_project-02.png]]
 +
#View the result in your browser.  
 +
[http://localhost:8080/mywebapp/index.zul http://localhost:8080/mywebapp/index.zul]
  
#Go to '''Run Configurations'''
+
== Packaging your porject into a Web Application Archive (WAR)==
#: [[File:ZK_Installation_Guide_maven_Archetype_run1.png]]
 
#Double click on '''Jetty Webapp'''
 
#* It will automatically fill-out '''Project''' / '''Ports''' / '''Context''' / '''WebApp Dir '''
 
#: [[File:ZK_Installation_Guide_maven_Archetype_run2.png]]
 
#Click '''Run''' and start browsing local ZK application at http://127.0.0.1:8080/myapp/
 
 
 
== Packing your project ==
 
 
#Go to '''Run As''' > '''Maven install'''
 
#Go to '''Run As''' > '''Maven install'''
 
#: [[File:ZK_Installation_Guide_maven_Archetype_pak1.png]]
 
#: [[File:ZK_Installation_Guide_maven_Archetype_pak1.png]]
 
#The project will then be packed into a war file and a zip file with source code.
 
#The project will then be packed into a war file and a zip file with source code.
#: [[File:ZK_Installation_Guide_maven_Archetype_pak2.png]]
+
#: [[File:ZK_Installation_Guide_Quick_Start_Maven_package_project.png]]
 +
 
  
== Use the command line version of Maven to create a project==
+
= Use the command line version of Maven to create a project=
 +
==Create a Maven project==
 
*For instructions on how to set up maven, please refer to [http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html Maven].
 
*For instructions on how to set up maven, please refer to [http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html Maven].
 
*Go to the folder in Eclipse workspace, then run the following command:
 
*Go to the folder in Eclipse workspace, then run the following command:
Line 75: Line 75:
 
*It will then ask users to enter the values for ''groupId'', the ''artifactId'' and the ''version'' of the project to create and the base package for the sources.
 
*It will then ask users to enter the values for ''groupId'', the ''artifactId'' and the ''version'' of the project to create and the base package for the sources.
 
*It will then ask for confirmation of the configuration and perform the creation of the project.
 
*It will then ask for confirmation of the configuration and perform the creation of the project.
*In the following example, webapp archetype (number 2) is selected and ''groupId'' is set to '''org.test''', ''artifactId'' to '''myapp''', ''version'' to '''1.0-SNAPSHOT''' and ''package'' to '''org.test.myapp'''.
+
*In the following example, webapp archetype (number 3) is selected and ''groupId'' is set to '''com.foo''', ''artifactId'' to '''mywebapp''', ''version'' to '''0.8.0'' and ''package'' to '''com.foo''''.
 
<source lang="dos" >
 
<source lang="dos" >
 
$ mvn archetype:generate -DarchetypeCatalog=http://mavensync.zkoss.org/maven2/
 
$ mvn archetype:generate -DarchetypeCatalog=http://mavensync.zkoss.org/maven2/
Line 88: Line 88:
 
[INFO] [archetype:generate {execution: default-cli}]
 
[INFO] [archetype:generate {execution: default-cli}]
 
[INFO] Generating project in Interactive mode
 
[INFO] Generating project in Interactive mode
[INFO] No archetype defined. Using maven-archetype-quickstart (org.apache.maven.archetypes:maven-archetype-quickstart:1.0)
+
[INFO] No archetype defined. Using maven-archetype-quickstart (org.apache.maven.
 +
archetypes:maven-archetype-quickstart:1.0)
 
Choose archetype:
 
Choose archetype:
1: http://mavensync.zkoss.org/maven2/ -> zk-archetype-component (zk-archetype-component)
+
1: http://mavensync.zkoss.org/maven2/ -> zk-archetype-component (An archetype th
2: http://mavensync.zkoss.org/maven2/ -> zk-archetype-webapp (zk-archetype-webapp)
+
at generates a starter ZK component project)
Choose a number: : 2
+
2: http://mavensync.zkoss.org/maven2/ -> zk-archetype-extension (An archetype th
Downloading: http://mavensync.zkoss.org/maven2//org/zkoss/zk-archetype-webapp/0.8.0/zk-archetype-webapp-0.8.0.jar
+
at generates a starter ZK extension project)
11K downloaded  (zk-archetype-webapp-0.8.0.jar)
+
3: http://mavensync.zkoss.org/maven2/ -> zk-archetype-webapp (An archetype that
Downloading: http://mavensync.zkoss.org/maven2//org/zkoss/zk-archetype-webapp/0.8.0/zk-archetype-webapp-0.8.0.pom
+
generates a starter ZK CE webapp project)
1K downloaded  (zk-archetype-webapp-0.8.0.pom)
+
4: http://mavensync.zkoss.org/maven2/ -> zk-ee-eval-archetype-webapp (An archety
Define value for property 'groupId': : org.test
+
pe that generates a starter ZK EE-eval webapp project)
Define value for property 'artifactId': : myapp
+
Choose a number: : 3
Define value for property 'version': 1.0-SNAPSHOT:
+
Define value for property 'groupId': : com.foo
Define value for property 'package': org.test: org.test.myapp
+
Define value for property 'artifactId': : mywebapp
[INFO] Using property: zk-version-since = 5.0.6
+
Define value for property 'version': 1.0-SNAPSHOT: 0.8.0
 +
Define value for property 'package': com.foo:
 +
[INFO] Using property: zk-version-since = 6.0.1
 
Confirm properties configuration:
 
Confirm properties configuration:
groupId: org.test
+
groupId: com.foo
artifactId: myapp
+
artifactId: mywebapp
version: 1.0-SNAPSHOT
+
version: 0.8.0
package: org.test.myapp
+
package: com.foo
zk-version-since: 5.0.6
+
zk-version-since: 6.0.1
 
Y:
 
Y:
 
[INFO] ------------------------------------------------------------------------
 
[INFO] ------------------------------------------------------------------------
 
[INFO] BUILD SUCCESSFUL
 
[INFO] BUILD SUCCESSFUL
 
[INFO] ------------------------------------------------------------------------
 
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 22 seconds
+
[INFO] Total time: 29 seconds
[INFO] Finished at: Thu Jul 28 12:07:19 CST 2011
+
[INFO] Finished at: Fri Jun 22 16:55:27 CST 2012
[INFO] Final Memory: 12M/150M
+
[INFO] Final Memory: 13M/150M
 
[INFO] ------------------------------------------------------------------------
 
[INFO] ------------------------------------------------------------------------
 
</source>
 
</source>
Line 120: Line 123:
 
== Import a Maven project into Eclipse==
 
== Import a Maven project into Eclipse==
 
*'''[File]''' -> '''[Import]''' -> '''[Maven]''' -->  '''[Existing Maven Projects]'''
 
*'''[File]''' -> '''[Import]''' -> '''[Maven]''' -->  '''[Existing Maven Projects]'''
*:[[File:ZK_Installation_Guide_Maven_Archetype_import1.png]]
+
*:[[File:ZK_Installation_Guide_Quick_Start_Maven_import.png]]
 
*After this, the user should now get a new project in the Package explorer.
 
*After this, the user should now get a new project in the Package explorer.
*:[[File:ZK_Installation_Guide_Maven_Archetype_step6.png]]
+
*:[[File:ZK_Installation_Guide_Quick_Start_Maven_New_project-04.png]]
  
  

Revision as of 09:07, 22 June 2012


DocumentationZK Installation GuideQuick StartCreate and Run Your First ZK Application with Eclipse and Maven
Create and Run Your First ZK Application with Eclipse and Maven



M2eclipse is the first and most mature of the projects aimed at integrating Apache Maven within the Eclipse IDE.

Prepare Eclipse

Install Eclipse

Please follow the installation guide for your Eclipse:

Install Eclipse

Install M2eclipse

Please follow the installation guide for your M2eclipse:

Install M2eclipse

Add ZK Maven Archetype

  • [Window] -> [Preferences] -> [Maven] --> [Archetypes], click Add Remote Catalog and type in the catalog file as illustrated:
    ZK Installation Guide Quick Start Create and Run with Eclipse and Maven.png
http://mavensync.zkoss.org/maven2/
  • Click Verify and then OK to add the catalog.
    • If the Remote catalog is empty.[1]

  1. If an error message appears stating that the Remote catalog is empty, this is most likely due to a bug in the m2eclipse plugin in v0.12.x, MNGECLIPSE-2757. Until m2eclipse 0.13.x or newer versions are released and available, there are two possible workarounds:
    1. Install the "older version" 0.10.x from the Installing m2eclipse website. Users will first need to uninstall m2eclipse 0.12.x, restart, and then install 0.10.x available from the following site:
      http://m2eclipse.sonatype.org/sites/m2e/0.10.2.20100623-1649/
    2. Install the “newer version” from the following site: http://download.eclipse.org/technology/m2e/releases You first will need to uninstall m2eclipse 0.12.x, restart Eclipse before you can install the “newer” version from the website above. (Please note: the newer version of M2eclipse plugin is not compatible with the old Maven Project. Therefore you must enable your maven project with the latest M2eclipse plugin from the Installing m2eclipse website.)
    3. Create the plugin from the archetype using the Maven command line tool mvn, then use import existing maven project to add the generated project to Eclipse. For more details, please refer to Use the command line version of Maven to create a project.

Create a "Hello World" application with ZK Maven Archetype

Create a Maven Project

  • [File] -> [New] -> [Other] --> [Maven Project]
    ZK Installation Guide Quick Start Maven New project-01.png
  • Make sure Create a simple project is unticked in the first screen of the New Maven Project wizard and click Next >.
    ZK Installation Guide Maven Archetype step1.png
  • From the Select an Archetype screen, select ZK Maven Archetype from the catalog dropdown list.
    ZK Installation Guide Quick Start Maven New project-02.png
  • Select zk-archetype-webapp from the list. (At the time of writing this is at version 6.0).
  • Next, fill in details for group id, artifact id, version number and package name.
    ZK Installation Guide Quick Start Maven New project-03.png
    • If the property zk-version-since is missing.[1]
  • 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.
    ZK Installation Guide Quick Start Maven New project-04.png

  1. Users who are running this wizard for the first time, ZK Archetype would not have been downloaded into m2eclipse yet, and as a result may not populate the zk-version-since property correctly, leading to an error message like the following:
    Unable to create project from archetype [org.zkoss:zk-archetype-webapp:6.0 -> http://mavensync.zkoss.org/maven2/], 
    Archetype org.zkoss:zk-archetype-webapp:6.0 is not configured property ''zk-version-since'' is missing.
    

    The simple workaround for this problem is to just try again after clicking ‘Finish’ to end the ZK Maven web project wizard. When re-running the wizard, the zk-version-since property should appear in the list this time.

    
    

Run the application

  1. Go to Run As > Maven build...
    ZK Installation Guide Quick Start Maven run project-01.png
  2. In the goals textbox enter jetty:stop jetty:run and check Skip Tests then click "Apply" then "Run".
    ZK Installation Guide Quick Start Maven run project-02.png
  3. View the result in your browser.
http://localhost:8080/mywebapp/index.zul

Packaging your porject into a Web Application Archive (WAR)

  1. Go to Run As > Maven install
    ZK Installation Guide maven Archetype pak1.png
  2. The project will then be packed into a war file and a zip file with source code.
    ZK Installation Guide Quick Start Maven package project.png


Use the command line version of Maven to create a project

Create a Maven project

  • For instructions on how to set up maven, please refer to Maven.
  • Go to the folder in Eclipse workspace, then run the following command:
  • Calling archetype:generate -DarchetypeCatalog=http://mavensync.zkoss.org/maven2/ - the plugin will first ask to choose the archetype from the zk catalog, please just enter the number of the archetype.
  • It will then ask users to enter the values for groupId, the artifactId and the version of the project to create and the base package for the sources.
  • It will then ask for confirmation of the configuration and perform the creation of the project.
  • In the following example, webapp archetype (number 3) is selected and groupId is set to com.foo', artifactId to mywebapp, version to 0.8.0 and package to com.foo'.
$ mvn archetype:generate -DarchetypeCatalog=http://mavensync.zkoss.org/maven2/
[INFO] Scanning for projects...
[INFO] Searching repository for plugin with prefix: 'archetype'.
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Default Project
[INFO]    task-segment: [archetype:generate] (aggregator-style)
[INFO] ------------------------------------------------------------------------
[INFO] Preparing archetype:generate
[INFO] No goals needed for project - skipping
[INFO] [archetype:generate {execution: default-cli}]
[INFO] Generating project in Interactive mode
[INFO] No archetype defined. Using maven-archetype-quickstart (org.apache.maven.
archetypes:maven-archetype-quickstart:1.0)
Choose archetype:
1: http://mavensync.zkoss.org/maven2/ -> zk-archetype-component (An archetype th
at generates a starter ZK component project)
2: http://mavensync.zkoss.org/maven2/ -> zk-archetype-extension (An archetype th
at generates a starter ZK extension project)
3: http://mavensync.zkoss.org/maven2/ -> zk-archetype-webapp (An archetype that
generates a starter ZK CE webapp project)
4: http://mavensync.zkoss.org/maven2/ -> zk-ee-eval-archetype-webapp (An archety
pe that generates a starter ZK EE-eval webapp project)
Choose a number: : 3
Define value for property 'groupId': : com.foo
Define value for property 'artifactId': : mywebapp
Define value for property 'version': 1.0-SNAPSHOT: 0.8.0
Define value for property 'package': com.foo:
[INFO] Using property: zk-version-since = 6.0.1
Confirm properties configuration:
groupId: com.foo
artifactId: mywebapp
version: 0.8.0
package: com.foo
zk-version-since: 6.0.1
Y:
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 29 seconds
[INFO] Finished at: Fri Jun 22 16:55:27 CST 2012
[INFO] Final Memory: 13M/150M
[INFO] ------------------------------------------------------------------------

Import a Maven project into Eclipse

  • [File] -> [Import] -> [Maven] --> [Existing Maven Projects]
    ZK Installation Guide Quick Start Maven import.png
  • After this, the user should now get a new project in the Package explorer.
    ZK Installation Guide Quick Start Maven New project-04.png


Version History

Version Date Content
     



Last Update : 2012/06/22

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.