Client Internet Riche - Premiers pas avec AJAX

| Thomas Maul | traduit de l'anglais par Christophe Keromen |

Cette note technique fournit de l’information de base sur Ajax, présente les étapes initiales de la réalisation d’architecture reposant sur Ajax couplé avec 4D. Ajax suppose un usage intensif de XML. Les fonctionnalités puissantes dans ce domaine de la version 2004 de 4D permettent un développement rapide de solutions Ajax. Une base exemple est fournie afin d’illustrer l’architecture Ajax. ♪

- Titre : Client Internet Riche - Premiers pas avec AJAX

- Auteurs : Thomas Maul, traduit de l'anglais par Christophe Keromen

- Parution : 1 février 2006

- Licence : Ce document est issu de https://www.developpez.com et reste la propriété exclusive de son auteur. La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.

Sommaire

- Introduction

- Ajax, qu’est-ce que c’est ?

- Quelques exemples…

- Comment fonctionne Ajax ?

- JavaScript

- L’objet XMLHTTPRequest

- Le client riche Internet

- Le cache du navigateur Web

- Exemples en profondeur…

- Double combo box

- Saisie prédictive

- Live Grid

- Ressources Ajax

- Conclusion

- Base exemple

Introduction

Tandis que la plupart des applications Internet se contentent d’une interface utilisateur rustique, une nouvelle génération d’applications Web est apparue récemment. Ces applications Web utilisent une interface riche proche de celle d’une application de bureau habituelle. Google (Google Mail, Google Map or Google Suggest) ou Flickr en sont quelques exemples.

Ces pages Web proposent des fonctionnalités comme la saisie prédictive, le glisser-déposer et les animations, le tout associé à une communication asynchrone avec le serveur Web. À la différence des pages Web traditionnelles, elles n’envoient pas la totalité des données entrées au serveur afin de recharger complètement la page ; seules certaines parties des données sont envoyées et remplacées dans la page existante, ce qui autorise des clients plus rapides et plus conviviaux.

Cette technique se nomme Asynchronous JavaScript And XML (AJAX) et regroupe plusieurs standards existants. Quoique les sites utilisant cette technique soient encore peu nombreux, l’idée n’est pas nouvelle. Une session du 4D Summit 2004 à la Nouvelle Orléans a traité d’Ajax. Elle était intitulée « XMLHTTPRequest » et expliquait comment utiliser Ajax pour Dashboard(1). Ceci est la première note technique à couvrir ce sujet.

Note du traducteur :
Le livre blanc rédigé par Gérald Czwiklinski (4D S.A) : Publication d’applications AJAX
Ce même document est également disponible sur le site de 4D : http://www.4d.fr/support/pdf/docs/WP_Ajax.pdf

Ajax, qu’est-ce que c’est ?

Wikipedia fournit la définition suivante d’Ajax :

Asynchronous JavaScript And XML, ou Ajax (prononcé comme un mot, non comme une succession de lettres), est une technologie de développement Web se proposant de créer des applications Web interactives en combinant :

• XHTML (ou HTML) et CSS
pour marquer et présenter l’information (XML est utilisé communément, cependant tout format peut convenir, du HTML préformaté au texte brut en passant par JSON et même EBML) ;

• le Document Object Model (DOM : modèle objet du document)
manipulé par JavaScript afin de procurer un affichage dynamique et d’interagir avec l’information présentée ;

• l’objet XMLHTTPRequest
afin d’échanger des données de manière asynchrone avec le serveur Web. Dans certains frameworks Ajax ou dans certaines situations, un objet IFrame est utilisé au lieu d’un objet de XMLHttpRequest afin d’échanger des données avec le serveur Web.

Quelques exemples…

La définition peut sembler très complexe et difficile. Il est beaucoup plus facile de comprendre la puissance d’Ajax au travers de quelques exemples simples. Démarrer la base exemple, sur MacOSX ou Windows, avec 4D 2004. La base reprend la démo « Video library ». Cette base de données contient approximativement 1 500 films et 1 300 acteurs.

