Create a New ZK Project"

From Documentation
m
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZKStudioEssentialsPageHeader}}
 
{{ZKStudioEssentialsPageHeader}}
 +
 +
 +
{{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 can solve the library dependency problem.}}
  
 
== Video Guide ==
 
== Video Guide ==
 
  
 
http://www.youtube.com/watch?v=Gm0IfIYa2PU&NR=1
 
http://www.youtube.com/watch?v=Gm0IfIYa2PU&NR=1
== Create a New ZK Project ==
 
  
:1. Click '''<nowiki>[File]/[New]/[Other...]/[ZK Project]</nowiki>''' in Eclipse main menu
+
= Create a New ZK Project =
:2. Type the project name. Eclipse will automatically include the default ZK package configured in the ZK Package preferences, however, you can select any other installed ZK package by selecting it from the combo box
 
  
[[Image:zk_studio_094_create_proj_1.JPG]]
+
# Click '''[File]/[New]/[Other...]/[ZK Project]''' in Eclipse main menu.
 +
#: [[Image:zk_studio_094_create_proj_0.png | center | 500px]]
 +
#: <br/>
 +
# Type the project name. Eclipse will automatically include the default ZK package configured in the ZK Package preferences, however, you can select another installed ZK release by "ZK Verstion" drop-down list. Then, click '''Next'''.
 +
#: [[Image:zk_studio_094_create_proj_1.png | center | 500px]]
 +
#: <br/>
 +
# You can modify the '''Source folders''' and '''Default output folder''' if you like. Then, click '''Next'''.
 +
#: [[Image:zk_studio_094_create_proj_4_1.png | center | 500px]]
 +
#: <br/>
 +
# You can modify '''Context root''' or '''Content directory''' if you like. Then, Click '''Finish'''.
 +
#: [[Image:zk_studio_094_create_proj_4.png | center | 500px]]
 +
#: <br/>
 +
# After clicking '''Finish''', the New Project Wizard will setup the ZK Project ready for development.
  
:3. Click '''Next'''
 
  
[[Image:zk_studio_094_create_proj_4.JPG]]
+
'''Tips:'''
 +
# The project icon's top right corner includes a ZK mark which indicates that it has ZK Studio supported:
 +
#: [[Image:hasZKLibrary.png | center |400px ]]
 +
# The ZK package source code will be automatically attached to the related jar files
 +
#: [[Image:Zk_studio_094_source_attach.png | center | 350px]]
  
:4. You can modify the following default directories, '''Context Root''', '''Content Directory''' or the '''Java Source Directory''' if you like. Then, Click '''Finish'''.
+
= Creating a New ZUL File =
  
:5. After clicking '''Finish''', the New Project Wizard will setup the ZK Project ready for development.
+
== Using the ZUL File Wizard ==
  
 +
# There are two ways to open the New ZUL File Wizard:
 +
#* Right click on a dynamic web project in "Project Explorer" view or "Package Explorer" view and select '''<nowiki>[New]/[ZUL]</nowiki>'''.
 +
#*: [[Image:NewZULFileRightClick.png | center | 500px]]
 +
#: <br/>
 +
#* Click '''<nowiki>[File]/[New]/[Other]</nowiki>''' in Eclipse's main menu and select "ZUL" under "ZK" node then click '''Next'''.
 +
#*: [[Image:NewZULFileWizard_0.png | center | 500px]]
 +
#: <br/>
 +
# Type the file name and optional page title, click '''Finish'''.
 +
#: [[Image:NewZULFileWizard.png | center | 500px]]
 +
#: <br/>
 +
# The newly created ZUL File will be opened in ZUL Editor.
  
=== '''TIPS''' ===
+
== Using the File Wizard==
:1.The project's top right icon includes a ZK mark to show that the project has ZK support:
 
  
[[Image:hasZKLibrary.png]]
+
You can create new ZUL file by selecting the '''<nowiki>[File]/[New]/[File]</nowiki>''' in Eclipse's main menu.
 +
: [[Image:NewZULFileMethod1-1.png | center | 500px]]
  
:2.The ZK package source code will be automatically attached to the related jar files
+
However, you have to enter the "'''.zul'''" extension by yourself and the newly create zul file will not contain any sample code.
 +
: [[Image:NewZULFileMethod1-2.png | center | 500px]]
  
[[Image:Zk_studio_094_source_attach.JPG]]
+
= Running the ZK Project =
  
== Creating a New ZUL File ==
+
1. Right click on the '''MyApp''' project in explorer and in the Menu dialog select '''Run As / Run on Server'''
=== Using the New File Command ===
 
You can create new ZUL file using the '''<nowiki>[File]/[New]/[File]</nowiki>''' command in Eclipse's main menu.
 
  
[[Image:NewZULFileMethod1-1.png]]
+
[[Image:studio-run-on-server.png | center | 550px]]
  
