Rich Internet Application développée avec

Manifestation DevelopR6 du 16 juin 2011 Développement 'Interfaces Hommes Machines

[email protected] Plan

● Le contexte ● TEdit: choix d'une RIA ● : kéZako? ● L'environnement qooXdoo ○ Le développement ○ Le déploiement ○ La documentation ○ La gestion du framework ● Les interfaces Web ○ Les objets ○ Les évènements ● Les données ● Conclusion

DevolpR6 - 16 juin 2011 - [email protected] - 02 / 29 Le contexte

● STERM : Services terminologiques à l'INIST-CNRS

○ Termsciences: Portail terminologique multidisciplinaire

○ SearchByTerm: Interrogation de ressources externes assistée par des vocabulaires terminologiques

○ Tapis: Serveur de données terminologiques

○ Tedit: Interface de gestion des données terminologiques

DevolpR6 - 16 juin 2011 - [email protected] - 03 / 29 Termsciences

● Portail Web : http://www.termsciences.fr ● Ressource terminologique multidisciplinaire ● Multi vocabulaires ● Multi institutions (INIST, INRA, INRIA, INSERM ...)

DevolpR6 - 16 juin 2011 - [email protected] - 04 / 29 SearchByTerm

● Service Web ● Recherche assistée par de la terminologie ● Accès à différentes ressources bibliographiques

DevolpR6 - 16 juin 2011 - [email protected] - 05 / 29 Tapis

● Serveur de données et de traitements (sans IHM) ● Données terminologiques ● Service Web RESTful

DevolpR6 - 16 juin 2011 - [email protected] - 06 / 29 TEdit

● Interface de gestion des données de Tapis ● Outil de production des terminologies à l'INIST ● Rich Internet Application

DevolpR6 - 16 juin 2011 - [email protected] - 07 / 29 Architecture

DevolpR6 - 16 juin 2011 - [email protected] - 08 / 29 TEdit : Choix d'une RIA

● Définition : Une RIA est une application Web qui partage les caractéristiques des applications autonomes sur l'ordinateur.

● Application Web (client léger) ● Caractéristiques d'un logiciel traditionnel ● Données récupérées sur les serveurs de données via web Services ● Aucune installation à part le navigateur ● MAJ effectuée sur le serveur, donc transparent pour l'utilisateur ● Exemples de RIA : Gmail, Google Docs, Deezer ...

DevolpR6 - 16 juin 2011 - [email protected] - 09 / 29 Framework

● Ally ● Ample SDK ● DHTMLX ● Dojo ● Ext JS ● GWT () ● SproutCore ● Midori ● JQuery ● PrototypE

DevolpR6 - 16 juin 2011 - [email protected] - 10 / 29

DevolpR6 - 16 juin 2011 - [email protected] - 03 / 29 ● Framework JavaScript RIA ○ Libre et gratuit ○ Supporté et développé par ○ Mature (créé en 2004) ○ Version 1.4 sortie en février 2011 et la 1.5 est en phase de test ○ Des exemples impressionnants : GMX, SPAR ... ○ Documentation riche ○ Un Demo Browser avec une centaine d'exemples sur leur site avec le code source ○ Un playground sur leur site pour tester soi-même des petits bouts de codes

DevolpR6 - 16 juin 2011 - [email protected] - 11 / 29 L'environnement qooXdoo

● Application structurée par le framework ● Création simple en lançant des commandes qooXdoo via Python ● Séparation entre la version de développement et la version déployée

DevolpR6 - 16 juin 2011 - [email protected] - 12 / 29 Le développement

● generate.py source : génère la version de développement

○ Mise dans un répertoire "Source" séparant les classes des ressources

○ Développement en JavaScript orienté Objet ( Classes, héritages )

○ Aucun HTML, aucun CSS, que des objets du framework qooXdoo

○ Répertoire ressource : permet d'y mettre nos images pour l'interface

○ IDE spekt : module intégrable à Eclipse permettant l'auto-complétion des fonctionnalités qooXdoo

○ Possibilité de mettre des traces directement dans le navigateur à l'exécution de l'application

○ Compatible avec tous les navigateurs même si Chrome a un meilleur moteur JavaScript

DevolpR6 - 16 juin 2011 - [email protected] - 13 / 29 Le déploiement