Cliquez sur le bouton « Lancer le navigateur » pour ouvrir un navigateur et vous connecter au serveur Web du 4D local (ou entrez http://127.0.0.1:8080 pour une connexion manuelle). Notez que le serveur Web fonctionnera en mode démo si une licence 2004 serveur Web n’est pas installée. Cliquez sur le lien « Saisie prédictive : suggestion d’acteur ». Cela provoque le chargement de la page « ActorSuggest.html » :

Commencez à taper un prénom ou un nom ; essayez votre prénom ou le nom d’un de vos acteurs de cinéma favori. Pendant qu’un nom est saisi, le système va commencer à le rechercher et va montrer les correspondances possibles dans la zone de texte située au-dessous.

Note :
4D a besoin de charger les index dans le cache pour optimiser la vitesse de recherche. En conséquence, il faudra exécuter une ou deux recherches pour obtenir les performances maximales.

Ensuite essayer d’utiliser les touches flèche haut et flèche bas pour sélectionner un nom. La touche Entrée insère le nom complet. La navigation est également possible à l’aide de la souris. Si vous utilisez Firefox et que l’extension « Live HTTP Headers » (« Entêtes http en direct » en français) est installé, ouvrez le dialogue « Live HTTP Headers » et observez les entêtes pendant que des changements sont apportés au champ texte avec auto complétion.

Remarque :
vous pouvez télécharger l’extension « Live HTTP Headers » gratuitement ici :
http://livehttpheaders.mozdev.org

Cette extension est très utile pour le débogage des projets Web et se révèle indispensable dans le cadre de développement Ajax.

Remarquez que lors de la saisie de texte, le navigateur envoie des requêtes invisibles vers le serveur Web de 4D en lui passant le contenu du champ texte courant. 4D répond avec la liste des valeurs possibles.

Remarquez également que le client utilise son propre cache afin d’éviter des requêtes superflues si les données sont déjà disponibles. Pour tester ceci, essayez de taper 'alc'. Il y a seulement quatre noms qui correspondent à cette chaine de caractères. Saisir 'alca' ou 'alco' ne provoquera pas l’envoi d’une nouvelle requête vers le serveur, car le résultat est déjà connu.

Impressionnés ? OK, alors essayons l’exemple suivant. Utilisez le bouton « Retour arrière » du navigateur. Remarquez qu’un seul clic suffit pour vous ramener à la page d’accueil ! Même si plusieurs recherches sont effectuées, toutes les requêtes échangées pour la fonction de saisie prédictive l’ont été sans changer l’URL de la page Web. Le navigateur pense donc se trouver toujours sur la même page.

Cliquez sur le lien « Grille dynamique » pour ouvrir l’exemple suivant :

Remarquez la zone avec défilement vertical.

La plupart du temps, la construction d’un site Web recourt à la génération de liens pour gérer la pagination des données, par exemple :

<Page précédente> 1 2 3 4 5 6 7 8 9 1 0 2 0 3 0 4 0 <Page suivante>

Cette manière de procéder est tellement répandue qu’on l’utilise généralement sans y penser.

D’un autre côté, les développeurs 4D sont familiers du concept de MODIFIER SELECTION que 4D propose depuis plus de vingt ans. De plus, depuis 4D Server version 1.0 (1992), l’interface utilisateur de 4D Client est conçue pour ne montrer que la partie visible de la sélection ce qui fait que seule la partie visible est transférée au travers du réseau. L’utilisateur peut alors faire défiler l’ascenseur pour naviguer au travers de la sélection.

Il serait plutôt intéressant de disposer d’une interface utilisateur similaire dans une application Web, non ? C’est ce que permet Ajax !

Essayez de déplacer l’ascenseur sur la page « Grille dynamique ». En fonction de la vitesse de l’ordinateur client (et du réseau), le rafraîchissement de la page sera instantané ou demandera un petit délai. Lorsque l’ascenseur est déplacé, le navigateur demande les données à 4D dynamiquement, sans modifier l’URL de la page Web. Essayez également les boutons de défilement de l’ascenseur.

En observant la communication client/serveur au travers des « HTTP Live Headers », vous noterez que l’échange de données est très optimisé. Le client demande les 70 premiers films (même si les 10 premiers seulement sont affichés). Cela permet le défilement sans requête additionnelle. Si l’ascenseur est avancé manuellement, les 70 enregistrements suivants sont demandés. S’il n’y a aucune requête pendant une seconde, les 70 enregistrements précédents sont demandés afin de permettre le défilement arrière, en utilisant le cache.

La page de grille dynamique permet également de trier sur les colonnes. Essayez de cliquer sur « Année » ou « Réalisateur ». Un deuxième clic permet de changer l’ordre de tri.

Comment fonctionne Ajax ?

Ajax combine plusieurs technologies.

Tout d’abord, la plus importante : JavaScript. JavaScript contrôle toutes les actions côté client (navigateur). L’approche Ajax ne saurait se passer de JavaScript, ce qui représente son inconvénient majeur. Si JavaScript est désactivé, plus rien ne fonctionne. Et comme des motifs de sécurité peuvent conduire à la désactivation de JavaScript, il peut être nécessaire de prévoir une interface utilisateur alternative à Ajax.

Le Modèle Objet de Document (DOM) permet la manipulation d’objets, par exemple une cellule dans un tableau (l’exemple de grille dynamique utilise un tableau de 10 lignes ; le code JavaScript remplace le contenu des cellules du tableau pour émuler le défilement). Les feuilles de style en cascade (CSS) apportent la gestion de l’apparence, la possibilité de créer, déplacer et redimensionner des objets au vol, comme dans l’exemple de saisie prédictive.

L’objet « XMLHTTPRequest » constitue la dernière technologie de base, introduite avec Microsoft Internet Explorer 5.5 et Safari 1.2. C’est l’élément clé qui permet d’obtenir l’échange de requêtes asynchrones entre le navigateur Web et le serveur en arrière-plan, sans parasiter l’utilisateur, même sur des réseaux Internet lents.

Cette note technique ne couvrira pas en profondeur les concepts JavaScript, DOM ou CSS (à l’exception d’une courte introduction à JavaScript). Il existe de nombreux livres d’apprentissage et des sites Web dédiés à ces sujets.

JavaScript

Vous pouvez passer cette section si vous possédez une expérience avec DOM et JavaScript.

JavaScript est un langage simple de scripting. Il n’a de rapport avec Java qu’au niveau de la syntaxe (et même à ce niveau, il n’est pas aussi strict).

Pour plus d’informations, reportez-vous au Wikipedia. Cette page contient les étapes de base pour l’apprentissage de JavaScript et une collection de liens vers des tutoriels, guides, etc.

La démo propose un exemple JavaScript simple. Utilisez le bouton retour arrière du navigateur Web (ou reconnectez-vous sur http://127.0.0.1:8080, en supposant que la démo soit en cours d’exécution) et cliquez sur « HTML simple ».

Dans les champs texte, entrez des valeurs. Dès que vous quittez un champ, la valeur saisie est recopiée dans un autre champ texte (non saisissable). Ce comportement est très similaire à celui obtenu par l’événement « Sur données modifiées » dans 4D.

Effectuez un clic droit sur la page Web et visualisez le source (ou ouvrez le fichier « SimpleHTML.html » du dossier « DossierWeb » avec un éditeur de texte). Le code HTML (section body) contient un formulaire et, à l’intérieur du formulaire, un tableau. Le tableau contient quatre rangées, une pour l’entête et trois pour les champs texte. Chaque rangée contient deux cellules. Voici le code HTML des cellules :

<td width="103" colspan="2" class="in_label" nowrap>
<input name="artNew1" type="text" class="inp" style="width: 50px; margin-left: 5px;" ID="Input1" onChange="setTextValue('Text1', this)">
</td>
<td width="450" class="in_label" ID="Text1">
</td>

Remarquez que chaque cellule possède un attribut ID. Les ID sont l’élément clé de ce concept, car ils permettent depuis JavaScript un accès direct à n’importe quel objet de la page.

Outre l’information sur l’aspect visuel du champ texte, la première cellule contient également du code :

onChange="setTextValue('Text1', this)"

En 4D cela pourrait être équivalent à l’appel d’une méthode setTextValue sur l’événement Sur données modifiées de la méthode objet :

code 4D

$event := Evenement formulaire
Au cas ou
: ($event := Sur données modifiées )
setTextValue("Text1", Self)
Fin de cas

La méthode JavaScript reçoit deux paramètres, une constante de type texte avec le contenu « Text1 » et un pointeur sur l’objet courant (qui s’appelle « Self » en 4D et « this » en JavaScript).

Le premier paramètre « Text1 » est l’ID de la cellule à modifier. Dans l’entête de la page HTML on trouve la définition de la méthode JavaScript (appelée fonction dans ce langage).

<script type="text/javascript">
function setTextValue(id, obj)
{
document.getElementById(id).innerHTML = obj.value;
}
</script>

Le corps de la fonction ne comprend qu’une ligne. Il accède au document (souvenez-vous DOM = Document Object Model) et à l’intérieur du document il cherche l’élément correspondant à l’ID. Ce concept permet l’accès à tous les objets existants dans le document à partir du moment où ils possèdent un ID unique. L’attribut « innerHTML » permet d’attribuer toute valeur à un objet, y compris du code HTML. Le second paramètre « obj » est une sorte de pointeur sur l’objet appelant, qui contient la nouvelle valeur.

Assurez-vous de bien comprendre ces prémisses JavaScript avant de poursuivre les sections suivantes. En l’absence d’une compréhension des bases de JavaScript, la suite peut se révéler difficile à comprendre.

Le débogage des problèmes JavaScript peut se révéler difficile. Par exemple, souvent le navigateur semble ne rien faire. Il s’agit là de la réaction habituelle à une erreur de programmation ; l’exécution s’arrête simplement. Firefox propose un outil nommé « Console JavaScript » qui liste les erreurs d’exécution. Cela se révèle une aide précieuse pendant la mise au point. Jetez également un œil au Venkman JavaScript Debugger, un débogueur gratuit qui permet de tracer le JavaScript et de lire/écrire des variables : http://www.mozilla.org/projects/venkman/

Note du Traducteur :
L’add-on Web Developer est également à considérer :
https://addons.mozilla.org/firefox/60/

L’objet XMLHTTPRequest

L’objet XMLHTTPRequest a été développé à l’origine par Microsoft. Il est disponible depuis la version 5.0 d’Internet Explorer sous forme d’objet ActiveX accessible via JScript, VBScript ou autres langages de scripting supportés par le navigateur.

Les contributeurs Mozilla ont réalisé une version native compatible dans Mozilla 1.0. Apple a suivi avec la version 1.2 de Safari et Opera Software avec Opera 8.0. Cet objet permet d’effectuer des requêtes vers un serveur Web sans soumettre et recharger l’intégralité de la page. Quoique les données soient souvent structurées en XML, il peut s’agir de n’importe quelles données en texte.

Ce sujet est exploré avec plus de détail dans les notes sur la session du 4D Summit 2004, pages 377-381.

Une session minimale XMLHTTRequest ressemble à ceci :

var oXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP")
var sURL = "/csutomerIDcheck.xml?username="+custid;
oXMLHTTP.open("POST", sURL, false);
oXMLHTTP.send();
alert(oXMLHTTP.responseText);

Ce code minimaliste utilise un objet Microsoft, ce qui peut contrarier son fonctionnement dans les navigateurs non Internet Explorer.

Mozilla utilise un autre objet, de sorte qu’il nous faut tester quel objet est disponible, de manière à fonctionner sur n’importe quel navigateur :

if (window.XMLHttpRequest){
oXMLHTTP =new XMLHttpRequest();
} else if (window.ActiveXObject){
oXMLHTTP =new ActiveXObject("Microsoft.XMLHTTP");
}

Le troisième paramètre de la méthode « XMLHTTPRequest.open » est le booléen async (« false » dans le code ci-dessus) qui indique au navigateur d’attendre ou non que le serveur ait répondu avant de poursuivre l’exécution du code. En vue d’un fonctionnement en mode asynchrone, il faudra rajouter du code pour gérer les réponses du serveur, nous verrons cet aspect plus loin.

Gérer les erreurs en mode asynchrone n’est pas une mince affaire. La bonne nouvelle réside dans le fait que de nombreux exemples existent déjà. Tapez simplement « XMLHttpRequest » dans Google. Le site Web d’Apple contient un exemple (avec le support de Microsoft Internet Explorer sur Windows) :
http://developer.apple.com/Internet/webcontent/xmlhttpreq.html

Pour développer des applications Web dynamiques plus complexes, il est utile de recourir à un framework JavaScript. Ces frameworks comme « Prototype » ou « Rico », contiennent déjà le code pour la gestion de l’objet XMLHttpRequest. Reportez-vous aux exemples « Saisie prédictive » ou « Grille dynamique » pour plus d’information.

Le client riche Internet

La prochaine étape consiste à assembler le tout et à le relier à 4D. Prenons l’exemple « Ajax simple ». Cet exemple ressemble à « HTML simple », mais communique avec 4D au travers de l’objet XMLHttpRequest.

Entrez n’importe quelle chaine de caractères (pour simuler des numéros d’ordre) dans les champs texte. Dès que vous quittez le champ (c’est-à-dire par tabulation ou en cliquant sur le champ suivant) le texte entré suivi de l’heure courante est affiché. Ces données proviennent de 4D.

Ouvrez le fichier HTML « SimpleAjax.html » (dans le dossier « DossierWeb ») et le fichier « SimpleHTML.html » avec un éditeur de texte ou HTML afin de comparer les deux. Le corps HTML des deux documents est identique (à l’exception des commentaires). La différence se situe dans l’entête HTML.

Dans l’exemple « SimpleHTML.html » sans Ajax, la fonction setTextValue est définie comme suit :

function setTextValue(id, obj)
{
document.getElementById(id).innerHTML = obj.value;
}

Tandis que la version Ajax définit deux fonctions :

function setTextValue(id, obj)
{
var url = "/4DAction/Ajax_SimpleRequest/"+obj.value;
var loader = new net.ContentLoader(url, ActionCompleted);
loader.returntarget = id;
}
function ActionCompleted()
{
document.getElementById(this.returntarget).innerHTML = this.req.responseText;
}

La première ligne de la fonction « setTextValue » crée une variable et lui assigne une URL. L’URL contient une méthode nommée « Ajax_SimpleRequest », qui sera appelée par 4DAction, et le contenu d’un champ texte comme paramètre.

La seconde ligne définit l’objet qui gérera toute la communication Ajax. Cet objet est défini dans le fichier « scripts/ContentLoader.js ». Cette ligne crée l’objet et lui passe l’URL et le nom de la fonction (« ActionCompleted ») à appeler dès que le serveur aura retourné sa réponse.

La dernière ligne ajoute une variable à l’objet afin de se rappeler l’id que nous voulons changer. La fonction « ActionCompleted » est appelée dès que le serveur répond. Les données sont stockées dans this.req.responseText.

Cet exemple fait ressortir un problème potentiel. Attendez quelques instants, puis entrez de nouveau la valeur précédente (dans le même champ texte ou un autre). Remarquez que l’heure n’est pas mise à jour.

Ceci se produit, car le navigateur Web n’a pas envoyé de requête vers le serveur Web de 4D : au lieu de cela, il a utilisé son cache. Vous pouvez le vérifier grâce à Live HTTP Headers. Si la réponse renvoyée par le navigateur demeure inchangée (comme un nom de produit), cela peut être vu comme une fonctionnalité pour réduire le trafic réseau. En revanche, si la réponse peut être différente (par exemple le nombre de produits en stock), cela représente un problème…
La section suivante explique comment remédier à cela.

Jetez un œil au code 4D de « Ajax_SimpleRequest » dans la démo (cliquez au besoin sur le bouton « Allez en mode structure » pour vous rendre… en mode structure.

code 4D

$request := Sous chaine($1;2)
$answer := $request+" Heure : "+Chaine(Heure courante)
ENVOYER TEXTE HTML($answer)

Positionnez un point d’arrêt sur la première ligne. Retournez au navigateur Web et entrez quelques nouvelles valeurs dans les trois champs texte. Le débogueur 4D s’arrêtera sur le point d’arrêt. Cela simule un serveur Web « vraiment lent »; 4D ne répondra que lorsque l’exécution reprendra. Notez que le texte au-dessous du champ n’a pas changé.

Cependant, même si le serveur Web est lent (ou ne répond pas du tout), le client demeure utilisable.

L’application fonctionne, seules les réponses du serveur manquent, grâce au fonctionnement asynchrone.

Retournez dans 4D et cliquez sur le bouton « Pas de trace » (triangle vert) dans le débogueur (remarquez qu’il y a une fenêtre de débogueur pour chaque requête transmise). Les réponses devraient apparaître dans la fenêtre du navigateur. La variable « loader.returntarget » identifie l’objet auquel appartient la réponse.

Le cache du navigateur Web

Nous venons de constater que le cache du navigateur Web peut empêcher les requêtes d’être renvoyées vers le serveur. Il existe plusieurs moyens de répondre à ce problème. Une recherche Google sur « Ajax cache navigateur » affiche plusieurs discussions et pistes possibles.

La solution la plus simple est d’envoyer une requête en utilisant la méthode POST, comme pour un formulaire HTML. Dans ce cas, le navigateur n’utilise pas le cache et envoie toujours la requête au serveur Web.

Essayez « Ajax simple - utilisation de POST ». Envoyez une requête, attendez quelques instants et utilisez la même valeur. L’affichage d’une heure à jour montre que le cache du navigateur n’est pas utilisé.

Dans cet exemple, le code 4D est légèrement modifié :

code 4D

TABLEAU TEXTE($name;0)
TABLEAU TEXTE($values;0)
LIRE VARIABLES FORMULAIRE WEB($name;$values)
Si (Taille tableau($values)>0)
$request := $values{1}
$answer := $request+" Heure : "+Chaine(Heure courante)
ENVOYER TEXTE HTML($answer)
Sinon
$answer := "Erreur de communication avec le serveur - pas de paramètre"
ENVOYER TEXTE HTML($answer)
Fin de si

La commande LIRE VARIABLES FORMULAIRES est utilisée pour relire le paramètre puis on lui adjoint l’heure courante. Un autre contournement possible au problème du cache du navigateur consiste à modifier l’entête http pour changer la date d’expiration. Cette solution est employée dans les exemples plus avancés présentés dans cette note (« Saisie prédictive » et « Grille dynamique »).

Exemples en profondeur…

Double combo box

Les exemples « Ajax simples » sont très simples. Cependant, ils mettent en œuvre les fonctionnalités basiques de la conception Ajax et démontrent une expérience utilisateur très nettement améliorée.

Le prochain exemple, « Double Combo Box » demande plus de code JavaScript et montre comment utiliser du code générique.

Cet exemple s’inspire du chapitre 9 du livre « Ajax in Action », chapitre disponible en libre téléchargement ici :
http://www.manning.com/crane/

Ce chapitre du livre explique en détail comment bâtir une combo box qui modifie le contenu d’une seconde combo box. Imaginez un système de location vidéos en ligne. La première combo box sélectionne la catégorie du film. La seconde liste les films disponibles dans cette catégorie après avoir demandé au serveur de vérifier la disponibilité.

Sélectionnez l’exemple « Double combo box » dans le navigateur Web. Notez que la seconde combo box est vide. Utilisez la première pour sélectionnez une catégorie, la seconde combo box affiche les films disponibles dans cette catégorie.

Cet exemple montre également un problème potentiel. Sélectionnez la catégorie « Action » et immédiatement ouvrez la seconde combo box. L’ancien contenu sera affiché. Si la combo box est maintenue ouverte, elle affichera les valeurs correctes au bout de 2 à 3 secondes. Ce délai survient, car il y a presque 500 films dans la catégorie « Action » et cela prend un certain temps à JavaScript pour construire la combo box correspondante. Voilà donc un exemple d’un mauvais usage d’une combo box (une list box serait préférable) mais cela n’empêche pas d’apprécier la puissance du code asynchrone.

Le code 4D de cet exemple est très similaire à celui de l’exemple précédent. Nous appelons de nouveau LIRE VARIABLES FORMULAIRES pour relire les paramètres. En raison de la présence de plusieurs items dans la réponse, nous utilisons XML pour envoyer les données. Remarquez cependant que, quoique « x » dans Ajax représente le XML, c’est la première fois que nous utilisons XML dans ces exemples. Comme nous l’avons mentionné plus tôt, il est possible de répondre avec n’importe quel type de données textuelles ; texte brut, HTML, XML, images encodées, etc. Les commandes DOM de 4D 2004 sont mises à contribution pour préparer le flux XML.

Voici le HTML de l’exemple « Double combo box » :

<head>
<script type="text/javascript" src="ricoscripts/prototype.js"></script>
<script type="text/javascript" src="ricoscripts/rico.js"></script>
<script type="text/javascript" src="ricoscripts/doubleCombo.js"></script>
<script type="text/javascript" >
function injectComponentBehaviors() {
var doubleComboOptions = { };
new DoubleCombo( 'Group','Movies','/4DAction/Ajax_DoubleCombo',doubleComboOptions ) ;
}
</script>
</head>
<body onload="injectComponentBehaviors()">
<form name="form1" autocomplete="off" id="form1">
<p><strong><font face="Arial">Double Combo Box</font></strong></p>
...
<select name="Group" id="Group">
<option value="-1">S&eacute;lectionner une cat&eacute;gorie</option>
...
</select>
<select name="Movies" id="Movies" style="width: 200px;">
</select>
...
</body>

Le code JavaScript est basé sur les frameworks mentionnés au préalable :

Regardez le corps HTML. Remarquez que les deux combos boxes (introduites par la balise <select> ne contiennent aucun JavaScript ! Cela facilite l’intégration dans des pages Web existantes puisqu’aucune modification du code HTML n’est requise. Le code de l’entête « injecte » la fonctionnalité. L’objet DoubleCombo (défini dans la fonction injectComponentBehaviors) effectue la plus grande partie du travail ; le premier paramètre règle la combo box maîtresse ; le second paramètre gère la combo box esclave (les objets sont identifiés grâce à l’attribut id); le troisième paramètre représente l’URL à appeler; le dernier paramètre permet de régler des options qui ne sont pas nécessaires ici.

Ce concept rend l’amélioration des pages Web existantes très facile. Pour des informations détaillées sur le code JavaScript, lisez le chapitre 9 de « Ajax in Action ». Remarquez que quelques modifications mineures ont été apportées à « DoubleCombo.js » afin de le rendre compatible avec Safari.

Saisie prédictive

La structure de cet exemple a déjà été expliquée. Regardez le code 4D.

La méthode 4D AjaxActorSuggest gère la partie serveur. Le code est très similaire à l’exemple de la combo box. Les paramètres sont récupérés au moyen de la commande LIRE VARIABLES FORMULAIRES et la réponse est construite sous forme de structure XML. Le code JavaScript utilise les mêmes concepts que pour « Double combo box ». Une fonction générique injecte la fonctionnalité dans le code HTML. Regardez « ActorSuggest.html », c’est très semblable à « DoubleCombo.shtml ».

Note du traducteur :
Ne fonctionne cependant pas avec Safari 1.3.2.

Live Grid

Voici l’exemple le plus complexe de cette note technique. Il met à contribution le framework openRico, lequel repose lui-même sur le framework Prototype. Pour explorer plus en détail le framework OpenRico rendez-vous à cette adresse :
http://ww.openrico.org

Consultez en particulier les exemples montrant les fonctionnalités graphiques, comme les animations. Vous y trouverez également un PDF expliquant comment utiliser la fonction LiveGrid (grille dynamique).

Les principales étapes sont :

- la construction d’un tableau HTML, assurez-vous d’utiliser un ID de tableau afin d’identifier le tableau et des déclarations <DIV> pour organiser le tableau (conteneur, entête, corps). Le tableau peut contenir des données pour les premières lignes, mais peut également être vide. Il doit contenir au minimum une ligne de plus que la dernière affichée ;

- sur Onload appelez Rico.LiveGrid pour construire la fonctionnalité de grille dynamique, passez le nom du tableau, le nombre de lignes et l’URL du serveur. Cet objet redéfinira le tableau au nombre correct de lignes, demandera les données au serveur, construira un cache interne, créera un ascenseur, la fonction de tri sur entête… en fait à peu près tout le travail nécessaire !

- créer une méthode 4D pour la gestion côté serveur.

L’objet Rico.liveGrid permet d’appeler l’inclusion de méthode à chaque défilement, ce qui autorise la modification d’autres objets dans la page. L’exemple « Grille dynamique » en donne une illustration avec l’affichage d’un entête donnant la position courante du défilement et le tri courant (objet et ordre).

La méthode 4D Ajax_LiveGrid effectue la gestion côté serveur. Cette méthode est très semblable aux exemples « Combo Box » et « Saisie prédictive » : elle relit les paramètres et construit une réponse XML.

Pour voir le contenu de la réponse XML de la grille dynamique, saisissez cette URL dans le navigateur Web :

http://127.0.0.1:8080/4DAction/Ajax_LiveGrid?id=data_grid&page_size=70&offset=400&_

Remarquez que la réponse XML contient du code HTML. Il s’agit de la partie préformatée qui sera insérée dans le tableau HTML.

Note du traducteur :
Ne fonctionne cependant pas avec Safari 1.3.2

Ressources Ajax

Quoiqu’Ajax soit une combinaison de concepts existants, il existait très peu de livres couvrant de manière spécifique le développement Ajax au moment de la rédaction de cette note technique. Il y a beaucoup de sites Web dédiés à ce sujet, mais comme la conception Ajax est relativement récente, les URL's changent souvent, c’est pourquoi nous ne fournissons pas de liste de ressources ici.

Note du traducteur :
Au moment de la traduction, les choses ont déjà nettement évolué et une simple recherche sur Amazon par exemple retourne une liste de plusieurs ouvrages en anglais. Quant au français, si l’on filtre les pièces de Sophocle et l’épopée du mythique Ajax d’Amsterdam des années 70, on ne retrouve pour l’instant que des prévisions de sortie qui se comptent sur les doigts de la main.

Le site Web d’IBM propose une introduction à Ajax, contenant des liens vers de nombreux articles :
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html

Wikipedia fournit également sa liste de tutoriels :
https://en.wikipedia.org/wiki/Ajax_%28programming%29

Cette note technique utilise un objet introduit dans le chapitre 9 du livre « Ajax in Action » by Dave Crane (ISBN 1932394613), qui peut être téléchargé depuis :
http://www.manning.com/crane/
Le source JavaScript peut être chargé depuis la même page.
Ce livre contenant une introduction à JavaScript, CSS et DOM constitue une bonne ressource pour débuter le développement Ajax. Il explique en détail comment faire les choses et ensuite montre comment créer des objets plus génériques et réutilisables. Il existe également un film de 18 minutes sur le site Web montrant le contenu et les exemples du livre.

Notes du traducteur :
• Ce livre vient d’être traduit sous le titre « AJAX en pratique » chez Pearson Education, ISBN : 2744020605.
• Le numéro 85 du mensuel « Programmez » consacre un dossier à « Ajax : le Web nouvelle génération », avec un comparatif des différents frameworks.

Conclusion

Cette note technique procure de l’information de base sur Ajax, présente les étapes initiales de la réalisation d’architecture reposant sur Ajax couplé avec 4D.

Une base exemple est fournie afin d’illustrer l’architecture Ajax.

Base exemple

Télécharger la base exemple.

(1)la technologie de widget d’Apple apparue avec Tiger (NDT)