ZK per principianti - il primo progetto con ZK Studio

ZK è un framework opensource per la costruzione di applicazioni web, mobile e RIA (Rich Internet Application).

come è fatto ZK?

tecnologie lato client e server

ZK utilizza moltissimo ajax, che come sappiamo è una tecnologia che permette tra le altre cose l'aggiornamento "parziale" di una pagina web, ed una maggiore reattività rispetto alla navigazione sui dati: pensiamo a google maps o google suggest.

Unitamente a questa tecnologia si è affacciata da tempo sul mercato quella a component-oriented come JSF, che delega lato server la gestione degli oggetti html (i componenti).

Con questo approccio è ad esempio possibile associare ad un componente html un id del tipo:

<div id="mycomponent" > ...

Questo permette di individuare il componente lato server recuperandolo attraverso l'id "mycomponent", e gestendo il suo stato e gli eventi associati ad esso.

caratteristiche principali

• utilizza XML (ZUML) per le interfacce grafiche della parte view
• è event-driven quindi gestisce gli eventi attraverso dei listener per la loro gestione, in maniera simile a come siamo abituati a fare generalmente lato desktop (vedi delegation model di swing)
• si integra in maniera trasparente con Spring, Spring Web Flow, Spring Security, JBoss Seam, JSP, JSF, Flash plugin, EJB;
• i componenti grafici vengono creati e gestiti sul server a differenza ad esempio di gwt che li crea e gestisce lato client

ZK Studio

Per zk utilizzeremo un plugin per STS (Spring Source Tool Suite) che si chiama ZK Studio che può essere installato nella maniera 'tipica' per eclipse (al seguente url troviamo la pagina di distribuzione con i riferimenti: http://marketplace.eclipse.org/content/zk-studio)

creazione del nuovo progetto

Avviando STS e selezionando la voce file/new ci sarà la possibilità di scegliere la creazione di un progetto ZK:

selezionando zk project comparirà la seguente schermata, dove inseriremo il nome del progetto (nel nostro caso "helloworld").

Nella schermata seguente:

selezioniamo la check box per fare in modo che STS crei nel progetto il deployment descriptor web.xml, quindi sul tasto "finish" per creare il progetto finale:

ZK Studio: ZK su eclipse

Installazione tomcat e configurazione ambiente

Configuriamo ora il server sul quale effettueremo il deploy e proveremo l'applicazione web.

Nel nostro caso utilizzeremo Apache Tomcat (versione 7): dovremo quindi scaricare l'archivio della versione tomcat corrente, ed estrarne il contenuto

Non dimentichiamo a questo punto di definire le variabili di ambiente per l'installazione, in maniera simile alla seguente:

# unix
EXPORT TOMCAT_HOME = /directory/di/installazione/di/Tomcat/
EXPORT PATH = %PATH%:%TOMCAT_HOME%/bim
# win
SET TOMCAT_HOME = C:directorydiinstallazionediTomcat
SET PATH = $PATH;%TOMCAT_HOME%bin

fatto questo nella finestra "server" premiamo tasto destro del mouse e scegliamo "new" per definire una istanza di un nuovo server:

Indichiamo dove abbiamo installato il nostro server:

nella schermata successiva selezioniamo il nostro progetto e clicchiamo sul pulsante "add" per aggiungerlo ai progetti di cui sarà possibile effettuare il deploy sul server:

Indichiamo dove abbiamo installato il nostro server:

Ed ecco come viene visualizzata l'istanza del server da noi aggiunta:

il progetto di test

(...e infine l'inevitabile progetto "Ciao Mondo")

ora apriamo il file "index.zul" e aggiungiamo la frase "Salve a tutti!", come in figura:

salviamo il tutto. Quindi col tasto destro del mouse clicchiamo sul progetto e selezioniamo "run on server":

selezionando tomcat e cliccando su "finish" il sorgente verrà 'impacchettato' in un archivio war e ne verrà fatto il deploy sul server. Infine verrà lanciata l'applicazione web che mostrerà il nostro messaggio a video:

piuttosto semplice no?

web.xml

Se per curiosità aprite il file web.xml (deployment descriptor), noterete che STS ha inserito in automatico la configurazione per una web application di ZK.

Inoltre come da figura:

nella window "outline" STS aiuta nella gestione dei componenti grafici e delle loro proprietà... ed è bene notare come sia eclipse che STS offrano molto di più: lasciamo gli approfondimenti del caso ad articoli successivi.

Conclusioni.

Un primo semplice esempio sul framework ZK, analizzando in maniera veloce le caratteristiche di questo framework mirando soprattutto a far girare la nostra prima applicazione web ma ci sarà modo di approfondire l'argomento ain maniera più esaustiva nel prossimo articolo.