Jesse James Garrett aurait-il pressenti la place que prendrait Ajax (Asynchronous JavaScript and XML) juste deux ans après avoir forgé cet acronyme? Quand il a écrit « Ajax : de mettre à jour, de manière progressive et asynchrone, des portions d’une page Web, sans perturber les interactions normales d’un utilisateur qui navigue, frappe, pointe et clique. Cela a conduit à une interface utilisateur plus interactive. Désormais, ces techniques sont incorporées dans des kits et des composantes UI hautement interactifs, riches, robustes, déployés sur des serveurs mais qui se comportent comme des applications sur postes de travail classiques. Ajax n’a plus rien à voir avec la banale interface navigateur page par page.
Il a gagné sa place dans les applications Web, mais quels traits prendra-t-il demain et jusqu’où ira-t-il ? En réalité, l’avenir d’Ajax dépendra de nombreux modèles de conception, packages et macros, qui visent à simplifier son coding. Pour comprendre où va Ajax, il faut bien comprendre comment ces aides au coding, appelées collectivement profils de conception, tirent parti du développement Ajax. Pour décrire les profils de conception, j’ai emprunté à des applications Ajax opérationnelles (par exemple le client e-mail Yahoo) pour construire un modèle d’applications d’interrogation et de maintenance de base de données articulé autour du System i.
Vous pouvez voir comment ces profils collaborent dans un exemple de programme de maintenance de base de données. En voyant comment les profils de conception Ajax fonctionnent réellement, vous pourrez faire de meilleurs choix pour vos propres applications, et même créer vos propres profils de conception. Avant d’entrer dans le détail des profils de conception, voyons comment différencier les profils et modèles de conception.
Profils de conception Ajax
Un modèle est en principe un profil. Mais pour les exemples et le contexte de cet article, je considère un modèle comme une implémentation spécifique de plusieurs profils de conception au moyen de techniques assimilables à de bonnes pratiques, y compris les composantes modulaires réutilisables. Donc, les modèles se situent à un plus haut niveau d’abstraction que les profils de conception.
Le modèle décrit le flux d’informations ; le profil montre comment coder un fragment spécifique d’UI ou de logique de gestion. MVC (Model-View Controller), l’architecture d’UI, est un exemple de modèle. Une fonction JavaScript qui effectue une consultation de base de données et affiche le résultat d’une certaine manière, est un exemple de profil de conception. L’exemple de modèle de maintenance de base de données que j’utilise ici se sert d’une combinaison de templates HTML, JavaScript, CSS (Cascading Style Sheets) et RPG (pour les composantes côté serveur).
Son code de production concret est adapté à des centaines d’applications dans le secteur de l’éducation K-12, mais il est suffisamment simple pour montrer clairement Ajax à l’oeuvre. Je ne suis pas expert en JavaScript et donc je préfère garder le coeur du code applicatif sur le serveur, afin que les applications se chargent rapidement. Donc, la plupart du code de l’exemple de maintenance de base de données est du RPG tournant en mode natif sur le System i. Mais n’oubliez pas que la lettre « j » dans Ajax signifie JavaScript : il faudra bien maîtriser ce dernier pour utiliser Ajax efficacement. La syntaxe JavaScript est la partie facile.
En revanche, il est plus difficile de comprendre le DOM (Document Object Model) du navigateur qui définit les propriétés, événements et méthodes concernant les fenêtres et pages du navigateur, et tous les autres éléments qui y sont contenus. La figure 1 montre un exemple d’application chargée de maintenir des enregistrements de définitions de menus et des rubriques de menus. Les fichiers base de données appartiennent à un ancien package logiciel qui tourne en mode natif sur le System i. J’ai ajouté des étiquettes pour identifier les principales parties de l’écran. La fenêtre application contient deux cadres inline. Un cadre contenu donne la vue de l’enregistrement complet et un cadre liste affiche une vue défilable de tous les enregistrements présents dans un jeu de résultats SQL associé.
L’exemple combine deux activités (navigation et maintenance) dans une même fenêtre, contrairement au profil de conception Work with classique qui est si fréquent dans les applications Web 5250 et page par page, où l’écran liste précède généralement l’écran maintenance, exigeant une navigation supplémentaire pour faire la navette entre eux. Cela n’illustre qu’un moyen d’utilisation d’Ajax pour améliorer l’efficacité de l’UI. Voyons les profils de conception déployés dans l’exemple et le rôle d’Ajax dans chacun d’eux.
Téléchargez cette ressource
Guide inmac wstore pour l’équipement IT de l’entreprise
Découvrez toutes nos actualités à travers des interviews, avis, conseils d'experts, témoignages clients, ainsi que les dernières tendances et solutions IT autour de nos 4 univers produits : Poste de travail, Affichage et Collaboration, Impression et Infrastructure.
