Ria ZK

Utilisation de ZK avec Java
Retour dexprience
19-juin-2008
Lou Schwartz Damien Nicolas
Plan de la prsentation
Introduction
Contexte Quid ZK ?
Mise en application et Exemples
Architecture choisie Exemple de dveloppement avec ZK fentre de login Exemple de paramtrage Exemple dintgration avec des librairies externes Problmes rencontrs
Analyse utilisation ZK
Forces Faiblesses Quand & pourquoi utiliser ZK ? Quand & pourquoi ne pas utiliser ZK ?
Conclusion Bibliographie
19-juin-2008
Introduction Contexte dutilisation de ZK
1/1
Utilisation dans le projet Abilitic-Competic

Outil de support la mthodologie danticipation des comptences dveloppe dans le cadre du projet Abilitic (UST ECOMI du Centre Henri Tudor) But : avoir des formations adaptes en temps rel au march du travail / prospective
Structuration en groupes de travail brainstormings organiss par animateur Identifier avec des experts (externes) les volutions dun profil professionnel Communiquer aux instituts de formation les nouveaux profils professionnels
Besoins contraintes
Interfaces dvelopper
Complexes Dynamiques Proches dun Excel distribu Facilement utilisables par des externes via le Web Dlais de dveloppement courts (0,5homme/mois de septembre 2006 dcembre 2007)
19-juin-2008
Introduction Quid ZK ?
Dfinition par ZK
1/3
ZK is an open-source Ajax Web framework that enables rich UI for Web applications with no JavaScript and little programming
Client riche
Application excute sur le serveur Excution de scripts ct client
Limite les transactions
Bonne dynamicit et interactivit

onglets, multi-fentrage, menus droulant, tableaux, arbres,
Intrts
viter les procdures de mises jour des clients Excution dans un navigateur ct client : tous les PCs ont un navigateur install Interfaces complexes et ractives en un minimum de temps de dveloppement Homognit des interfaces (look&feel) & comportements dans les diffrents navigateurs
ZUML : ZK User interface Markup Language

Supporte balises XUL et HTML Langage de description des interfaces
19-juin-2008 Lou Schwartz Damien Nicolas 4
2/3
19-juin-2008
3/3
Le ZK Client engine dtecte un vnement dclench par l'utilisateur dans le navigateur Lvnement dtect est envoy lUpdate Engine. LUpdate Engine met jour le contenu des composants correspondants si cest ncessaire Le cas chant l'Update Engine le signale l'application en invoquant le gestionnaire d'vnement Si l'application choisit de changer le contenu des composants, de supprimer, d'ajouter ou de dplacer des composants, l'Update Engine envoie le nouveau contenu modifi des composants au Client Engine Enfin, le Client Engine met jour linterface cliente dans le browser
19-juin-2008 Lou Schwartz Damien Nicolas
Introduction
Contexte Quid ZK ?

19-juin-2008
Mise en application Architecture choisie1/1

GUI : Graphical User Interface Layer ZK graphical objects
Fichiers ZUML + classes Java graphiques
Le dcoupage en couches (layers) de lapplication permet :

une meilleure indpendance entre les couches do une volution facilite (limplmentation relle est cache aux autres couches)
Par exemple, la couche DAO pourra tre facilement remplace par une couche de type WebServices sans que la couche GUI ne soit affecte
VO : Value Object Layer VO objects Factory pattern

classes Java
DAO : Data Access Object Layer DAO objects

classes Java
Interfaces : ZK + classes tendues en Java

Objets ZUL bass sur standard XUL de Mozilla
Business : Business Object Layer domain objects

classes Java
Hibernate
Fichiers de mapping
Traitements : Java Hibernate

Cadre de correspondance objets relationnels Gre les communications avec la base de donnes postgres
Base de donnes Postgres

Exemples Fentre de login

Exemple simple de dveloppement avec ZK : la fentre de login
1/4
Principe de la fentre de login

Saisie du login et password Choix du rle dans la liste des rles disponibles
base de donnes
vnement onClick gr sur le bouton

