ZK para Todos II

Como empezar?
El IDE Eclipse es un software excelente para el desarrollo de diferentes tipo de aplicaciones, por suerte este posee un plugin denominado ZKStudio este plugin te ayudara desde cero sin tener conocimientos previos de ZULM, este posee la amplia gama de componentes visuales, aunque al arrastrarlos al documento de edicion este despliega el codigo en ZULM, ademas de poseer la bondad de tener autocompletar que reconoce lo que estas escribiendo, al pulsar sobre las teclas <Ctrl-SpaceBar> el editor mostrara los atributos y/o codigos asociados al componente que se desea diseñar, al paso del tiempo dejaras de utilizar la paleta grafica y haras los codigos solo con el editor de textos.
El IDE NetBean no posee un plugin con las caracteristicas del descrito anteriormente sobre eclipse, aunque si tiene uno que reconoce el codigo y esto basta para desarrollar paginas .ZUL  esta es la extencion de las paginas creadas con el lenguaje ZULM.

A lo Nuestro...  Al Integrar el plugin ZKStudio al IDE Eclipse este automaticamente prepara el IDE para codificar en ZULM de hecho el plugin Genera una primera pagina del estilo "hola mundo" que puede ser ejecutado inmediatamente sobre el servidor que se tenga configurado en el eclipse, puede ser tomcat, glassfish, jetty, jonas entre otros, yo lo he probado en tomcat, jetty, y actualmente trabajo sobre la robustes de Glassfish.

Manos a la obra

1. Instalar Eclipse... descargue eclipse de la siguiente direccion: http://www.eclipse.org/downloads/ verifique el sistema operativo en el cual descargara la aplicacion yo tengo la version de linux igualfuncionara para Windows. En espe punto es sodo descomprimir y ya esta instalado.
2. instalando el ZKStudio...  Inicie Eclipse, pulse las opciones del menu principal HELP -> Install New Software... aparecera una caja de dialogo, pulse sobre el boton Add y escriba en el campo Name  "ZkStudio", en el campo Location escriba la siguiente direccion: http://studioupdate.zkoss.org/studio/update  esto activara la instalacion automaticamente de alli en adelante solo pulse aceptando la licencia, descargar el software y reinicio del IDE Eclipse; al reiniciar ya tendras el plugin instalado y se genera la pagina de ejemplo tipo "hola mundo" desde la que puedes empezar a probar.
3. Se debe tener algun servidor de aplicaciones WEB del tipo Contenedor WEB que soporte JavaBeans, Servlet, JSP. (Glassfish)

Una vez instalado y configurado el ZK (toda la configuracion de librerias, zk.xml, y configuracion del web.xml esta a cargo del plugin) en caso de no tenerlo hay que hacer las configuraciones manualmente.

Mi primera Ventana...
<?page title="Bienvenido Mi Primera Ventanita" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="winWelc" title="Bienvenido a Mi Sistema" border="normal" mode="modal" width="370px" >
<separator/>
<grid oddRowSclass="non-odd" style="border-style:none;">
    <columns  >
        <column align="left" width="50px" />
        <column align="left" />
    </columns>
    <rows >
        <row >
        <cell rowspan="2" style="border-style:none;">
            <image src="img/Iconos/info.gif" style="margin-bottom:100px;"/>
        </cell>   
        <cell rowspan="1" style="border-style:none;">
            <label multiline="true" >
            <![CDATA[
                Mi Sistema, esta optimizado para ejecutar en Mozilla Firefox.   
            ]]>
            </label>
            <hbox ><a style="margin-left:120px;cursor:pointer;color:navy;" target="_blank" image="/img/Iconos/Firefox.gif" href="http://www.mozilla.com/en-US/products/download.html?product=firefox-3.6">Obtener Mozilla Firefox</a></hbox>
        </cell>
        </row>
    </rows>
</grid>
<div style="margin-left: auto;margin-right: auto;width:100px;">
    <button id="btnOK" label="OK" width="100px"  style="cursor:pointer;">
        <attribute name="onCreate">
            <![CDATA[
                 self.setFocus(true);   
            ]]>       
        </attribute>
        <attribute name="onClick">
            <![CDATA[
               alert("Haz pulsado sobre el Boton OK de Mi Sistema");
            ]]>       
        </attribute>
    </button>
</div>
</window>
</zk>

En mi siguiente post explicare linea a linea, atributo por atributo lo que hace cada cosa en el codigo
Motivense... Sigan el codigo y veran que funciona