Code
source de l'exempleRebol et le “Remote Scripting”
Sur le site JDNet, je suis tombé
par hazard sur un exellent article, écrit par Jérôme Morlon
et dont le sujet était “Les principes du Remote Scripting”.
Cette technique permet de construire des applications Web beaucoup plus réactives
en limitant le nombre de pages HTML réclamées au serveur HTTP.
L’exemple étant malheureusement construit autour de PHP, j’ai
donc décidé d’expérimenter cette approche avec Rebol.
J’espère que cet article vous donnera quelques idées lors
de l’écriture de scripts CGI ;-)
Présentation du “Remote Scripting”
Une application Web est composée d’un ensemble de formulaires HTML.
Ils permettent à l’utilisateur de saisir des informations qui seront
traitées par les scripts CGI sur le serveur HTTP. Il arrive très
souvent que le contenu d’un champ du formulaire soit lié à
une saisie réalisée dans un autre champ.
Imaginez la boutique d’un disquaire sur Internet. Pour trouver un disque,
vous devez sélectionner la première lettre du nom de l’artiste.
Une fois ce choix fait, vous obtenez la liste des artistes. Le choix d’un
artiste affiche enfin les albums disponibles pour cette personne.
Pour réaliser cela, la solution la plus simple est d’utiliser plusieurs
pages HTML. Sur la première, vous sélectionnez une lettre. Le
formulaire est envoyé au serveur qui retourne une page contenant les
artistes. Le formulaire de cette page est ensuite de nouveau soumis au serveur
pour obtenir la liste des disques. Cela fait donc trois échanges de pages
et d’images (pour les illustrations) et surtout, une impression de lourdeur
pour l’utilisateur.
Avec le Remote Scripting, ces trois étapes peuvent être
groupées sur une seule et même page HTML que l’utilisateur
ne quitte pas avant la fin de sa saisie. Il travaille avec un unique formulaire
dont le contenu va évoluer dynamiquement. Il sélectionne la lettre
dans une liste déroulante. Quelques secondes après, la liste située
juste en dessous est mise à jour avec les noms des artistes. Un clic
dans celle-ci fait enfin apparaître les albums dans la troisième
liste déroulante du formulaire.
A aucun moment, la page HTML n’est rechargée par le navigateur : seul le contenu des champs est modifié. L’ergonomie est donc ici très proche d’une application bureautique classique.
Comment fonctionne le Remote Scripting ?
Le terme Remote Scripting signifie que l’on va déclencher
à distance des scripts sur un serveur. Le résultat de leur exécution
n’est pas affiché par le navigateur mais utilisé par celui-ci,
pour mettre à jour des champs du formulaire présents à
l’écran. Sur le serveur, vous allez utiliser de classiques scripts
CGI en Rebol. Par contre, sur le client, vous allez devoir mélanger du
HTML, du javascript et surtout utiliser le DOM (Document Object Model)
afin d’accéder aux propriétés des différents
éléments de la page HTML.
Toute la difficulté de l’opération est de savoir comment
rediriger des données vers le navigateur sans que celui-ci ne les affiche.
L’astuce est d’utiliser un système de cadres (frames).
Vous devez déclarer un frameset contenant deux cadres dont l’un
d’entre-eux a une hauteur fixée à 0 pixel. Cette frame
est donc totalement invisible à l’écran. L’autre cadre
prend quant à lui, l’intégralité de la surface disponible
(100%) et contient le formulaire destiné à l’utilisateur.
Le fichier INDEX.HTML contient les éléments suivants :
<HTML>
<FRAMESET rows="0,100%" border="0">
<FRAME name="RemoteScripting" src="blank.html">
<FRAME name="formulaire" src="remote.html">
<NOFRAMES>
<BODY>
Pas de frames !
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
La zone RemoteScripting est destinée à recevoir les données
fournies par un script CGI exécuté par le serveur. Un fichier
BLANK.HTML permet de construire le cadre proprement et ne contient que la structure
minimale d’une page HTML :
<HTML>
<BODY>
</BODY>
</HTML>
Le squelette est maintenant en place. Nous pouvons maintenant créer les éléments actifs.
Un formulaire dynamique
Dans cet exemple, nous allons construire un formulaire contenant une liste déroulante et un champ de saisie. La sélection d’un élément de la liste déclenche l’appel à un script CGI dont le résultat est dirigé vers le cadre invisible nommé RemoteScripting. Les données sont ensuite affichées dans le champ de saisie.
<HTML>
<HEAD>
<TITLE>Test du Remote Scripting</TITLE>
<SCRIPT language="javascript">
function TraiteReponse(valeur) {
document.fiche.AffReponse.value=valeur;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="fiche" action="process.cgi" method="GET" target="RemoteScripting">
<SELECT name="num" onChange=”fiche.submit();”>
<OPTION value="1">Liste 1</OPTION>
<OPTION value="2">Liste 2</OPTION>
<OPTION value="3">Liste 3</OPTION>
</SELECT><BR><BR>
<INPUT type="field" name="AffReponse" value=""><BR><BR>
<BR><BR>
</FORM>
</BODY>
</HTML>
Les données du formulaire “fiche” sont envoyées au script
nommé PROCESS.CGI à l’aide de la méthode GET (les
données sont codées dans l’URL). Le résultat du traitement
est dirigé avec l’attribut TARGET vers la frame cachée.
La fonction javascript TraiteReponse(), destinée à mettre à jour le champ de saisie AffReponse dans le formulaire, n’est pas exécutée par cette page. La vérité est ailleurs... mais pour la trouver, il faut se pencher sur le script CGI.
Le Remote Script est un CGI !
Le dernier élément du dispositif est le script CGI (PROCESS.CGI) dont l’exécution est déclenché par le formulaire “fiche”. Ce programme récupère la valeur du champ “num” du formulaire et sélectionne une information dans une liste. Le résultat est affecté à la variable RES. Il s’agit bien sur ici d’un exemple et rien ne vous empêche de faire des calculs ou encore de lancer une requête SQL sur une base de données.
REBOL [ ]
print "Content-type: text/html^/"
print "<HTML><BODY>"
var: make object! decode-cgi system/options/cgi/query-string
res: pick [ "data 1" "data 2" "data 3" ] (to-integer var/num)
Le script CGI peut maintenant générer la page HTML contenant uniquement le résultat du traitement. Cette page est composée d’une simple instruction javascript exécutée au chargement de la page par le navigateur. Le script utilise une substitution de caractères pour insérer le contenu de la variable RES dans le code javascript.
reponse: {
<script language="JavaScript">
top.formulaire.TraiteReponse('#RES#');
</script>
}
replace reponse "#RES#" res
print [ reponse "</BODY></HTML>" ]
Comme vous pouvez le constater, c’est à la réception de la page dans le cadre RemoteScripting, que la fonction TraiteReponse() (déclarée dans le fichier REMOTE.HTML) est exécutée : le résultat du traitement est affecté au champ “field” du formulaire.
En conclusion
La technique du Remote Scripting permet d’obtenir des résultats
très intéressant et peut améliorer considérablement
l’ergonomie de vos applications web. La méthode présentée
ici a été testée sur Microsoft Internet Explorer 5.5, Netscape
Navigator 4.7 et Opera 6.0. Vous ne devriez donc pas avoir de difficultés
pour déployer cette solution.
Olivier Auverlot