Vrifie si triplet login mot de passe rle OK
Cration Session Redirection vers linterface adquate
Animateur Expert Administrateur
Sinon affichage dun message derreur dans la fentre login
19-juin-2008

Fichier ZUML de la fentre de login
<window use="lu.abilitic.gui.LoginWindow" id="loginForm"> <grid> <rows> <row align="left"> <label value="Login"/> <textbox id="login" name="login" value=""/> </row> <row align="left"> <label value="Password"/> <textbox id="password" name="password" value="" type="password"/> </row> <row align="left"> <label value="Role"/> <combobox id="role" value=""/> </row> <row> <separator/> <label id="erreur" value=""/> </row> <row> <separator/> <button use="lu.abilitic.gui.ButtonLoginWindow"/> </row> </rows> </grid> </window>
2/4
10

Classe LoginWindow dveloppe
import import import import org.zkoss.zul.Combobox; org.zkoss.zul.Comboitem; org.zkoss.zul.Window;
3/4
public class LoginWindow extends Window { public void onCreate() throws InterruptedException { this.setTitle("Abilitic - Login"); this.setWidth("300px"); this.setClosable(false); Combobox comboRole = (Combobox) this.getFellow("role"); FabriqueRoleVO fabriqueVO = new FabriqueRoleVO(); List<RoleVO> rolesVO = fabriqueVO.findAll(); boolean first = false ; for (RoleVO roleVO : rolesVO) { Comboitem itemRole = new Comboitem(); itemRole.setLabel(roleVO.getLabelRole()); itemRole.setId(String.valueOf(roleVO.getId())); comboRole.appendChild(itemRole); if ( !first ) { comboRole.setValue(itemRole.getLabel()); first = true ; } }
Surcharge Window composant ZK de base Initialise la fentre
Respect du paradigme : pas daccs direct aux objets business ni la BdD accs via VO & Factory
}
Met jour la combobox avec les donnes de la base de donnes
public void onCancel() throws InterruptedException { // cancel any changes this.onCreate(); }


Internet Explorer
4/4
Interfaces obtenues
Mozilla Firefox
Identification russie redirection Echec de lidentification affichage message erreur
19-juin-2008
12
Exemples Paramtrage
Paramtrage simple des composants
Ajout de paramtres personnels Dans le fichier ZUL
ajouter dans la balise du composant les nouveaux paramtres et leur valeur et indiquer la classe utilise pour grer le composant Ex : <listbox id="utilisateurs" type="utilisateurs type="utilisateurs" use="lu.abilitic.gui.components.DynamicListbox"/>
1/4
Dans la classe Java tendant le composant standard Listbox grant le composant personnalis DynamicListbox
Ajouter un attribut de mme nom et de type String Ajouter les getter & setter pour cet attribut
import org.zkoss.zul.Listbox; import org.zkoss.zul.Listitem; /** */ public class DynamicListbox extends Listbox{
private String type; public String getType() { return type; } public void setType(String type) { this.type = type; } /** type de listbox*/
}
Exemples Paramtrage
Sans grer la rcupration de la valeur de lattribut (fait automatiquement par ZK) lutiliser dans le code de la classe
public class DynamicListbox extends Listbox{ private String type;
2/4
/**A la cration de la listbox ajoute tous les lments de la bdd comme items de la listbox en fonction du type de listbox crer et slectionne le 1ier lment (vide)*/
public void onCreate(){ //ajoute le 1ier lment vide Listitem item0 = new Listitem(); item0.setLabel(" "); this.appendChild(item0); //ajoute les lments la listbox en fonction du type de la listbox cre if (type != null){ if (type.equalsIgnoreCase("gt")){ this.initGTSelect(); } if (type.equalsIgnoreCase("utilisateurs")){ this.initUtilisateurs(); } if (type.equalsIgnoreCase("echelle")){ this.initEchellesNotationSelect(); } if (type.equalsIgnoreCase("domaine")){ this.initDomainesSelect(); } }
Classe permettant de construire une listbox dynamique en fonction du type de donnes charger de la base de donnes listbox des utilisateurs listbox des groupes de travail listbox des domaines listbox des chelles de notation
/**Ajoute les items contenant les utilisateurs de la BDD la listbox*/ public void initUtilisateurs(){ List listUsers = users.findAll();
for (int i = 0; i< listUsers.size(); i++){ Listitem itemUser = new Listitem(); String prenom = listUsers.get(i)).getPrenom(); String nom = listUsers.get(i)).getNom(); itemUser.setLabel(prenom + " " + nom);
this.appendChild(itemUtilisateurs); }
Exemples Paramtrage
Rsultats obtenus
Liste des groupes de travail
3/4
Liste des utilisateurs
Liste des chelles de notation
19-juin-2008
15
Exemples Paramtrage
Autres paramtrages simples
Pagination automatique pour tableau et listbox
Dans la classe Java public class SaisieDeterminantsGrid extends Grid {
public void onCreate(){
//ajout de la pagination automatique this.setMold("paging"); this.setPageSize(5);
4/4
} Dans le fichier zul <listbox mold="paging" pageSize="2">
<listitem label="3"/> <listitem label="2"/> <listitem label="1"/> <listitem label="0"/> <listitem label="-1"/>
</listbox>
Ajout de contrle : format input attendu pour textbox

Dans le fichier zul <decimalbox format="#,##0.##"/> <textbox constraint="/.+@.+\.[a-z]+/: Please enter an e-mail address"/>
16
Exemples Intgration librairies

Nombreuses librairies peuvent tre intgres
Dans le projet utilisation notamment de
Poi pour Excel JFreeChart pour graphique
1/6
Poi
Quand laction clic sur le bouton est dtecte
Cration dun nouveau fichier Excel
En fonction du type de fichier crer (paramtre ajout au bouton) Ajoute les donnes et fait la mise en page du fichier Excel
Le fichier est cr ct serveur On utilise le composant ZK permettant de tlcharger le fichier selon le navigateur
19-juin-2008
17

Poi
Dans le fichier ZUL dcrivant le bouton
2/6
<button label="Espace morphologique" use="lu.abilitic.gui.components.GenererFichierButton" atelier="3" typeFichier="5" width="90px"/>
Dans le fichier Java de la classe lu.abilitic.gui.components.GenererFichierButton

Clic de lutilisateur /** Gestion de l'vnement de clic sur le bouton * Modifie en session TYPE_FICHIER_A_GENERER * Ouvre la fentre de demande de confirmation de la cration du fichier excel */ public void onClick(){ //Modifie les donnes en session SessionVO currentSessionVO = new SessionVO(); currentSessionVO.setAttribute(MappingAddresses.TYPE_FICHIER_A_GENERER, Integer.parseInt(typeFichier)); //Ouvre la fentre de demande de confirmation de la cration du fichier excel Executions.createComponents("/Commun/creerFichierXLS.zul", null, null); }
Met en session le type de Fichier gnrer
Ouvre la fentre de confirmation de la cration du fichier
Dans le fichier Zul dcrivant la fentre de confirmation

<window title="Abilitic --- Cration du fichier excel" border="normal" width="300px" closable="true" use="lu.abilitic.gui.commun.CheminFichierWindow"> <button label="Creer" use="lu.abilitic.gui.components.CreerFichierExcelButton"/> <button label="Annuler" use="lu.abilitic.gui.components.CreerFichierExcelButton"/> </window> lu.abilitic.gui.components.GenererFichierButton
19-juin-2008
18

Poi
Dans la classe tendant le bouton de la fentre de confirmation
import org.apache.poi.hssf.usermodel.HSSFCell; import org.zkoss.zul.Filedownload;
3/6
Clic de lutilisateur
Cre le fichier et ouvre la fentre de tlchargement du fichier
public class CreerFichierExcelButton extends Button { /** Gre l'vnement clic sur le bouton en fonction du type de document gnrer */ public void onClick() throws IOException{ //Gnre le fichier xls if(this.getLabel().equals("Creer")){ //Rcupre les donnes en session SessionVO currentSessionVO = new SessionVO(); int typeFichier = (Integer)currentSessionVO.getAttribute( MappingAddresses.TYPE_FICHIER_A_GENERER); //cre le fichier createFile(nomFichier); //En fonction du type de fichier : cre les feuilles dans le fichier et ajoute les donnes correspondantes switch (typeFichier){ case 0 : {creerListePresence(); break;} case 1 : {creerQuestionnaire20Determinants(); break;} case 2 : {creerListeTousDeterminantsAtelier1(); break;} } //clot le fichier cr et donne l'utilisateur accs au fichier endFile(); //Ferme la fentre de cration du fichier parent.onClose(); } } /**Ferme le fichier cr et permet de le tlcharger localement**/ public void endFile() throws IOException, InterruptedException{ InputStream is = new FileInputStream(nomFichier); if (is != null){ Filedownload.save(is, "application/xls", nomFichier); } } Lou Schwartz Damien Nicolas
19-juin-2008
19

Poi
Le fichier cr est tlcharg et ouvert avec lapplication sur le PC client choisie pour ouvrir les fichiers .xls
4/6
Clic de lutilisateur Cre le fichier et ouvre la fentre de tlchargement du fichier
Clic de lutilisateur
19-juin-2008
20

JFreeChart
A la cration de la fentre
5/6
Cre un graphique avec JFreeChart daprs les donnes en session ou dans la base de donnes Convertit le graphique obtenu en image ZK org.zkoss.image.AImage Met jour limage dans la fentre
import import import import java.awt.image.BufferedImage; org.jfree.chart.JFreeChart; org.zkoss.image.AImage; org.zkoss.zul.Window;
/** Classe permettant de grer la fentre de slection des dterminants et d'affichage du graphique*/ public class GraphiqueDependanceInfluenceWindow extends Window{ public void onCreate() throws IOException{ //Cration du graphique BufferedImage chartImarge = chart.createBufferedImage(500, 300, BufferedImage.TRANSLUCENT , null); byte[] bytes = EncoderUtil.encode(chartImarge, ImageFormat.PNG, true); AImage image = new AImage("XY Chart 2", bytes); imageOfGraph.setContent(image); //Attache l'image ZK la fentre this.appendChild(imageOfGraph); } }
19-juin-2008
21

JFreeChart
Affichage
6/6
19-juin-2008
22
Introduction
Contexte Quid ZK ?

19-juin-2008
23
Application Problmes rencontrs

Temps de chargement
Trs long facilement suprieur 1 minute
Nombreux accs la base de donnes gourmands en temps
Origines possibles du problme Solutions proposes .
1/2
Effectuer le minimum daccs la base de donnes Grer les objets en session
Ne charger que linterface et les donnes/traitements du premier onglet visible A la slection dun onglet charger les donnes et effectuer les traitements ncessaires
Charge toutes les donnes la cration de linterface
Effectue tous les traitements la cration de linterface
Enregistrer les calculs dans la base de donnes
19-juin-2008
24
Application Problmes rencontrs
2/2
Changement des noms dans ZK

De classes, packages, mthodes ou attributs Entre les diffrentes versions
Rare et document mais gnre une perte de temps Demande de lire prcisment toutes les Release Notes Ex : The CSS name called "inline-box" is renamed to "inlineblock" dans la version 3.0.4
19-juin-2008
25
Introduction
Contexte Quid ZK ?

Forces ZK
Gestion des vnements simplifie par ZK
Beaucoup dvnements grs :
onCreate - onFocus - onClick - onClose - onSelect Exemple : grer un clic sur un bouton
1. tendre la classe org.zkoss.zul.Button 2. Surcharger la mthode onClick() 3. Quand vnement dtect par ZK excute la mthode onClick
1/3
Nombreux composants
89 XUL - 83 XHTML off-the-shelf components version 3.0.4 25 mars 2008
Combobox Grid Datebox (avec ouverture calendrier) Tree Listbox JFreeChart FCK Editor Audio Pie Chart Google Map Editor Dojo Fisheyes List Timeline
Cf. Dmo ZK http://www.zkoss.org/zkdemo/userguide/
Lien fort avec objets Java

Tous composants objets Java Possibilit dtendre les classes facilement
Forces ZK
Paramtrage simple des composants Tous serveurs de servlets priori
Tomcat Jboss
2/3
Intgration style sheets CSS Multilinguisme gr dynamiquement Structuration MVC possible pour certains composants Possibilits dassociation avec
Hibernate JSF JSP JFreeChart + toutes librairies Java externes
Ex: POI pour gnration fichier Excel
Autres langages
Ruby / Groovy / JavaScript
19-juin-2008
28
Forces ZK
Bibliothques
Liste de .jar intgrer au projet Java
3/3
Licence GPL Forum ractif Documentation Smalltalks

ZK et intgration autres technologies
Exemples : Hibernate
volue trs vite

Nouvelle release environ tous les mois (21 en 25 mois) Toutes les volutions sont dans la Release Note
Tests
JUnit pour les composants tendus en Java Tester lactivit des servlets
Framework de Test Cactus http://jakarta.apache.org/cactus/
Existe une version pour mobiles

Pas teste Rcente
zk-3.0.5 2008-04-30 zk-3.0.4 2008-03-24 zk-3.0.3 2008-02-01 zk-3.0.2 2008-01-22 zk-3.0.1 2007-12-17 zk-3.0.0 2007-11-06 zk-2.4.2 2007-12-15 zk-2.4.1 2007-07-05 zk-2.4.0 2007-06-07 zk-2.3.1 2007-05-02 zk-2.3.0 2007-03-19 zk-2.2.1 2007-01-01 zk-2.2.0 2006-12-13 zk-2.1.3 2006-10-23 zk-2.1.2 2006-10-02 zk-2.1.1 2006-09-19 zk-2.1.0 2006-08-28 zk-2.0.1 2006-06-25 zk-2.0.0 2006-06-13 zk-1.1.0 2006-03-20 zk-1.0.1 2006-03-03 zk-1.0.0 2006-02-27
29
Faiblesses ZK
Documentation
Utilisation Java ZK Javadoc lgre quasi inexistante
1/2
Performance dpendante du navigateur

Safari + + + Opra + + Mozilla + Internet Explorer / Notes
mais problmes dus la gestion des sessions dOpra
Temps de chargement dune page

Dpend :
complexit / nombre dlments afficher utilisation de Java amliore la vitesse de chargement
Peut-tre important lors du premier chargement
19-juin-2008
30
Faiblesses ZK
Code HTML gnr fentre login valide ?
W3C validator non warnings 35 erreurs 43 warnings HTML validator / Firefox
2/2
Code valide mais pas propre : mlange tableaux, divs
css gnre la vole, sans cache Scripts javascript

pas de chargement progressif tous chargs au dmarrage
re-tlcharge chaque fois
assez lourd
Outil de dveloppement interface de cration graphique (authoring) pour les interfaces en ZUML
ZeroKode designer Dvelopp avec ZK version 2.1.0 RC2 Test ne fonctionne pas
D probablement la version ZK utilise Plus de posts sur le forum depuis octobre 2007 Semble en cours dabandon
19-juin-2008
31
Quand & pourquoi utiliser ZK ?

Maquettage
Utilisation de ZUML Rapide Avec dbut dinteractivit implment Surtout si prvision de dveloppement ZK
1/1
Interfaces Web simples sans logique derrire

Utilisation de ZUML Possibilit daccs direct une base de donnes simple
Tables doivent correspondre linterface
Interfaces Web complexes ou avec beaucoup de logique

Extension des composants
Possibilit de crer des macro-composants (feuilles de calcul, forum, rss, wiki, etc)
Gestion des traitements et vnements en Java Utilisation la place de Swing par exemple
19-juin-2008
32
Quand & pourquoi ne pas utiliser ZK ? 1/1
Quand client riche est dconseill

Pas dinteractivit dans linterface Rapport effort de dveloppement / rsultat interface trop faible voir ngatif
Quand modle client/serveur nest pas requis
Quand interface trs trs complexe

Tableaux imbriqus avec fusions multiples de cellules etc. Tableaux darbres dimages Srement possible raliser mais gros problmes de performances
19-juin-2008
33
Introduction
Contexte Quid ZK ?

Conclusion
Bibliographie
19-juin-2008
34
Conclusion
ZK
Trs mallable Extension simple Seul pr-requis : Java A tester :
version ZK pour mobiles
The finalist of "Best Tool and Utility for Developers," "Best User Support" and "Best Technical Design"!!!
Prsents au salon JavaOne mai 2008, San Fransisco
19-juin-2008
35
Introduction
Contexte Quid ZK ?

Conclusion
Bibliographie
19-juin-2008
36
Bibliographique
Site officiel ZK
http://www.zkoss.org
Guide du dveloppeur ZK
http://www.zkoss.org/doc/devguide/
Dmonstration interactive de ZK
http://www.zkoss.org/zkdemo/userguide/
ZeroKode : Visual designer

http://sourceforge.net/project/showfiles.php?group_id=1527 62&package_id=227207
19-juin-2008
37
Questions ?
19-juin-2008 30-sept-06
38

Ria ZK

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ria ZK

Transféré par

Droits d'auteur :

Formats disponibles

Utilisation de ZK avec Java

Lou Schwartz Damien Nicolas

Lou Schwartz Damien Nicolas

Introduction Contexte dutilisation de ZK

Utilisation dans le projet Abilitic-Competic

Lou Schwartz Damien Nicolas

Bonne dynamicit et interactivit

ZUML : ZK User interface Markup Language

Lou Schwartz Damien Nicolas

Mise en application et Exemples

Lou Schwartz Damien Nicolas

Mise en application Architecture choisie1/1

Le dcoupage en couches (layers) de lapplication permet :

VO : Value Object Layer VO objects Factory pattern

DAO : Data Access Object Layer DAO objects

Interfaces : ZK + classes tendues en Java

Business : Business Object Layer domain objects

Traitements : Java Hibernate

Base de donnes Postgres

Exemples Fentre de login

Principe de la fentre de login

vnement onClick gr sur le bouton

Sinon affichage dun message derreur dans la fentre login

Lou Schwartz Damien Nicolas

Exemples Fentre de login

Exemples Fentre de login

Surcharge Window composant ZK de base Initialise la fentre

Met jour la combobox avec les donnes de la base de donnes

public void onCancel() throws InterruptedException { // cancel any changes this.onCreate(); }

Exemples Fentre de login

Identification russie redirection Echec de lidentification affichage message erreur

Lou Schwartz Damien Nicolas

public class DynamicListbox extends Listbox{ private String type;

19-juin-2008 Lou Schwartz Damien Nicolas 14

Liste des utilisateurs

Liste des chelles de notation

Lou Schwartz Damien Nicolas

} Dans le fichier zul <listbox mold="paging" pageSize="2">

Ajout de contrle : format input attendu pour textbox

Exemples Intgration librairies

Lou Schwartz Damien Nicolas

Exemples Intgration librairies

<button label="Espace morphologique" use="lu.abilitic.gui.components.GenererFichierButton" atelier="3" typeFichier="5" width="90px"/>

Dans le fichier Java de la classe lu.abilitic.gui.components.GenererFichierButton

Met en session le type de Fichier gnrer

Ouvre la fentre de confirmation de la cration du fichier

Dans le fichier Zul dcrivant la fentre de confirmation

Lou Schwartz Damien Nicolas

Exemples Intgration librairies

Cre le fichier et ouvre la fentre de tlchargement du fichier

Exemples Intgration librairies

Clic de lutilisateur Cre le fichier et ouvre la fentre de tlchargement du fichier

Lou Schwartz Damien Nicolas

Exemples Intgration librairies

Lou Schwartz Damien Nicolas

Exemples Intgration librairies

Lou Schwartz Damien Nicolas

Mise en application et Exemples

Lou Schwartz Damien Nicolas

Application Problmes rencontrs

Effectuer le minimum daccs la base de donnes Grer les objets en session

Charge toutes les donnes la cration de linterface

Effectue tous les traitements la cration de linterface