Utilisation de ZK avec Java Retour d’expérience 19-juin-2008 Lou Schwartz – Damien Nicolas
Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul...
<ul><li>Utilisation dans le projet Abilitic-Competic </li></ul><ul><ul><li>Outil de support à la méthodologie d’anticipati...
<ul><li>Définition par ZK </li></ul><ul><ul><li>ZK is an open-source Ajax Web framework that enables rich UI for Web appli...
Introduction  –   Quid ZK ?   Lou Schwartz – Damien Nicolas 2/3 2/3
Introduction  –   Quid ZK ?   <ul><ul><li>Le ZK Client engine détecte un évènement déclenché par l'utilisateur dans le nav...
Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul...
Mise en application  –   Architecture choisie Lou Schwartz – Damien Nicolas GUI : Graphical User Interface Layer VO : Valu...
<ul><li>Exemple simple de développement avec ZK : la fenêtre de login </li></ul><ul><li>Principe de la fenêtre de login   ...
Exemples  – Fenêtre de login <ul><li>Fichier ZUML de la fenêtre de login </li></ul>Lou Schwartz – Damien Nicolas <ul><ul><...
Exemples  – Fenêtre de login <ul><li>C lasse LoginWindow développée </li></ul>Lou Schwartz – Damien Nicolas <ul><ul><li>im...
Exemples  – Fenêtre de login <ul><li>Interfaces obtenues </li></ul>Lou Schwartz – Damien Nicolas Internet Explorer Mozilla...
Exemples  – Paramétrage <ul><li>Paramétrage simple des composants   </li></ul><ul><ul><li>Ajout de paramètres personnels  ...
Exemples  – Paramétrage <ul><ul><ul><li>Sans gérer la récupération de la valeur de l’attribut (fait automatiquement par ZK...
Exemples  – Paramétrage <ul><li>Résultats obtenus </li></ul><ul><ul><li>Liste des groupes de travail </li></ul></ul><ul><u...
Exemples  – Paramétrage Lou Schwartz – Damien Nicolas 4/4 <ul><li>Autres paramétrages simples </li></ul><ul><ul><li>Pagina...
Exemples  – Intégration librairies <ul><li>Nombreuses librairies peuvent être intégrées </li></ul><ul><ul><li>Dans le proj...
Exemples  – Intégration librairies <ul><li>Poi </li></ul>Lou Schwartz – Damien Nicolas 2/6 Met en session le type de Fichi...
Exemples  – Intégration librairies <ul><li>Poi </li></ul>Lou Schwartz – Damien Nicolas 3/6 <ul><li>Dans la classe étendant...
Exemples  – Intégration librairies <ul><li>Poi </li></ul><ul><ul><ul><ul><ul><li>Le fichier créé est téléchargé et ouvert ...
Exemples  – Intégration librairies <ul><li>JFreeChart </li></ul><ul><ul><li>A la création de la fenêtre </li></ul></ul><ul...
Exemples  – Intégration librairies <ul><li>JFreeChart </li></ul><ul><ul><li>Affichage </li></ul></ul>Lou Schwartz – Damien...
Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul...
Application –  Problèmes rencontrés <ul><li>Temps de chargement </li></ul><ul><ul><li>Très long facilement supérieur à 1 m...
Application –  Problèmes rencontrés <ul><li>Changement des noms dans ZK </li></ul><ul><ul><li>De classes, packages, méthod...
Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul...
<ul><li>Gestion des événements simplifiée par ZK </li></ul><ul><ul><li>Beaucoup d’événements gérés :  </li></ul></ul><ul><...
Forces ZK <ul><li>Paramétrage simple des composants   </li></ul><ul><li>Tous serveurs de servlets à priori </li></ul><ul><...
<ul><li>Bibliothèques  </li></ul><ul><ul><li>Liste de .jar à intégrer au projet Java </li></ul></ul><ul><li>Licence GPL </...
<ul><li>Documentation </li></ul><ul><ul><li>Utilisation Java – ZK    quasi inexistante </li></ul></ul><ul><ul><li>Javadoc...
<ul><li>Code HTML généré  fenêtre login  valide ? </li></ul><ul><ul><li>W3C validator     non 35 erreurs </li></ul></ul><...
<ul><li>Maquettage   </li></ul><ul><ul><li>Utilisation de ZUML  </li></ul></ul><ul><ul><li>Rapide </li></ul></ul><ul><ul><...
<ul><li>Quand client riche est déconseillé </li></ul><ul><ul><li>Pas d’interactivité dans l’interface </li></ul></ul><ul><...
Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul...
Conclusion <ul><li>ZK </li></ul><ul><ul><li>Très malléable </li></ul></ul><ul><ul><li>Extension simple </li></ul></ul><ul>...
Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul...
Bibliographique <ul><li>Site officiel ZK </li></ul><ul><ul><li>http://www. zkoss .org </li></ul></ul><ul><li>Guide du déve...
Questions ? 19-juin-2008 Lou Schwartz – Damien Nicolas 30-sept-06
Prochain SlideShare
Chargement dans…5
×

Utilisation de ZK avec Java - Retour d’expérience

8 385 vues

Publié le

Retour d'expérience sur l'utilisation du Rich Internet Application Framework "ZK" avec java. Présentation faite au Yajug.

Publié dans : Technologie
0 commentaire
7 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
8 385
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz ECOMI : Economie de la connaissance et management de l’innovation
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz Schéma de fonctionnement Le ZK Client engine est intégré au navigateur et détecte n&apos;importe quel évènement déclenché par l&apos;utilisateur tels un mouvement de souris ou un changement de valeur. Une fois détecté, il est envoyé au Update Engine. Après avoir reçu la demande du Client Engine, l&apos;Update Engine met à jour le contenu des composants correspondants si cela est nécessaire. Ensuite, l&apos;Update Engine le signale à l&apos;application en invoquant le gestionnaire d&apos;évènement, le cas échéant. Si l&apos;application choisit de changer le contenu des composants, de supprimer, d&apos;ajouter ou de déplacer des composants, l&apos;Update Engine envoie le nouveau contenu modifié des composants au Client Engine. Enfin, le Client Engine met à jour l&apos;arbre DOM en conséquence. NOTES Pour minimiser le trafic entre le client et le serveur, plusieurs évènement sont envoyés au serveur en une fois pour autant que ceux-ci soient différrables. Pour maximiser les effets visuels ainsi que la réactivité, ZK fournit le &amp;quot;Client Side Action&amp;quot; qui vous permet d&apos;exécuter vos propres codes JavaScript sur le client. ZK Client Engine = ensemble de Javascripts dans la page cliente
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz Les traitements se font plus dans la couche VO (acc è s bdd via DAO, traitements pour l&apos;affichage). Les business objects c&apos;est juste une description.
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz http://10.13.1.19:8080/Abilitic/ Mécanisme JavaBeans
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz Expert : pva
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Présentation ZK - Retour d&apos;expérience 13 août 2010 Lou Schwartz
  • Utilisation de ZK avec Java - Retour d’expérience

    1. 1. Utilisation de ZK avec Java Retour d’expérience 19-juin-2008 Lou Schwartz – Damien Nicolas
    2. 2. Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul></ul><ul><li>Mise en application et Exemples </li></ul><ul><ul><li>Architecture choisie </li></ul></ul><ul><ul><li>Exemple de développement avec ZK fenêtre de login </li></ul></ul><ul><ul><li>Exemple de paramétrage </li></ul></ul><ul><ul><li>Exemple d’intégration avec des librairies externes </li></ul></ul><ul><ul><li>Problèmes rencontrés </li></ul></ul><ul><li>Analyse utilisation ZK </li></ul><ul><ul><li>Forces </li></ul></ul><ul><ul><li>Faiblesses </li></ul></ul><ul><ul><li>Quand & pourquoi utiliser ZK ? </li></ul></ul><ul><ul><li>Quand & pourquoi ne pas utiliser ZK ? </li></ul></ul><ul><li>Conclusion </li></ul><ul><li>Bibliographie </li></ul>Lou Schwartz – Damien Nicolas
    3. 3. <ul><li>Utilisation dans le projet Abilitic-Competic </li></ul><ul><ul><li>Outil de support à la méthodologie d’anticipation des compétences développée dans le cadre du projet « Abilitic » (UST ECOMI du Centre Henri Tudor) </li></ul></ul><ul><ul><li>But : avoir des formations adaptées en temps réel au marché du travail / prospective </li></ul></ul><ul><ul><ul><li>Structuration en groupes de travail  brainstormings organisés par animateur </li></ul></ul></ul><ul><ul><ul><li>Identifier avec des experts les évolutions d’un profil professionnel </li></ul></ul></ul><ul><ul><ul><li>Communiquer aux instituts de formation les nouveaux profils professionnels </li></ul></ul></ul><ul><li>Besoins – contraintes </li></ul><ul><ul><li>Interfaces à développer </li></ul></ul><ul><ul><ul><li>Complexes </li></ul></ul></ul><ul><ul><ul><li>Dynamiques </li></ul></ul></ul><ul><ul><ul><li>Proches d’un Excel distribué </li></ul></ul></ul><ul><ul><ul><li>Facilement utilisables par des externes via le Web </li></ul></ul></ul><ul><ul><ul><li>Délais de développement courts (0,5homme/mois de septembre 2006 à décembre 2007) </li></ul></ul></ul>Introduction – Contexte d’utilisation de ZK Lou Schwartz – Damien Nicolas 1/1
    4. 4. <ul><li>Définition par ZK </li></ul><ul><ul><li>ZK is an open-source Ajax Web framework that enables rich UI for Web applications with no JavaScript and little programming </li></ul></ul><ul><li>Client riche </li></ul><ul><ul><li>Application exécutée sur le serveur </li></ul></ul><ul><ul><li>Exécution de scripts côté client </li></ul></ul><ul><ul><ul><li>Limite les transactions </li></ul></ul></ul><ul><ul><li>Bonne dynamicité et interactivité </li></ul></ul><ul><ul><ul><li>onglets, multi-fenêtrage, menus déroulant, tableaux, arbres, … </li></ul></ul></ul><ul><ul><li>Intérêts </li></ul></ul><ul><ul><ul><li>Éviter les procédures de mises à jour des clients </li></ul></ul></ul><ul><ul><ul><li>Exécution dans un navigateur côté client : t ous les PCs ont un navigateur installé </li></ul></ul></ul><ul><ul><ul><li>Interfaces complexes et réactives en un minimum de temps de développement </li></ul></ul></ul><ul><ul><ul><li>Homogénéité des interfaces (look&feel) & comportements dans les différents navigateurs </li></ul></ul></ul><ul><li>ZUML : ZK User interface Markup Language </li></ul><ul><ul><li>Supporte balises XUL et HTML </li></ul></ul><ul><ul><li>Langage de description des interfaces </li></ul></ul>Introduction – Quid ZK ? Lou Schwartz – Damien Nicolas 1/3 1/3
    5. 5. Introduction – Quid ZK ? Lou Schwartz – Damien Nicolas 2/3 2/3
    6. 6. Introduction – Quid ZK ? <ul><ul><li>Le ZK Client engine détecte un évènement déclenché par l'utilisateur dans le navigateur </li></ul></ul><ul><ul><li>L’événement détecté est envoyé à l’Update Engine. </li></ul></ul><ul><ul><li>L’Update Engine met à jour le contenu des composants correspondants si c’est nécessaire </li></ul></ul><ul><ul><li>Le cas échéant l'Update Engine le signale à l'application en invoquant le gestionnaire d'évènement </li></ul></ul><ul><ul><li>Si l'application choisit de changer le contenu des composants, de supprimer, d'ajouter ou de déplacer des composants, l'Update Engine envoie le nouveau contenu modifié des composants au Client Engine </li></ul></ul><ul><ul><li>Enfin, le Client Engine met à jour l’interface cliente dans le browser </li></ul></ul>Lou Schwartz – Damien Nicolas 3/3
    7. 7. Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul></ul><ul><li>Mise en application et Exemples </li></ul><ul><ul><li>Architecture choisie </li></ul></ul><ul><ul><li>Exemple de développement avec ZK fenêtre de login </li></ul></ul><ul><ul><li>Exemple de paramétrage </li></ul></ul><ul><ul><li>Exemple d’intégration avec des librairies externes </li></ul></ul><ul><ul><li>Problèmes rencontrés </li></ul></ul><ul><li>Analyse utilisation ZK </li></ul><ul><ul><li>Forces </li></ul></ul><ul><ul><li>Faiblesses </li></ul></ul><ul><ul><li>Quand & pourquoi utiliser ZK ? </li></ul></ul><ul><ul><li>Quand & pourquoi ne pas utiliser ZK ? </li></ul></ul><ul><li>Conclusion </li></ul><ul><li>Bibliographie </li></ul>Lou Schwartz – Damien Nicolas
    8. 8. Mise en application – Architecture choisie Lou Schwartz – Damien Nicolas GUI : Graphical User Interface Layer VO : Value Object Layer DAO : Data Access Object Layer Business : Business Object Layer ZK graphical objects VO objects Factory pattern DAO objects domain objects Fichiers ZUML + classes Java graphiques classes Java classes Java classes Java Hibernate Base de données Postgres Fichiers de mapping <ul><li>Le découpage en couches (layers) de l’application permet : </li></ul><ul><ul><li>une meilleure indépendance entre les couches d’où </li></ul></ul><ul><ul><li>une évolution facilitée (l’implémentation réelle est cachée aux autres couches) </li></ul></ul><ul><ul><ul><li>Par exemple, la couche DAO pourra être facilement remplacée par une couche de type WebServices sans que la couche GUI ne soit affectée </li></ul></ul></ul><ul><li>Interfaces : ZK + classes étendues en Java </li></ul><ul><ul><li>Objets ZUL basés sur standard XUL de Mozilla </li></ul></ul><ul><li>Traitements : Java </li></ul><ul><li>Hibernate </li></ul><ul><ul><li>Cadre de correspondance objets relationnels </li></ul></ul><ul><ul><li>Gère les communications avec la base de données postgres </li></ul></ul>1/1
    9. 9. <ul><li>Exemple simple de développement avec ZK : la fenêtre de login </li></ul><ul><li>Principe de la fenêtre de login </li></ul><ul><ul><li>Saisie du login et password </li></ul></ul><ul><ul><li>Choix du rôle dans la liste des rôles disponibles </li></ul></ul><ul><ul><ul><li> base de données </li></ul></ul></ul><ul><ul><li>Événement onClick géré sur le bouton </li></ul></ul><ul><ul><ul><li>Vérifie si triplet login – mot de passe – rôle OK </li></ul></ul></ul><ul><ul><ul><ul><li>Création Session </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Redirection vers l’interface adéquate </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Animateur </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Expert </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Administrateur </li></ul></ul></ul></ul></ul><ul><ul><ul><li>Sinon affichage d’un message d’erreur dans la fenêtre login </li></ul></ul></ul>Exemples – Fenêtre de login Lou Schwartz – Damien Nicolas 1/4
    10. 10. Exemples – Fenêtre de login <ul><li>Fichier ZUML de la fenêtre de login </li></ul>Lou Schwartz – Damien Nicolas <ul><ul><li>< window use = &quot;lu.abilitic.gui.LoginWindow&quot; id = &quot;loginForm&quot; > </li></ul></ul><ul><ul><ul><li><grid > </li></ul></ul></ul><ul><ul><ul><li>< rows > </li></ul></ul></ul><ul><ul><ul><li>< row align = &quot;left&quot; > </li></ul></ul></ul><ul><ul><ul><li> < label value = &quot;Login&quot;/ > </li></ul></ul></ul><ul><ul><ul><li> < textbox id = &quot;login&quot; value = &quot;&quot; /> </li></ul></ul></ul><ul><ul><ul><li></ row > </li></ul></ul></ul><ul><ul><ul><li>< row align = &quot;left&quot; > </li></ul></ul></ul><ul><ul><ul><li> < label value = &quot; Password &quot;/ > </li></ul></ul></ul><ul><ul><ul><li> < textbox id = &quot;password&quot; value = &quot;&quot; type = &quot;password&quot; /> </li></ul></ul></ul><ul><ul><ul><li></ row > </li></ul></ul></ul><ul><ul><ul><li>< row align = &quot;left&quot; > </li></ul></ul></ul><ul><ul><ul><li> < label value = &quot; Role &quot;/ > </li></ul></ul></ul><ul><ul><ul><li> < combobox id = &quot;role&quot; value = &quot;&quot; /> </li></ul></ul></ul><ul><ul><ul><li></ row > </li></ul></ul></ul><ul><ul><ul><li>< row > </li></ul></ul></ul><ul><ul><ul><li> < separator /> </li></ul></ul></ul><ul><ul><ul><li> < label id = &quot;erreur&quot; value = &quot;&quot; /> </li></ul></ul></ul><ul><ul><ul><li></ row > </li></ul></ul></ul><ul><ul><ul><li>< row > </li></ul></ul></ul><ul><ul><ul><li> < separator /> </li></ul></ul></ul><ul><ul><ul><li> < button use = &quot;lu.abilitic.gui.ButtonLoginWindow &quot; /> </li></ul></ul></ul><ul><ul><ul><li></ row > </li></ul></ul></ul><ul><ul><ul><li></ rows > </li></ul></ul></ul><ul><ul><ul><li></ grid > </li></ul></ul></ul><ul><ul><li></ window > </li></ul></ul>2/4
    11. 11. Exemples – Fenêtre de login <ul><li>C lasse LoginWindow développée </li></ul>Lou Schwartz – Damien Nicolas <ul><ul><li>import … </li></ul></ul><ul><ul><li>import org.zkoss.zul.Combobox; </li></ul></ul><ul><ul><li>import org.zkoss.zul.Comboitem; </li></ul></ul><ul><ul><li>import org.zkoss.zul.Window; </li></ul></ul><ul><ul><li>public class LoginWindow extends Window { </li></ul></ul><ul><ul><li>public void onCreate () throws InterruptedException { </li></ul></ul><ul><ul><ul><li>this .setTitle( &quot;Abilitic - Login&quot; ); </li></ul></ul></ul><ul><ul><ul><li>this .setWidth( &quot;300px&quot; ); </li></ul></ul></ul><ul><ul><ul><li>this .setClosable( false ); </li></ul></ul></ul><ul><ul><ul><li>Combobox comboRole = (Combobox) this .getFellow( &quot;role&quot; ); </li></ul></ul></ul><ul><ul><ul><li>FabriqueRoleVO fabriqueVO = new FabriqueRoleVO(); </li></ul></ul></ul><ul><ul><ul><li>List< RoleVO > rolesVO = fabriqueVO.findAll(); </li></ul></ul></ul><ul><ul><ul><li>boolean first = false ; </li></ul></ul></ul><ul><ul><ul><li>for (RoleVO roleVO : rolesVO) { </li></ul></ul></ul><ul><ul><ul><ul><li>Comboitem itemRole = new Comboitem(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>itemRole.setLabel(roleVO.getLabelRole()); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>itemRole.setId(String. valueOf (roleVO.getId())); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>comboRole.appendChild(itemRole); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>if ( !first ) { </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>comboRole.setValue(itemRole.getLabel()); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>first = true ; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>public void onCancel () throws InterruptedException { </li></ul></ul><ul><ul><li>// cancel any changes </li></ul></ul><ul><ul><li>this .onCreate(); </li></ul></ul><ul><ul><li>} </li></ul></ul>Met à jour la combobox avec les données de la base de données Initialise la fenêtre Surcharge Window composant ZK de base 3/4 <ul><li>Respect du paradigme : </li></ul><ul><li>pas d’accès direct aux objets business ni à la BdD </li></ul><ul><li>accès via VO & Factory </li></ul>
    12. 12. Exemples – Fenêtre de login <ul><li>Interfaces obtenues </li></ul>Lou Schwartz – Damien Nicolas Internet Explorer Mozilla Firefox Identification réussie  redirection Echec de l’identification  affichage message erreur 4/4
    13. 13. Exemples – Paramétrage <ul><li>Paramétrage simple des composants </li></ul><ul><ul><li>Ajout de paramètres personnels </li></ul></ul><ul><ul><li>Dans le fichier ZUL </li></ul></ul><ul><ul><ul><li>ajouter dans la balise du composant les nouveaux paramètres et leur valeur et indiquer la classe utilisée pour gérer le composant </li></ul></ul></ul><ul><ul><ul><ul><li>Ex : < listbox id = &quot;utilisateurs&quot; type = &quot;utilisateurs &quot; use = &quot;lu.abilitic.gui.components.DynamicListbox&quot; /> </li></ul></ul></ul></ul><ul><ul><li>Dans la classe Java étendant le composant standard Listbox gérant le composant personnalisé DynamicListbox </li></ul></ul><ul><ul><ul><li>Ajouter un attribut de même nom et de type String </li></ul></ul></ul><ul><ul><ul><li>Ajouter les getter & setter pour cet attribut </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>import org.zkoss.zul.Listbox; </li></ul></ul></ul><ul><ul><ul><li>import org.zkoss.zul.Listitem; </li></ul></ul></ul><ul><ul><ul><li>/** … */ </li></ul></ul></ul><ul><ul><ul><li>public class DynamicListbox extends Listbox{ </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><ul><li>private String type ; /** type de listbox*/ </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public String getType() { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>return type ; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>public void setType(String type) { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>this . type = type; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>Lou Schwartz – Damien Nicolas 1/4
    14. 14. Exemples – Paramétrage <ul><ul><ul><li>Sans gérer la récupération de la valeur de l’attribut (fait automatiquement par ZK) l’utiliser dans le code de la classe </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>public class DynamicListbox extends Listbox{ </li></ul></ul></ul><ul><ul><ul><li>private String type ; </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>/**A la création de la listbox ajoute tous les éléments de la bdd comme items de la listbox en fonction du type de listbox à créer et sélectionne le 1ier élément (vide)*/ </li></ul></ul></ul><ul><ul><ul><ul><li>public void onCreate(){ </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>//ajoute le 1ier élément vide </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Listitem item0 = new Listitem(); item0.setLabel( &quot; &quot; ); this .appendChild(item0); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>//ajoute les éléments à la listbox en fonction du type de la listbox créée </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>if ( type != null ){ </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>if ( type .equalsIgnoreCase( &quot;gt&quot; )){ </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>this .initGTSelect(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>if ( type .equalsIgnoreCase( &quot;utilisateurs&quot; )){ </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>this .initUtilisateurs(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>if ( type .equalsIgnoreCase( &quot;echelle&quot; )){ </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>this .initEchellesNotationSelect(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>if ( type .equalsIgnoreCase( &quot;domaine&quot; )){ </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>this .initDomainesSelect(); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>… </li></ul></ul></ul></ul>Lou Schwartz – Damien Nicolas 2/4 <ul><ul><ul><li>Classe permettant de construire une listbox dynamique en fonction du type de données à charger de la base de données </li></ul></ul></ul><ul><ul><ul><li>listbox des utilisateurs </li></ul></ul></ul><ul><ul><ul><li>listbox des groupes de travail </li></ul></ul></ul><ul><ul><ul><li>listbox des domaines </li></ul></ul></ul><ul><ul><ul><li>listbox des échelles de notation </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>/**Ajoute les items contenant les utilisateurs de la BDD à la listbox*/ </li></ul></ul></ul><ul><ul><ul><li>public void initUtilisateurs(){ </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>List listUsers = users.findAll(); </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>for ( int i = 0; i< listUsers.size(); i++){ </li></ul></ul></ul><ul><ul><ul><ul><li>Listitem itemUser = new Listitem(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>String prenom = listUsers.get(i)).getPrenom(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>String nom = listUsers.get(i)).getNom(); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>itemUser.setLabel(prenom + &quot; &quot; + nom); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>… </li></ul></ul></ul></ul><ul><ul><ul><ul><li>this .appendChild(itemUtilisateurs); </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
    15. 15. Exemples – Paramétrage <ul><li>Résultats obtenus </li></ul><ul><ul><li>Liste des groupes de travail </li></ul></ul><ul><ul><li>Liste des utilisateurs </li></ul></ul><ul><ul><li>Liste des échelles de notation </li></ul></ul>Lou Schwartz – Damien Nicolas 3/4
    16. 16. Exemples – Paramétrage Lou Schwartz – Damien Nicolas 4/4 <ul><li>Autres paramétrages simples </li></ul><ul><ul><li>Pagination automatique pour tableau et listbox </li></ul></ul><ul><ul><ul><li>Dans la classe Java </li></ul></ul></ul><ul><ul><ul><li>public class SaisieDeterminantsGrid extends Grid { </li></ul></ul></ul><ul><ul><ul><ul><li>public void onCreate(){ </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>//ajout de la pagination automatique </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>this .setMold( &quot;paging&quot; ); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>this .setPageSize(5); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><ul><li><decimalbox format=&quot;#,##0.##&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><textbox constraint=&quot;/.+@.+.[a-z]+/: Please enter an e-mail address&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><li>Dans le fichier zul </li></ul></ul></ul><ul><ul><ul><li><listbox mold=&quot;paging&quot; pageSize=&quot;2&quot;> </li></ul></ul></ul><ul><ul><ul><ul><li><listitem label=&quot;3&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><listitem label=&quot;2&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><listitem label=&quot;1&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><listitem label=&quot;0&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><listitem label=&quot;-1&quot;/> </li></ul></ul></ul></ul><ul><ul><ul><li></listbox> </li></ul></ul></ul><ul><ul><li>Ajout de contrôle : format input attendu pour textbox </li></ul></ul><ul><ul><ul><li>Dans le fichier zul </li></ul></ul></ul>
    17. 17. Exemples – Intégration librairies <ul><li>Nombreuses librairies peuvent être intégrées </li></ul><ul><ul><li>Dans le projet utilisation notamment de </li></ul></ul><ul><ul><ul><li>Poi pour Excel </li></ul></ul></ul><ul><ul><ul><li>JFreeChart pour graphique </li></ul></ul></ul><ul><li>Poi </li></ul><ul><ul><li>Quand l’action « clic » sur le bouton est détectée </li></ul></ul><ul><ul><ul><li>Création d’un nouveau fichier Excel </li></ul></ul></ul><ul><ul><ul><ul><li>En fonction du type de fichier à créer (paramètre ajouté au bouton) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Ajoute les données et fait la mise en page du fichier Excel </li></ul></ul></ul></ul><ul><ul><li>Le fichier est créé côté serveur </li></ul></ul><ul><ul><li>On utilise le composant ZK permettant de télécharger le fichier selon le navigateur </li></ul></ul>Lou Schwartz – Damien Nicolas 1/6
    18. 18. Exemples – Intégration librairies <ul><li>Poi </li></ul>Lou Schwartz – Damien Nicolas 2/6 Met en session le type de Fichier à générer Clic de l’utilisateur Ouvre la fenêtre de confirmation de la création du fichier <ul><ul><ul><ul><li>Dans le fichier Zul décrivant la fenêtre de confirmation </li></ul></ul></ul></ul><ul><ul><ul><ul><li>< window title = &quot;Abilitic --- Création du fichier excel&quot; border = &quot;normal&quot; width = &quot;300px&quot; closable = &quot;true&quot;  use = &quot;lu.abilitic.gui.commun.CheminFichierWindow&quot; > </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>< button label = &quot;Creer&quot; use = &quot;lu.abilitic.gui.components.CreerFichierExcelButton&quot; /> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>< button label = &quot;Annuler&quot; use = &quot;lu.abilitic.gui.components.CreerFichierExcelButton&quot; /> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li></ window > lu.abilitic.gui.components.GenererFichierButton </li></ul></ul></ul></ul><ul><li>Dans le fichier Java de la classe lu.abilitic.gui.components.GenererFichierButton </li></ul><ul><li>… </li></ul><ul><li>/** Gestion de l'événement de clic sur le bouton </li></ul><ul><li>* Modifie en session TYPE_FICHIER_A_GENERER </li></ul><ul><li>* Ouvre la fenêtre de demande de confirmation de la création du fichier excel </li></ul><ul><li>*/ </li></ul><ul><li>public void onClick(){ </li></ul><ul><ul><li>//Modifie les données en session </li></ul></ul><ul><ul><li>SessionVO currentSessionVO = new SessionVO(); </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>currentSessionVO.setAttribute(MappingAddresses. TYPE_FICHIER_A_GENERER , Integer. parseInt ( typeFichier )); </li></ul></ul><ul><ul><li>//Ouvre la fenêtre de demande de confirmation de la création du fichier excel </li></ul></ul><ul><ul><li>Executions. createComponents ( &quot;/Commun/creerFichierXLS.zul&quot; , null , null ); </li></ul></ul><ul><li>} </li></ul><ul><ul><ul><ul><li>Dans le fichier ZUL décrivant le bouton </li></ul></ul></ul></ul><ul><ul><ul><ul><li>< button label = &quot;Espace morphologique&quot; use = &quot;lu.abilitic.gui.components.GenererFichierButton&quot; atelier = &quot;3&quot; typeFichier = &quot;5&quot; width = &quot;90px&quot; /> </li></ul></ul></ul></ul>
    19. 19. Exemples – Intégration librairies <ul><li>Poi </li></ul>Lou Schwartz – Damien Nicolas 3/6 <ul><li>Dans la classe étendant le bouton de la fenêtre de confirmation </li></ul><ul><li>… </li></ul><ul><li>import org.apache.poi.hssf.usermodel.HSSFCell; </li></ul><ul><li>import org.zkoss.zul.Filedownload; </li></ul><ul><li>public class CreerFichierExcelButton extends Button { </li></ul><ul><li>… </li></ul><ul><li>/** Gère l'événement clic sur le bouton en fonction du type de document à générer */ </li></ul><ul><li>public void onClick() throws IOException{ </li></ul><ul><li>… </li></ul><ul><li>//Génère le fichier xls </li></ul><ul><li>if ( this .getLabel().equals( &quot;Creer&quot; )){ </li></ul><ul><li>//Récupère les données en session </li></ul><ul><li>SessionVO currentSessionVO = new SessionVO(); </li></ul><ul><li>… </li></ul><ul><li>int typeFichier = (Integer)currentSessionVO.getAttribute( MappingAddresses. TYPE_FICHIER_A_GENERER ); </li></ul><ul><li>//crée le fichier </li></ul><ul><li>createFile( nomFichier ); </li></ul><ul><li>//En fonction du type de fichier : crée les feuilles dans le fichier et ajoute </li></ul><ul><li>les données correspondantes </li></ul><ul><li>switch (typeFichier){ </li></ul><ul><li> case 0 : {creerListePresence(); break ;} </li></ul><ul><li> case 1 : {creerQuestionnaire20Determinants(); break ;} </li></ul><ul><li> case 2 : {creerListeTousDeterminantsAtelier1(); break ;} </li></ul><ul><li>… </li></ul><ul><li>} </li></ul><ul><li>//clot le fichier créé et donne à l'utilisateur accès au fichier </li></ul><ul><li>endFile(); </li></ul><ul><li>//Ferme la fenêtre de création du fichier </li></ul><ul><li>parent .onClose(); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Clic de l’utilisateur <ul><li>/**Ferme le fichier créé et permet de le télécharger localement**/ </li></ul><ul><li>public void endFile() throws IOException, InterruptedException{ </li></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>InputStream is = new FileInputStream( nomFichier ); </li></ul></ul><ul><ul><li>if (is != null ){ </li></ul></ul><ul><ul><li>Filedownload. save (is, &quot;application/xls&quot; , nomFichier ); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>} </li></ul>Crée le fichier et ouvre la fenêtre de téléchargement du fichier
    20. 20. Exemples – Intégration librairies <ul><li>Poi </li></ul><ul><ul><ul><ul><ul><li>Le fichier créé est téléchargé et ouvert avec l’application </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>sur le PC client choisie pour ouvrir les fichiers .xls </li></ul></ul></ul></ul></ul>Lou Schwartz – Damien Nicolas 4/6 Clic de l’utilisateur Clic de l’utilisateur Crée le fichier et ouvre la fenêtre de téléchargement du fichier
    21. 21. Exemples – Intégration librairies <ul><li>JFreeChart </li></ul><ul><ul><li>A la création de la fenêtre </li></ul></ul><ul><ul><ul><li>Crée un graphique avec JFreeChart d’après les données en session ou dans la base de données </li></ul></ul></ul><ul><ul><ul><li>Convertit le graphique obtenu en image ZK org.zkoss.image.AImage </li></ul></ul></ul><ul><ul><ul><li>Met à jour l’image dans la fenêtre </li></ul></ul></ul>Lou Schwartz – Damien Nicolas 5/6 <ul><li>import java.awt.image.BufferedImage; </li></ul><ul><li>import org.jfree.chart.JFreeChart; </li></ul><ul><li>import org.zkoss.image.AImage; </li></ul><ul><li>import org.zkoss.zul.Window; </li></ul><ul><li>… </li></ul><ul><li>/** Classe permettant de gérer la fenêtre de sélection des déterminants et d'affichage du graphique*/ </li></ul><ul><li>public class GraphiqueDependanceInfluenceWindow extends Window{ </li></ul><ul><li>… </li></ul><ul><li>public void onCreate() throws IOException{ </li></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>//Création du graphique </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>BufferedImage chartImarge = chart .createBufferedImage(500, 300, BufferedImage. TRANSLUCENT , null ); </li></ul></ul><ul><ul><li>byte [] bytes = EncoderUtil. encode (chartImarge, ImageFormat. PNG , true ); </li></ul></ul><ul><ul><li>AImage image = new AImage( &quot;XY Chart 2&quot; , bytes); </li></ul></ul><ul><ul><li>imageOfGraph .setContent(image); </li></ul></ul><ul><ul><li>//Attache l'image ZK à la fenêtre </li></ul></ul><ul><ul><li>this .appendChild( imageOfGraph ); </li></ul></ul><ul><li>} </li></ul><ul><li>… </li></ul><ul><li>} </li></ul>
    22. 22. Exemples – Intégration librairies <ul><li>JFreeChart </li></ul><ul><ul><li>Affichage </li></ul></ul>Lou Schwartz – Damien Nicolas 6/6
    23. 23. Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul></ul><ul><li>Mise en application et Exemples </li></ul><ul><ul><li>Architecture choisie </li></ul></ul><ul><ul><li>Exemple de développement avec ZK fenêtre de login </li></ul></ul><ul><ul><li>Exemple de paramétrage </li></ul></ul><ul><ul><li>Exemple d’intégration avec des librairies externes </li></ul></ul><ul><ul><li>Problèmes rencontrés </li></ul></ul><ul><li>Analyse utilisation ZK </li></ul><ul><ul><li>Forces </li></ul></ul><ul><ul><li>Faiblesses </li></ul></ul><ul><ul><li>Quand & pourquoi utiliser ZK ? </li></ul></ul><ul><ul><li>Quand & pourquoi ne pas utiliser ZK ? </li></ul></ul><ul><li>Conclusion </li></ul><ul><li>Bibliographie </li></ul>Lou Schwartz – Damien Nicolas
    24. 24. Application – Problèmes rencontrés <ul><li>Temps de chargement </li></ul><ul><ul><li>Très long facilement supérieur à 1 minute </li></ul></ul>Lou Schwartz – Damien Nicolas 1/2 Nombreux accès à la base de données gourmands en temps Charge toutes les données à la création de l’interface Effectue tous les traitements à la création de l’interface Effectuer le minimum d’accès à la base de données  Gérer les objets en session A la sélection d’un onglet charger les données et effectuer les traitements nécessaires Enregistrer les calculs dans la base de données Ne charger que l’interface et les données/traitements du premier onglet visible Origines possibles du problème Solutions proposées .
    25. 25. Application – Problèmes rencontrés <ul><li>Changement des noms dans ZK </li></ul><ul><ul><li>De classes, packages, méthodes ou attributs </li></ul></ul><ul><ul><li>Entre les différentes versions </li></ul></ul><ul><ul><ul><li>Rare et documenté mais génère une perte de temps </li></ul></ul></ul><ul><ul><ul><li>Demande de lire précisément toutes les « Release Notes » </li></ul></ul></ul><ul><ul><ul><li>Ex : The CSS name called &quot;inline-box&quot; is renamed to &quot;inline-block&quot; dans la version 3.0.4 </li></ul></ul></ul>Lou Schwartz – Damien Nicolas 2/2
    26. 26. Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul></ul><ul><li>Mise en application et Exemples </li></ul><ul><ul><li>Architecture choisie </li></ul></ul><ul><ul><li>Exemple de développement avec ZK fenêtre de login </li></ul></ul><ul><ul><li>Exemple de paramétrage </li></ul></ul><ul><ul><li>Exemple d’intégration avec des librairies externes </li></ul></ul><ul><ul><li>Problèmes rencontrés </li></ul></ul><ul><li>Analyse utilisation ZK </li></ul><ul><ul><li>Forces </li></ul></ul><ul><ul><li>Faiblesses </li></ul></ul><ul><ul><li>Quand & pourquoi utiliser ZK ? </li></ul></ul><ul><ul><li>Quand & pourquoi ne pas utiliser ZK ? </li></ul></ul><ul><li>Conclusion </li></ul><ul><li>Bibliographie </li></ul>Lou Schwartz – Damien Nicolas
    27. 27. <ul><li>Gestion des événements simplifiée par ZK </li></ul><ul><ul><li>Beaucoup d’événements gérés : </li></ul></ul><ul><ul><ul><li>onCreate - onFocus - onClick - onClose - onSelect … </li></ul></ul></ul><ul><ul><ul><li>Exemple : gérer un clic sur un bouton </li></ul></ul></ul><ul><ul><ul><ul><li>Étendre la classe org.zkoss.zul.Button </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Surcharger la méthode onClick() </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Quand événement détecté par ZK  exécute la méthode onClick </li></ul></ul></ul></ul><ul><li>Nombreux composants </li></ul><ul><ul><li>89 XUL - 83 XHTML off-the-shelf components version 3.0.4 25 mars 2008 </li></ul></ul><ul><ul><li>Combobox </li></ul></ul><ul><ul><li>Grid </li></ul></ul><ul><ul><li>Datebox (avec ouverture calendrier) </li></ul></ul><ul><ul><li>Tree </li></ul></ul><ul><ul><li>Listbox </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>JFreeChart </li></ul></ul><ul><ul><li>Cf. Démo ZK http:// www . zkoss . org / zkdemo / userguide / </li></ul></ul><ul><li>Lien fort avec objets Java </li></ul><ul><ul><li>Tous composants  objets Java </li></ul></ul><ul><ul><li>Possibilité d’étendre les classes facilement </li></ul></ul>Forces ZK Lou Schwartz – Damien Nicolas 1/3 <ul><ul><li>FCK Editor </li></ul></ul><ul><ul><li>Audio </li></ul></ul><ul><ul><li>Pie Chart </li></ul></ul><ul><ul><li>Google Map </li></ul></ul><ul><ul><li>Editor </li></ul></ul><ul><ul><li>Dojo Fisheyes List </li></ul></ul><ul><ul><li>Timeline </li></ul></ul>
    28. 28. Forces ZK <ul><li>Paramétrage simple des composants </li></ul><ul><li>Tous serveurs de servlets à priori </li></ul><ul><ul><li>Tomcat </li></ul></ul><ul><ul><li>Jboss </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>Intégration feuilles de style CSS </li></ul><ul><li>Multilinguisme géré dynamiquement </li></ul><ul><li>Structuration MVC possible pour certains composants </li></ul><ul><li>Possibilités d’association avec </li></ul><ul><ul><li>Hibernate </li></ul></ul><ul><ul><li>JSF </li></ul></ul><ul><ul><li>JSP </li></ul></ul><ul><ul><li>JFreeChart </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li>+ toutes librairies Java externes </li></ul></ul><ul><ul><ul><li>Ex: POI pour génération fichier Excel </li></ul></ul></ul><ul><ul><li>Autres langages </li></ul></ul><ul><ul><ul><li>Ruby / Groovy / JavaScript … </li></ul></ul></ul>Lou Schwartz – Damien Nicolas 2/3
    29. 29. <ul><li>Bibliothèques </li></ul><ul><ul><li>Liste de .jar à intégrer au projet Java </li></ul></ul><ul><li>Licence GPL </li></ul><ul><li>Forum réactif </li></ul><ul><li>Documentation – Smalltalks </li></ul><ul><ul><li>ZK et intégration autres technologies </li></ul></ul><ul><ul><ul><li>Exemples : Hibernate </li></ul></ul></ul><ul><li>Évolue très vite </li></ul><ul><ul><li>Nouvelle release environ tous les mois (22 en 26 mois) </li></ul></ul><ul><ul><li>Toutes les évolutions sont dans les « Release Notes » </li></ul></ul><ul><li>Tests </li></ul><ul><ul><li>JUnit pour les composants étendus en Java </li></ul></ul><ul><ul><li>Tester l’activité des servlets </li></ul></ul><ul><ul><ul><li>Framework de Test « Cactus » http://jakarta.apache. org /cactus/ </li></ul></ul></ul><ul><li>Existe une version pour mobiles </li></ul><ul><ul><li>Pas testée </li></ul></ul><ul><ul><li>Récente </li></ul></ul>Forces ZK Lou Schwartz – Damien Nicolas 3/3 <ul><li>zk-3.0.5 2008-04-30 </li></ul><ul><li>zk-3.0.4 2008-03-24 </li></ul><ul><li>zk-3.0.3 2008-02-01 </li></ul><ul><li>zk-3.0.2 2008-01-22 </li></ul><ul><li>zk-3.0.1 2007-12-17 </li></ul><ul><li>zk-3.0.0 2007-11-06 </li></ul><ul><li>zk-2.4.2 2007-12-15 </li></ul><ul><li>zk-2.4.1 2007-07-05 </li></ul><ul><li>zk-2.4.0 2007-06-07 </li></ul><ul><li>zk-2.3.1 2007-05-02 </li></ul><ul><li>zk-2.3.0 2007-03-19 </li></ul><ul><li>zk-2.2.1 2007-01-01 </li></ul><ul><li>zk-2.2.0 2006-12-13 </li></ul><ul><li>zk-2.1.3 2006-10-23 </li></ul><ul><li>zk-2.1.2 2006-10-02 </li></ul><ul><li>zk-2.1.1 2006-09-19 </li></ul><ul><li>zk-2.1.0 2006-08-28 </li></ul><ul><li>zk-2.0.1 2006-06-25 </li></ul><ul><li>zk-2.0.0 2006-06-13 </li></ul><ul><li>zk-1.1.0 2006-03-20 </li></ul><ul><li>zk-1.0.1 2006-03-03 </li></ul><ul><li>zk-1.0.0 2006-02-27 </li></ul>
    30. 30. <ul><li>Documentation </li></ul><ul><ul><li>Utilisation Java – ZK  quasi inexistante </li></ul></ul><ul><ul><li>Javadoc légère </li></ul></ul><ul><li>Performance dépendante du navigateur </li></ul><ul><ul><li>Safari + + + </li></ul></ul><ul><ul><li>Opéra + + – mais problèmes dus à la gestion des sessions d’Opéra </li></ul></ul><ul><ul><li>Mozilla + – – </li></ul></ul><ul><ul><li>Internet Explorer / Notes – – – </li></ul></ul><ul><li>Temps de chargement d’une page </li></ul><ul><ul><li>Dépend : </li></ul></ul><ul><ul><ul><li>complexité / nombre d’éléments à afficher </li></ul></ul></ul><ul><ul><ul><li>utilisation de Java  améliore la vitesse de chargement </li></ul></ul></ul><ul><ul><li>Peut-être important lors du premier chargement </li></ul></ul>Faiblesses ZK Lou Schwartz – Damien Nicolas 1/2
    31. 31. <ul><li>Code HTML généré fenêtre login valide ? </li></ul><ul><ul><li>W3C validator  non 35 erreurs </li></ul></ul><ul><ul><li>HTML validator / Firefox  warnings 43 warnings </li></ul></ul><ul><ul><ul><li>Code valide mais pas propre : mélange tableaux, divs </li></ul></ul></ul><ul><li>css générée à la volée, sans cache  re-téléchargée à chaque fois </li></ul><ul><li>Scripts javascript </li></ul><ul><ul><li>pas de chargement progressif </li></ul></ul><ul><ul><li>tous chargés au démarrage  assez lourd </li></ul></ul><ul><li>Outil de développement – interface de création graphique (authoring) pour les interfaces en ZUML </li></ul><ul><ul><li>ZeroKode designer </li></ul></ul><ul><ul><li>Développé avec ZK version 2.1.0 RC2 </li></ul></ul><ul><ul><li>Testé  ne fonctionne pas </li></ul></ul><ul><ul><ul><li>Dû probablement à la version ZK utilisée </li></ul></ul></ul><ul><ul><ul><li>Plus de posts sur le forum depuis octobre 2007 </li></ul></ul></ul><ul><ul><ul><li>Semble en cours d’abandon </li></ul></ul></ul>Faiblesses ZK Lou Schwartz – Damien Nicolas 2/2
    32. 32. <ul><li>Maquettage </li></ul><ul><ul><li>Utilisation de ZUML </li></ul></ul><ul><ul><li>Rapide </li></ul></ul><ul><ul><li>Avec début d’interactivité implémenté </li></ul></ul><ul><ul><li>Surtout si prévision de développement ZK </li></ul></ul><ul><li>Interfaces Web simples sans logique derrière </li></ul><ul><ul><li>Utilisation de ZUML </li></ul></ul><ul><ul><li>Possibilité d’accès direct à une base de données simple </li></ul></ul><ul><ul><ul><li>Tables doivent correspondre à l’interface </li></ul></ul></ul><ul><li>Interfaces Web complexes ou avec beaucoup de logique </li></ul><ul><ul><li>Extension des composants </li></ul></ul><ul><ul><ul><li>Possibilité de créer des macro-composants (feuilles de calcul, forum, rss, wiki, etc…) </li></ul></ul></ul><ul><ul><li>Gestion des traitements et événements en Java </li></ul></ul><ul><ul><li>Utilisation à la place de Swing par exemple </li></ul></ul>Quand & pourquoi utiliser ZK ? Lou Schwartz – Damien Nicolas 1/1
    33. 33. <ul><li>Quand client riche est déconseillé </li></ul><ul><ul><li>Pas d’interactivité dans l’interface </li></ul></ul><ul><ul><li>Rapport effort de développement / résultat interface trop faible voir négatif </li></ul></ul><ul><li>Quand modèle client/serveur n’est pas requis </li></ul><ul><li>Quand interface très très complexe </li></ul><ul><ul><li>Tableaux imbriqués avec fusions multiples de cellules etc. </li></ul></ul><ul><ul><li>Tableaux d’arbres d’images </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li> Sûrement possible à réaliser mais gros problèmes de performances </li></ul></ul>Quand & pourquoi ne pas utiliser ZK ? Lou Schwartz – Damien Nicolas 1/1
    34. 34. Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul></ul><ul><li>Mise en application et Exemples </li></ul><ul><ul><li>Architecture choisie </li></ul></ul><ul><ul><li>Exemple de développement avec ZK fenêtre de login </li></ul></ul><ul><ul><li>Exemple de paramétrage </li></ul></ul><ul><ul><li>Exemple d’intégration avec des librairies externes </li></ul></ul><ul><ul><li>Problèmes rencontrés </li></ul></ul><ul><li>Analyse utilisation ZK </li></ul><ul><ul><li>Forces </li></ul></ul><ul><ul><li>Faiblesses </li></ul></ul><ul><ul><li>Quand & pourquoi utiliser ZK ? </li></ul></ul><ul><ul><li>Quand & pourquoi ne pas utiliser ZK ? </li></ul></ul><ul><li>Conclusion </li></ul><ul><li>Bibliographie </li></ul>Lou Schwartz – Damien Nicolas
    35. 35. Conclusion <ul><li>ZK </li></ul><ul><ul><li>Très malléable </li></ul></ul><ul><ul><li>Extension simple </li></ul></ul><ul><ul><ul><li>Seul pré-requis : Java </li></ul></ul></ul><ul><ul><li>A tester : </li></ul></ul><ul><ul><ul><li>version ZK pour mobiles </li></ul></ul></ul>Lou Schwartz – Damien Nicolas The finalist of &quot;Best Tool and Utility for Developers,&quot; &quot;Best User Support&quot; and &quot;Best Technical Design&quot;!!! Présents au salon JavaOne mai 2008, San Fransisco
    36. 36. Plan de la présentation <ul><li>Introduction </li></ul><ul><ul><li>Contexte </li></ul></ul><ul><ul><li>Quid ZK ? </li></ul></ul><ul><li>Mise en application et Exemples </li></ul><ul><ul><li>Architecture choisie </li></ul></ul><ul><ul><li>Exemple de développement avec ZK fenêtre de login </li></ul></ul><ul><ul><li>Exemple de paramétrage </li></ul></ul><ul><ul><li>Exemple d’intégration avec des librairies externes </li></ul></ul><ul><ul><li>Problèmes rencontrés </li></ul></ul><ul><li>Analyse utilisation ZK </li></ul><ul><ul><li>Forces </li></ul></ul><ul><ul><li>Faiblesses </li></ul></ul><ul><ul><li>Quand & pourquoi utiliser ZK ? </li></ul></ul><ul><ul><li>Quand & pourquoi ne pas utiliser ZK ? </li></ul></ul><ul><li>Conclusion </li></ul><ul><li>Bibliographie </li></ul>Lou Schwartz – Damien Nicolas
    37. 37. Bibliographique <ul><li>Site officiel ZK </li></ul><ul><ul><li>http://www. zkoss .org </li></ul></ul><ul><li>Guide du développeur ZK </li></ul><ul><ul><li>http://www. zkoss .org/doc/ devguide / </li></ul></ul><ul><li>Démonstration interactive de ZK </li></ul><ul><ul><li>http://www. zkoss .org/ zkdemo / userguide / </li></ul></ul><ul><li>ZeroKode : Visual designer </li></ul><ul><ul><li>http:// sourceforge .net/project/ showfiles . php ?group_id=152762&package_id=227207 </li></ul></ul>Lou Schwartz – Damien Nicolas
    38. 38. Questions ? 19-juin-2008 Lou Schwartz – Damien Nicolas 30-sept-06

    ×