Rich Internet Application développée avec Manifestation DevelopR6 du 16 juin 2011 Développement d'Interfaces Hommes Machines [email protected] Plan ● Le contexte ● TEdit: choix d'une RIA ● qooXdoo : 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 javascript ● Ally ● Ample SDK ● DHTMLX ● Dojo ● Ext JS ● GWT (Google Web Toolkit) ● 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.xml" ○ 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 Ajax 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/json ...) ○ 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.