However, you have to write the "'''.zul'''" extension yourself and the newly create zul file will not contain any template code.
 
  
[[Image:NewZULFileMethod1-2.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" area and then click '''Finish'''. If you haven't created a corresponding "server runtime environment", please refer to [http://www.eclipse.org/webtools/community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html WTP Tutorials – Building and Running a Web Application].
  
=== Using the New ZUL File Wizard ===
+
[[Image:studio-run-select-server.png | center | 500px]]
:1. There are two ways to open the New ZUL File Wizard:
 
::1.1. Right click on the opened Dynamic Web Project in "Project Explorer" view or "Package Explorer" view and select '''<nowiki>[New]/[ZUL]</nowiki>'''.
 
  
[[Image:NewZULFileRightClick.png]]
 
  
::1.2. Click '''<nowiki>[File]/[New]/[Other]</nowiki>''' in Eclipse's main menu and then using the wizard to filter zul. Select zul from the listbox and then press 『』Next'』.
+
3. Eclipse will display the result in its internal browser or you can view the result in your browser.
  
:2. Type the file name and optional page title name, click '''Finish'''.<br/>
+
[[Image:studio-run-result.png | center | 550px]]
[[Image:NewZULFileWizard.png]]
 
  
  
:3. The newly created ZUL File will be opened in ZUL Editor.
+
'''Tips:'''
 
+
: There is a detailed step-by-step tutorial on using Tomcat with Eclipse here: http://www.coreservlets.com/Apache-Tomcat-Tutorial/eclipse.html
=== Running the ZUL File ===
 
To run the ZUL File (that is, to run a ZK Web application in Eclipse), please follow the instructions below:
 
  
# Configuring Apache Tomcat for Eclipse:<br/>
 
You are required to create a valid [[ZK_Installation_Guide/Before_You_Start/New_to_Java_Servlet| Apache Tomcat server]] configuration.
 
Configuration of Apache with Eclipse is done in the '''Server/Runtime Environments''' preference page. The screenshot and instruction links below will enable you to setup your server instance with Eclipse.
 
  
[[Image:ServerRuntimePreference1.png]]
 
 
 
To create a server instance to run a web application the server needs to be defined. For tutorials on how to do this please refer to the "'''Choose a Server Runtime Environment'''" section of the article [http://www.eclipse.org/webtools/community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html "'''''WTP Tutorials – Building and Running a Web Application'''''"].
 
 
You can also refer to section 2 ("'''''Define a Server Runtime'''''") of this [http://www.zkoss.org/smalltalks/eclipse/ek.html smalltalk].
 
 
 
 
'''Creating a Server instance in Eclipse's Server View:'''
 
<br/>
 
To create a server instance please follow the "'''Create a Server'''" section of the [http://www.eclipse.org/webtools/community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html "'''''WTP Tutorials – Building and Running a Web Application'''''"] article on Eclipse's website.
 
Alternatively you can refer to section 3 "'''''Define a Server Instance'''''" of [http://www.zkoss.org/smalltalks/eclipse/ek.html this smalltalk] to create a run-able server.
 
 
 
 
'''To start the server and view the result:'''
 
<br/>
 
To start the server and view the resulting zul file please refer to the sections "'''Start the Server'''" and "'''Running the Application'''" of the article [http://www.eclipse.org/webtools/community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html "'''''WTP Tutorials – Building and Running a Web Application'''''"].
 
 
 
 
'''Tips:'''
 
  
There's a detailed step-by-step tutorial on using Tomcat with Eclipse at coreservlets.com: [http://www.coreservlets.com/Apache-Tomcat-Tutorial/eclipse.html http://www.coreservlets.com/Apache-Tomcat-Tutorial/eclipse.html]
 
  
 
{{ZKStudioEssentialsPageFooter}}
 
{{ZKStudioEssentialsPageFooter}}

Latest revision as of 06:31, 19 September 2017

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 can solve the library dependency problem.

Video Guide

http://www.youtube.com/watch?v=Gm0IfIYa2PU&NR=1

Create a New ZK Project

  1. Click [File]/[New]/[Other...]/[ZK Project] in Eclipse main menu.
    Zk studio 094 create proj 0.png

  2. Type the project name. Eclipse will automatically include the default ZK package configured in the ZK Package preferences, however, you can select another installed ZK release by "ZK Verstion" drop-down list. Then, click Next.
    Zk studio 094 create proj 1.png

  3. You can modify the Source folders and Default output folder if you like. Then, click Next.
    Zk studio 094 create proj 4 1.png

  4. You can modify Context root or Content directory if you like. Then, Click Finish.
    Zk studio 094 create proj 4.png

  5. After clicking Finish, the New Project Wizard will setup the ZK Project ready for development.


Tips:

  1. The project icon's top right corner includes a ZK mark which indicates that it has ZK Studio supported:
    HasZKLibrary.png
  2. The ZK package source code will be automatically attached to the related jar files
    Zk studio 094 source attach.png

Creating a New ZUL File

Using the ZUL File Wizard

  1. There are two ways to open the New ZUL File Wizard:
    • Right click on a dynamic web project in "Project Explorer" view or "Package Explorer" view and select [New]/[ZUL].
      NewZULFileRightClick.png

    • Click [File]/[New]/[Other] in Eclipse's main menu and select "ZUL" under "ZK" node then click Next.
      NewZULFileWizard 0.png

  2. Type the file name and optional page title, click Finish.
    NewZULFileWizard.png

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

Using the File Wizard

You can create new ZUL file by selecting the [File]/[New]/[File] in Eclipse's main menu.

NewZULFileMethod1-1.png

However, you have to enter the ".zul" extension by yourself and the newly create zul file will not contain any sample code.

NewZULFileMethod1-2.png

Running the ZK Project

1. Right click on the MyApp project in 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" area and then click Finish. If you haven't created a corresponding "server runtime environment", please refer to WTP Tutorials – Building and Running a Web Application.

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


Tips:

There is a detailed step-by-step tutorial on using Tomcat with Eclipse here: http://www.coreservlets.com/Apache-Tomcat-Tutorial/eclipse.html




Last Update : 2017/09/19

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