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

From Documentation
m (correct highlight (via JWB))
 
(56 intermediate revisions by 8 users not shown)
Line 1: Line 1:
 
{{ZKInstallationGuidePageHeader}}
 
{{ZKInstallationGuidePageHeader}}
  
−
[http://www.zkoss.org/product/zkstudio.dsp ZK Studio] is an Eclipse plugin to simplify the development of ZK applications with Eclispe.  
+
__TOC__
 +
 
 +
[http://www.zkoss.org/product/zkstudio ZK Studio] is an Eclipse plugin to simplify the development of ZK applications with Eclipse.
 +
 
 +
If you prefer to install it manually or use with other IDE, please refer to [[ZK Installation Guide/Quick Start/Create and Run Your First ZK Application Manually|Create and Run Your First ZK Application Manually]].
  
 
=Prepare Eclipse =
 
=Prepare Eclipse =
−
==Install Eclipse==
 
  
−
#Download '''[http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/ganymede/SR2/eclipse-jee-ganymede-SR2-win32.zip Eclipse IDE for Java EE Developers]'''
 
−
#Uncompress it to a proper directory
 
  
−
=Install ZK Studio=
+
You can follow [http://books.zkoss.org/wiki/ZK_Studio_Essentials/Installation ZK Studio Installation Guide] to install ZK Studio. There are prerequisites you have to set up before installing ZK Studio:
 +
 
 +
==Java SE Development Kit (JDK)==
 +
Java SE Development Kit version 1.6 or later is required in order to run Eclipse with ZK Studio, you can download them from [http://www.oracle.com/technetwork/java/javase/downloads Oracle official website]. Note that if you are with ZK 9+ then JDK 1.8 or later is required.
 +
 
 +
==Eclipse IDE for Java EE Developers==
 +
 
 +
ZK Studio is an Eclipse Plug-in so you must install Eclipse in advance.
 +
# Visit [http://www.eclipse.org/downloads/ Eclipse download page] and download '''Eclipse IDE for Java EE Developers'''. Version 3.7 (Indigo) and 4.2(Juno) and later versions are currently supported.
 +
# Uncompress it to a proper directory
 +
# Then, Eclipse is ready to start for use.
 +
#: You can double-click <code>eclipse.exe</code> to start Eclipse under Windows.
 +
 
 +
 
 +
You can refer to [http://www.eclipse.org/webtools/community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html '''WTP Tutorials – Building and Running a Web Application'''] for a tutorial.
  
−
Follow [http://docs.zkoss.org/wiki/ZK_Studio_Installation_Guide ZK Studio Installation Guide] to install ZK Studio.
+
==Installing ZK Studio==
 +
Please follow the [[ZK_Studio_Essentials/Installation#Installation_Guide| installation guide]] to install ZK Studio.
  
 +
 +
==Application Servers==
 +
Before developing web applications in Java with ZK, you need to install an application server. Apache Tomcat is one of the most popular Web containers. Tomcat versions 6 and 7 are compatible with ZK Studio and can be downloaded from the link [http://tomcat.apache.org/ http://tomcat.apache.org/]. <br/>
 +
Download the zip file of Tomcat distribution and extract it into a proper location (with no illegal characters or space in the path name). Tomcat requires configuration before it works with Eclipse, please see [[ZK Studio Essentials]] for details.
 +
 +
 +
== Defining a Server Runtime==
 +
 +
Before deploying and testing your application, you have to install an application server (such as Tomcat) and specify the server in Eclipse. For more information on how to install an application server, please see [[ZK Installation Guide/Setting up Servers/Tomcat]].
 +
 +
To specify the server in Eclipse, please follow the instructions below:
 +
 +
#From menu goto '''Windows > Preferences'''.
 +
#Select '''Server > Runtime Environments''', then click '''Add'''
 +
#Select '''Apache > Apache Tomcat v6.0''' and then click '''Next'''
 +
#Browse to and select the root directory of the Web server installed in your computer
 +
#*For example, the root directory of '''Apache Tomcat''' might be <code>C:\Program Files\Apache Software Foundation\Tomcat 6.0</code>
 +
#*For how to install Tomcat, please refer to [[ZK_Installation_Guide/Setting_up_Servers/Tomcat|this section]]
 +
#Click '''Finish'''
  
 
= Create a "Hello World" application from scratch with ZK Sutdio =
 
= Create a "Hello World" application from scratch with ZK Sutdio =
  
 
== Create a new "ZK Project"==
 
== Create a new "ZK Project"==
−
With the release of ZK Studio you no longer have to create a new '''Dynamic Web Project''' and configure the settings for ZK! You can create a new '''ZK Project''', choose your ZK Package and sit back while ZK Studio does the rest for you.
+
Select '''File \ New \ Project...''' in Eclipse's menu and it will display a new project wizard. Click '''ZK Project''' to create a new ZK project.
 +
For detailed steps, please refer to [[ZK_Studio_Essentials/Features_of_ZK_Studio/New_ZK_Project|Create a New ZK Project]]
  
−
 
+
<!--
−
The following swf demonstrates how to create a new ZK project using Eclipse 3.4 and ZK Studio:
+
record a new video.
 +
The video below demonstrates how to create a new ZK project using Eclipse 3.4 and ZK Studio:
 
<gflash width="945" height="685">Zk_studio_094_new_zk_project.swf</gflash>
 
<gflash width="945" height="685">Zk_studio_094_new_zk_project.swf</gflash>
 +
-->
  
−
For detailed steps, please refer to [http://docs.zkoss.org/wiki/ZK_Studio_Userguide_Begin_Your_First_Web_Project#Create_a_New_ZK_Project| Create a New ZK Project]
+
{{Notice| text=We recommend you to create a ZK project with a comprehensive build tool like [[ZK%20Installation%20Guide/Quick%20Start/Create%20and%20Run%20Your%20First%20ZK%20Application%20with%20Eclipse%20and%20Maven| Maven]] or [[ZK%20Installation%20Guide/Quick%20Start/Create%20and%20Run%20Your%20First%20ZK%20Application%20with%20Gradle| Gradle]] since they also solve the library dependency problem}}
  
 
==Create a new ZUL file==
 
==Create a new ZUL file==
  
−
:1. Right click on the '''WebContent''' folder in the '''Project Explorer''' view or the '''Package Explorer''' view and select '''New > ZUL'''.
+
1. In '''Java EE''' perspective, right click on the '''WebContent''' folder in the '''Project Explorer''' view (or the '''Package Explorer''' view) and select '''New > ZUL'''.
−
[[Image:NewZULFileRightClick.png]]
+
 
−
:2. Type '''index.zul''' in the '''File name''' textbox and click '''Finish'''.
+
[[Image:studio-new-zul-step1.png | center | 550px]]
−
[[Image:NewZULFileWizard1.png]]
+
 
−
:3. The newly created ZUL File will be opened in the ZUL Editor.
+
 
−
[[Image:indexZUL.png]]
+
2. Type '''test.zul''' in the '''File name''' textbox and click '''Finish'''.
 +
 
 +
[[Image:studio-new-zul-step2.png | center | 550px]]
 +
 
 +
 
 +
3. The newly created ZUL File will be opened in the ZUL Editor.
 +
 
 +
[[Image:studio-a-zul.png | center | 550px]]
  
 
==Run the application==
 
==Run the application==
−
:1. Right click on the '''MyApp''' project in explorer and in the Menu dialog select '''Run As > Run on Server'''
+
 
−
[[Image:runonserver.png]]
+
1. Right click on the '''MyApp''' project in an explorer and in the Menu dialog select '''Run As > Run on Server'''
−
:2. Select '''Apache > Tomcat v6.0 Server''' in server type dialog and then click '''Finish'''
+
 
−
[[Image:runOnTomcat.png]]
+
[[Image:studio-run-on-server.png | center | 550px]]
−
:3. See the result in your browser.
+
 
−
[[Image:indexZULinBrowser.png]]
+
 
 +
2. If you have not defined a server before, Eclipse will show a dialog with "Manually define a new server" option selected. Then select '''Apache > Tomcat v6.0 Server''' in the server type dialog and then click '''Finish'''.
 +
 
 +
[[Image:studio-run-select-server.png | center | 550px]]
 +
 
 +
 
 +
3. Eclipse will display the result in its internal browser or you can view the result in your browser.
 +
 
 +
[[Image:studio-run-result.png | center | 550px]]
  
 
=Version History=
 
=Version History=
Line 47: Line 100:
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
−
| &nbsp;
+
| 2.0.0
−
| &nbsp;
+
| March 2013
−
| &nbsp;
+
| Update to latest status
 
|}
 
|}
  
 
{{ZKInstallationGuidePageFooter}}
 
{{ZKInstallationGuidePageFooter}}

Latest revision as of 12:34, 19 January 2022


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



ZK Studio is an Eclipse plugin to simplify the development of ZK applications with Eclipse.

If you prefer to install it manually or use with other IDE, please refer to Create and Run Your First ZK Application Manually.

Prepare Eclipse

You can follow ZK Studio Installation Guide to install ZK Studio. There are prerequisites you have to set up before installing ZK Studio:

Java SE Development Kit (JDK)

Java SE Development Kit version 1.6 or later is required in order to run Eclipse with ZK Studio, you can download them from Oracle official website. Note that if you are with ZK 9+ then JDK 1.8 or later is required.

Eclipse IDE for Java EE Developers

ZK Studio is an Eclipse Plug-in so you must install Eclipse in advance.

  1. Visit Eclipse download page and download Eclipse IDE for Java EE Developers. Version 3.7 (Indigo) and 4.2(Juno) and later versions are currently supported.
  2. Uncompress it to a proper directory
  3. Then, Eclipse is ready to start for use.
    You can double-click eclipse.exe to start Eclipse under Windows.


You can refer to WTP Tutorials – Building and Running a Web Application for a tutorial.

Installing ZK Studio

Please follow the installation guide to install ZK Studio.


Application Servers

Before developing web applications in Java with ZK, you need to install an application server. Apache Tomcat is one of the most popular Web containers. Tomcat versions 6 and 7 are compatible with ZK Studio and can be downloaded from the link http://tomcat.apache.org/.
Download the zip file of Tomcat distribution and extract it into a proper location (with no illegal characters or space in the path name). Tomcat requires configuration before it works with Eclipse, please see ZK Studio Essentials for details.


Defining a Server Runtime

Before deploying and testing your application, you have to install an application server (such as Tomcat) and specify the server in Eclipse. For more information on how to install an application server, please see ZK Installation Guide/Setting up Servers/Tomcat.

To specify the server in Eclipse, please follow the instructions below:

  1. From menu goto Windows > Preferences.
  2. Select Server > Runtime Environments, then click Add
  3. Select Apache > Apache Tomcat v6.0 and then click Next
  4. Browse to and select the root directory of the Web server installed in your computer
    • For example, the root directory of Apache Tomcat might be C:\Program Files\Apache Software Foundation\Tomcat 6.0
    • For how to install Tomcat, please refer to this section
  5. Click Finish

Create a "Hello World" application from scratch with ZK Sutdio

Create a new "ZK Project"

Select File \ New \ Project... in Eclipse's menu and it will display a new project wizard. Click ZK Project to create a new ZK project. For detailed steps, please refer to Create a New ZK Project


Icon info.png Notice: We recommend you to create a ZK project with a comprehensive build tool like Maven or Gradle since they also solve the library dependency problem

Create a new ZUL file

1. In Java EE perspective, right click on the WebContent folder in the Project Explorer view (or the Package Explorer view) and select New > ZUL.

Studio-new-zul-step1.png


2. Type test.zul in the File name textbox and click Finish.

Studio-new-zul-step2.png


3. The newly created ZUL File will be opened in the ZUL Editor.

Studio-a-zul.png

Run the application

1. Right click on the MyApp project in an explorer and in the Menu dialog select Run As > Run on Server

Studio-run-on-server.png


2. If you have not defined a server before, Eclipse will show a dialog with "Manually define a new server" option selected. Then select Apache > Tomcat v6.0 Server in the server type dialog and then click Finish.

Studio-run-select-server.png


3. Eclipse will display the result in its internal browser or you can view the result in your browser.

Studio-run-result.png

Version History

Version Date Content
2.0.0 March 2013 Update to latest status



Last Update : 2022/01/19

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Installation_Guide/Quick_Start/Create_and_Run_Your_First_ZK_Application_with_Eclipse_and_ZK_Studio&oldid=53533"