● generate.py build : Génère la version de production ○ Un répertoire "build" est créé avec les ressources (images) et un fichier script appelé par "index."

○ Le fichier script (TEdit.js) ■ Optimisé ■ Réorganisé ■ N'incluant que les classes nécessaires à l'application ■ Supprimant les commentaires et le code de débogage ○ Plus de mode de débogage ○ L'application est ainsi plus rapide ○ Fichier inutilisable pour le développement

DevolpR6 - 16 juin 2011 - [email protected] - 14 / 29 La documentation

● Framework complètement documenté : objets, classes, méthodes, événements, propriétés ● generate.py api : génère la documentation de notre application avec les commentaires comme du JavaDoc

DevolpR6 - 16 juin 2011 - [email protected] - 15 / 29 La gestion du Framework

La gestion est simplifiée par :

● Mise à jour du framework: ○ Le copier dans l'arborescence de l'application ○ Modifier le fichier de configuration pour indiquer le n° de version ○ generate.py migration : identifie dans le code, les changements à effectuer si des objets ne sont plus maintenus.

● Tests unitaires ○ generate.py test : Génère des tests unitaires

DevolpR6 - 16 juin 2011 - [email protected] - 16 / 29 Les interfaces Web avec qooXdoo

● Aucun code HTML ou CSS n'est nécessaire

● Appel aux objets fournis par le framework ○ Formulaires, fenêtres, arbres, listes, tables, boutons...

● Mise en place des objets par des conteneurs

● Possibilité de couper les écrans par des splitters

● Customisation des objets qooXdoo simple

● Gestion complète du clic droit : il n'est plus géré par le navigateur

DevolpR6 - 16 juin 2011 - [email protected] - 17 / 29 Les objets "Formulaire"

DevolpR6 - 16 juin 2011 - [email protected] - 18 / 29 Les objets "Table"

DevolpR6 - 16 juin 2011 - [email protected] - 19 / 29 Les objets "Arbre"

DevolpR6 - 16 juin 2011 - [email protected] - 20 / 29 Les objets "Liste"

● Liste personnalisée

● Liste groupée

DevolpR6 - 16 juin 2011 - [email protected] - 21 / 29 Les objets "Menu"

● Barre de menu

● Menu contextuel sur clic droit

DevolpR6 - 16 juin 2011 - [email protected] - 22 / 29 Les objets "Fenêtre"

DevolpR6 - 16 juin 2011 - [email protected] - 23 / 29 Les objets "Auto-Suggest personnalisé"

DevolpR6 - 16 juin 2011 - [email protected] - 24 / 29 Les évènements

Chaque objet qooXdoo possède sa liste d'évènements:

● Sur clic ● Sur double clic ● Sur exécution ● Sur ouverture ● Sur ouverture ou fermeture du nœud d'un arbre ● Sur glisser / déposer

DevolpR6 - 16 juin 2011 - [email protected] - 25 / 29 Les données

● Toutes les données sont sur le serveur TAPIS ● Juste quelques préférences en cookie dans TEdit ● Toutes les données affichées, ajoutées ou modifiées se font par Web Services

● En appelant Tapis avec des requêtes RESTful

● Ces requêtes sont envoyées en avec l'objet ○ qx.io.remote.Request

DevolpR6 - 16 juin 2011 - [email protected] - 26 / 29 Ajax : qx.io.remote.Request

● Paramètres de la requête ○ URL ○ Méthode (GET, POST, PUT, etc.) ○ MIME-TYPE de la réponse (text/plain, application/ ...) ○ Asynchrone ou pas ○ Les données à envoyer en PUT ○ Modifier l'entête de la requête, ex : "Content-Type" = "text/x-url"

● Évènements sur la requête ○ Completed ○ Failed ○ Timeout ○ Sending ○ Aborted DevolpR6 - 16 juin 2011 - [email protected] - 27 / 29 Conclusion

● Framework complet ● Bien documenté ● Offrant de multiples possibilités ● Beaucoup d'outils pour faciliter le développement et le déploiement ● Personnalisation des objets

DevolpR6 - 16 juin 2011 - [email protected] - 28 / 29 La démo : TEdit 1.2

DevolpR6 - 16 juin 2011 - [email protected] - 29 / 29