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

From Documentation
(Created page with '{{ZKInstallationGuidePageHeader}} [http://www.zkoss.org/product/zkstudio.dsp ZK Studio] is an Eclipse plugin to simplify the development of ZK applications with Eclispe. =Prep…')
 
m
 
(7 intermediate revisions by 3 users not shown)
Line 8: Line 8:
  
 
== Instalando K Studio ==
 
== Instalando K Studio ==
Sigue paso a paso el siguiente tutorial [http://docs.zkoss.org/wiki/Installation_Guide_for_Eclipse_3.4_(Ganymede) Installation Guide] to install [http://www.zkoss.org/product/zkstudio.dsp ZK Studio].
+
Sigue paso a paso el siguiente tutorial [[Small_Talks/2009/November/Installation_Guide_for_Eclipse_3.4_%28Ganymede%29 |Installation Guide]] to install [http://www.zkoss.org/product/zkstudio.dsp ZK Studio].
  
 
==Definiendo el Servidor de aplicaciones==
 
==Definiendo el Servidor de aplicaciones==
Line 17: Line 17:
 
#Haz Click '''Finish'''
 
#Haz Click '''Finish'''
  
=Creando una aplicación "hola mundo" desde cero (con un IDE)=
+
=Creando una aplicación "hola mundo" desde cero (con un ZK Studio)=
 
 
<font style="color:red">'''Nota'''</font>: Asegúrate de haber instalado "Java JDK","Servidor de aplicaciones" y "ZK Studio" en tu PC o dirígete a  [[QuickStart_Guide#Preparing an environment to run ZK | previous chapter]].
 
 
 
  
  
Line 29: Line 26:
 
El siguiente swf demuestra cómo crear un nuevo proyecto ZK usando Eclipse 3.4 y ZK Studio:
 
El siguiente swf demuestra cómo crear un nuevo proyecto ZK usando Eclipse 3.4 y ZK Studio:
  
<gflash>945 685 http://docs.zkoss.org/images/e/e6/Zk_studio_094_new_zk_project.swf</gflash>
+
<gflash width="945" height="685">Zk_studio_094_new_zk_project.swf</gflash>
  
Para más detalles, por favor, dirígete a [[ZK_Studio_Userguide_Begin_Your_First_Web_Project#Create_a_New_ZK_Project| Create a New ZK Project]]
+
Para más detalles, por favor, dirígete a [[ZK_Studio_Essentials/Features_of_ZK_Studio/New_ZK_Project| Create a New ZK Project]]
  
 
==Creando un nuevo fichero ZUL==
 
==Creando un nuevo fichero ZUL==
Line 37: Line 34:
 
:1. Haz click con el botón derecho en la carpeta '''WebContent''' en la vista '''Explorado de Proyecto'''o la vista '''Explorado de paquetes''' y selecciona '''New> ZUL'''.
 
:1. Haz click con el botón derecho en la carpeta '''WebContent''' en la vista '''Explorado de Proyecto'''o la vista '''Explorado de paquetes''' y selecciona '''New> ZUL'''.
 
[[Image:NewZULFileRightClick.png]]
 
[[Image:NewZULFileRightClick.png]]
:2. Teclea '''index.zul''' en el nombre de fichero y haz click en '''Finish''' (terminar).
+
:2. Teclea '''test.zul''' en el nombre de fichero y haz click en '''Finish''' (terminar).
 
[[Image:NewZULFileWizard1.png]]
 
[[Image:NewZULFileWizard1.png]]
 
:3. El nuevo fichero creado será abierto con el editor ZUL.
 
:3. El nuevo fichero creado será abierto con el editor ZUL.
[[Image:indexZUL.png]]
+
[[Image:testZUL.png]]
  
 
==Running the application==
 
==Running the application==
 
:1. Haz click con el botón derecho del ratón en "MiAplicacion" y en el menú emergente selecciona "Ejecutar como > Ejecutar en servidor"''
 
:1. Haz click con el botón derecho del ratón en "MiAplicacion" y en el menú emergente selecciona "Ejecutar como > Ejecutar en servidor"''
[[Image:runonserver.png|500px]]
+
[[Image:runonserver.png]]
 
:2. Selecciona  '''Apache > Tomcat v6.0 Server''' en la ventana de diálogo del servidor y haz click en '''Finish''' (terminar)
 
:2. Selecciona  '''Apache > Tomcat v6.0 Server''' en la ventana de diálogo del servidor y haz click en '''Finish''' (terminar)
[[Image:runOnTomcat.png|500px]]
+
[[Image:runOnTomcat.png]]
 
:3. Mira el resultado en tu navegador.
 
:3. Mira el resultado en tu navegador.
[[Image:indexZULinBrowser.png|500px]]
+
[[Image:testZULinBrowser.png]]
  
 
=Version History=
 
=Version History=

Latest revision as of 08:24, 19 January 2011


DocumentationZK Installation Guide esQuick 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 Eclispe.

Preparando el IDE Eclipse

Instalando Eclipse

  1. Descarga e instalalo desde Eclipse IDE for Java EE Developers

Instalando K Studio

Sigue paso a paso el siguiente tutorial Installation Guide to install ZK Studio.

Definiendo el Servidor de aplicaciones

  1. desde el menu ve a Windows > Preferences...
  2. Selecciona Server > Runtime Environments, then click Add
  3. Selecciona Apache > Apache Tomcat v6.0 and haz click en Next
  4. Navega hasta seleccionar Apache Tomcat directorio raíz e.g. C:\Program Files\Apache Software Foundation\Tomcat 6.0
  5. Haz Click Finish

Creando una aplicación "hola mundo" desde cero (con un ZK Studio)

Creando un nuevo Proyecto ZK

Con la versión liberada de ZK Studio no tendrás que crear un nuevo proyecto web dinámico y configurar las opción para ZK. Puedes crear un nuevo proyecto "ZK", elegir tu paquete y recostarte mientras ZK Studio hace el resto por tí.


El siguiente swf demuestra cómo crear un nuevo proyecto ZK usando Eclipse 3.4 y ZK Studio:

Para más detalles, por favor, dirígete a Create a New ZK Project

Creando un nuevo fichero ZUL

1. Haz click con el botón derecho en la carpeta WebContent en la vista Explorado de Proyectoo la vista Explorado de paquetes y selecciona New> ZUL.

NewZULFileRightClick.png

2. Teclea test.zul en el nombre de fichero y haz click en Finish (terminar).

NewZULFileWizard1.png

3. El nuevo fichero creado será abierto con el editor ZUL.

TestZUL.png

Running the application

1. Haz click con el botón derecho del ratón en "MiAplicacion" y en el menú emergente selecciona "Ejecutar como > Ejecutar en servidor"

Runonserver.png

2. Selecciona Apache > Tomcat v6.0 Server en la ventana de diálogo del servidor y haz click en Finish (terminar)

RunOnTomcat.png

3. Mira el resultado en tu navegador.

TestZULinBrowser.png

Version History

Version Date Content
     


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