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