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.