Create a New ZK Project"

From Documentation
(update for zkstudio 2.0.0 release)
Line 6: Line 6:
 
http://www.youtube.com/watch?v=Gm0IfIYa2PU&NR=1
 
http://www.youtube.com/watch?v=Gm0IfIYa2PU&NR=1
  
−
== Create a New ZK Project ==
+
= Create a New ZK Project =
  
−
# Click '''<nowiki>[File]/[New]/[Other...]/[ZK Project]</nowiki>''' in Eclipse main menu.
+
# Click '''[File]/[New]/[Other...]/[ZK Project]''' in Eclipse main menu.
−
#: [[Image:zk_studio_094_create_proj_0.png]]
+
#: [[Image:zk_studio_094_create_proj_0.png | center | 500px]]
−
# 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. Then, click '''Next'''.
+
#: <br/>
−
#: [[Image:zk_studio_094_create_proj_1.png]]
+
# 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'''.
 
# 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]]
+
#: [[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'''.
 
# You can modify '''Context root''' or '''Content directory''' if you like. Then, Click '''Finish'''.
−
#: [[Image:zk_studio_094_create_proj_4.png]]
+
#: [[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.
 
# After clicking '''Finish''', the New Project Wizard will setup the ZK Project ready for development.
  
  
 
'''Tips:'''
 
'''Tips:'''
−
# The project's top right icon includes a ZK mark to show that the project has ZK Studio support:
+
# The project icon's top right corner includes a ZK mark which indicates that it has ZK Studio supported:
−
#: [[Image:hasZKLibrary.png]]
+
#: [[Image:hasZKLibrary.png | center |400px ]]
 
# The ZK package source code will be automatically attached to the related jar files
 
# The ZK package source code will be automatically attached to the related jar files
−
#: [[Image:Zk_studio_094_source_attach.png]]
+
#: [[Image:Zk_studio_094_source_attach.png | center | 350px]]
  
−
== Creating a New ZUL File ==
+
= Creating a New ZUL File =
  
−
=== Using the New File Command ===
+
== Using the ZUL File Wizard ==
  
−
You can create new ZUL file using the '''<nowiki>[File]/[New]/[File]</nowiki>''' command in Eclipse's main menu.
+
# There are two ways to open the New ZUL File Wizard:
−
: [[Image:NewZULFileMethod1-1.png]]
+
#* 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.
 +
 
 +
== Using the File Wizard==
 +
 
 +
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]]
 +
 
 +
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]]
 +
 
 +
= Running the ZK Project =
 +
 
 +
1. Right click on the '''MyApp''' project in explorer and in the Menu dialog select '''Run As / Run on Server'''
 +
 
 +
[[Image:studio-run-on-server.png | center | 550px]]
 +
 
 +
 
 +
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].
  
−
However, you have to write the "'''.zul'''" extension yourself and the newly create zul file will not contain any template code.
+
[[Image:studio-run-select-server.png | center | 500px]]
−
: [[Image:NewZULFileMethod1-2.png]]
 
  
−
=== Using the New ZUL File Wizard ===
 
  
−
# There are two ways to open the New ZUL File Wizard:
+
3. Eclipse will display the result in its internal browser or you can view the result in your browser.
−
#* 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]]
 
−
#* 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 click '''Next'''.
 
−
#*: [[Image:NewZULFileWizard_0.png]]
 
−
# Type the file name and optional page title name, click '''Finish'''.
 
−
#: [[Image:NewZULFileWizard.png]]
 
−
# The newly created ZUL File will be opened in ZUL Editor.
 
  
−
== Running the ZK Project ==
+
[[Image:studio-run-result.png | center | 550px]]
  
−
To run the ZK Project (that is, to run a ZK Web application in Eclipse), please follow the instructions below:
 
−
# '''Configuring Apache Tomcat for Eclipse'''
 
−
#* 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.
 
−
#*: [[Image:ServerRuntimePreference1.png|800px]]
 
−
#* 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].
 
−
# '''Creating a Server instance in Eclipse's Server View'''
 
−
#: To create a server instance, please follow the '''''Create a Server''''' section of the article [http://www.eclipse.org/webtools/community/tutorials/BuildJ2EEWebApp/BuildJ2EEWebApp.html WTP Tutorials – Building and Running a Web Application] on Eclipse's website.
 
−
# '''To start the server and view the result'''
 
−
#: 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:'''
 
'''Tips:'''
−
: There's a detailed step-by-step tutorial on using Tomcat with Eclipse here: http://www.coreservlets.com/Apache-Tomcat-Tutorial/eclipse.html
+
: There is a detailed step-by-step tutorial on using Tomcat with Eclipse here: http://www.coreservlets.com/Apache-Tomcat-Tutorial/eclipse.html
 +
 
 +
 
  
  
 
{{ZKStudioEssentialsPageFooter}}
 
{{ZKStudioEssentialsPageFooter}}

Revision as of 07:32, 9 April 2013

DocumentationZK Studio EssentialsBegin Your First ZK ProjectCreate a New ZK Project
Create a New ZK Project




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 : 2013/04/09

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Studio_Essentials/Begin_Your_First_ZK_Project/Create_a_New_ZK_Project&oldid=36837"