4D Doc Center : Associer des objets 4D à des objets HTML

4D v12.4

Associer des objets 4D à des objets HTML

Cette section décrit les moyens mis à votre disposition par le serveur Web de 4D pour échanger de l'information via le Web, c'est-à-dire pour envoyer et recevoir dynamiquement des valeurs. Les points suivants sont abordés :

Envoyer des valeurs dynamiques stockées dans des variables 4D
Recevoir des valeurs dynamiques via des formulaires Web
Utiliser la méthode projet COMPILER_WEB
Encapsuler du JavaScript

Envoyer des valeurs dynamiques

Vous pouvez insérer dans vos pages HTML des références à des variables 4D. Ces références peuvent être associées à tout type d'objet HTML. Au moment de l'envoi des pages Web aux navigateurs, 4D remplacera ces références par la valeur courante de la variable. Les pages reçues sont alors la combinaison d'éléments statiques et de valeurs issues de 4D. Ce type de page est appelé page semi-dynamique.

Notes :

Vous devez utiliser des variables process.
Comme le HTML est orienté Texte, vous travaillerez généralement avec des variables Texte. Toutefois, vous pouvez également utiliser des variables BLOB. Il vous suffit pour cela de générer des BLOBs en mode Texte sans longueur.

Tout d'abord, un objet HTML peut voir sa valeur initialisée par la valeur d'une variable 4D.
Ensuite, lorsqu'un formulaire Web est envoyé en retour, la valeur d’un objet HTML peut être retournée dans une variable 4D. Pour cela, dans le code du formulaire HTML, vous créez un objet HTML dont le nom est le même que celui de la variable process 4D que vous voulez associer. Ce point est étudié plus loin dans le paragraphe “Recevoir des valeurs dynamiques ”.

Note : Il n’est pas possible de faire référence à des variables images 4D.

Revenons au premier point. Vous pouvez donner par programmation des valeurs par défaut aux objets HTML en incluant  dans, par exemple, le champ valeur de l'objet HTML ; NomVar est le nom de la variable process 4D telle qu'elle est définie dans le process Web courant — nom que vous mettez entre <!––# ––>, c'est-à-dire la notation standard pour les commentaires HTML.

Note : Certains éditeurs HTML n'acceptent pas la saisie de la valeur <!––#4DTEXT NomVar––> dans le champ valeur des objets HTML. Dans ce cas, vous devrez la placer directement dans le code HTML.

La balise  permet également d'insérer des expressions 4D dans les pages envoyées (champs, éléments de tableaux, etc.). Le principe de fonctionnement de la balise avec ce type de donnée est identique à celui des variables. Pour plus d’informations, reportez-vous à la section Balises HTML 4D.

En fait, la syntaxe  permet d'insérer des données 4D partout dans la page HTML. Si, par exemple, vous écrivez :

<P>Bienvenue dans !</P>

La valeur de la variable 4D vtSiteName sera insérée dans la page HTML.

Examinons un exemple :

  ` Voici le code 4D assignant "4D4D" à la variable process vs4D

 vs4D:="4D4D"

  ` Puis envoyer la page HTML "AnyPage.HTM"

 ENVOYER FICHIER HTML("AnyPage.HTM")

Le source de la page HTML AnyPage.HTM est le suivant :

<html>
<head>
    <title>AnyPage</title>
<script language="JavaScript"><!--
function Is4DWebServer(){
return (document.frm.vs4D.value=="4D4D")
}

function HandleButton(){
if(Is4DWebServer()){
alert("You are connected to 4D Web Server!")
} else {
alert("You are NOT connected to 4D Web Server!")
}

//--></script>

</head>
<body>
<form action="/4DACTION/WWW_STD_FORM_POST" method="post" name="frm">

<p><input type="hidden" name="vs4D" value="<!--#4DTEXT vs4D-->"</p>

<p><a href="JavaScript:HandleButton()"><img src="AnyGIF.GIF" border=0 align=bottom></a></p>

<p><input type="submit" name="bOK" value="OK"></p>

</form>
</body>
</html>

Analyse des pages envoyées par le serveur

A des fins d'optimisation, l'analyse du source HTML n’est pas effectuée par le serveur Web de 4D lorsque les pages HTML sont appelées via des URLs simples et qu’elles sont suffixées “.HTML” ou “.HTM”. 4D propose également des mécanismes permettant de “forcer” l'analyse des pages si nécessaire (reportez-vous à la section Balises HTML 4D).

Insérer du code HTML dans des variables 4D

Vous pouvez insérer du code HTML dans des variables 4D incluses dans des pages statiques. Lorsque la page est affichée sur le navigateur, la valeur de la variable est remplacée par le code HTML, qui est alors interprété par le navigateur.

Pour insérer du code HTML à l'aide de variables ou d'expressions 4D, il vous suffit d'utiliser la balise spéciale 4DHTML.

Soit par exemple la variable 4D suivante :

vtHTML:="<b>"+[Client]nom+"</b>"

Vous pouvez insérer le code HTML dans la page HTML via le commentaire suivant :

<!--#4DHTML vtHTML-->

Vous pouvez utiliser une variable de type Texte ou BLOB (généré en mode Texte sans longueur).

Pour plus d'informations, reportez-vous à la section Balises HTML 4D.

Recevoir des valeurs dynamiques

Quand vous envoyez une page HTML avec ENVOYER FICHIER HTML ou ENVOYER BLOB HTML, vous pouvez aussi associer des variables 4D avec des objets HTML dans le sens "navigateur Web vers 4D". L'association fonctionne dans les deux sens : lorsqu’un formulaire HTML est retourné, 4D peut recopier les valeurs des objets HTML dans des variables process 4D. Ces variables doivent être déclarées dans la Méthode projet COMPILER_WEB (cf. ci-dessous).

Il est également posssible de récupérer les valeurs des formulaires Web envoyés à 4D sans connaître au préalable les champs qu'ils contiennent à l'aide de la commande LIRE VARIABLES FORMULAIRE WEB. Pour plus d'informations, reportez-vous à la description de cette commande.

Considérons cette page de code HTML :

<html>
<head>
  <title>Welcome</title>
  <script language="JavaScript"><!--
function GetBrowserInformation(formObj){
formObj.vtNav_appName.value = navigator.appName
formObj.vtNav_appVersion.value = navigator.appVersion
formObj.vtNav_appCodeName.value = navigator.appCodeName
formObj.vtNav_userAgent.value = navigator.userAgent
return true
}
function LogOn(formObj){
if(formObj.vtUserName.value!=""){
return true
} else {
alert("Enter your name, then try again.")
return false
}
}
//--></script>
</head>
<body>
<form action="/4DACTION/WWW_STD_FORM_POST" method="post"
 name="frmWelcome"
 onsubmit="return GetBrowserInformation(frmWelcome)">
  <h1>Welcome to Spiders United</h1>
  <p><b>Please enter your name:</b>
  <input name="vtUserName" value="<!--#4DTEXT vtUserName-->" size="30" type="text"></p>
  <p> 
<input name="vsbLogOn" value="Log On" onclick="return LogOn(frmWelcome)" type="submit"> 
<input name="vsbRegister" value="Register" type="submit">
<input name="vsbInformation" value="Information" type="submit"></p>
<p> 
<input name="vtNav_appName" value="" type="hidden"> 
<input name="vtNav_appVersion" value="" type="hidden"> 
<input name="vtNav_appCodeName" value="" type="hidden">
<input name="vtNav_userAgent" value="" type="hidden"></p>
</form>
</body>
</html>

Lorsque la page est envoyée au navigateur Web par 4D, elle se présente ainsi :

Voici les caractéristiques de cette page :

Elle comporte trois boutons Submit : vsbLogOn, vsbRegister et vsbInformation.
Le Submit du formulaire quand vous cliquez sur LogOn est d'abord traité par la fonction JavaScript LogOn. Si aucun nom n'a été saisi, le formulaire n'est pas envoyé à 4D et une alerte JavaScript est affichée.
Le formulaire comporte une méthode 4D POST et un script Submit (GetBrowserInformation) qui copie les propriétés du navigateur dans quatre objets cachés dont les noms commencent par vtNav_App.
Vous remarquez aussi l'objet vtUserName dont la valeur initiale est .

Examinons maintenant la méthode 4D (nommée ici WWW_STD_FORM_POST) qui est appelée lorsque l'utilisateur clique sur l'un des boutons du formulaire HTML :

  // Récupération de la valeur des variables

 TABLEAU TEXTE($tabNoms;0)

 TABLEAU TEXTE($tabValeurs;0)

 LIRE VARIABLES FORMULAIRE WEB($tabNoms;$tabValeurs)

 

  //Tester les valeurs des boutons Submit pour détecter si l'un d'entre eux a reçu un clic souris

 Au cas ou

 

         // Le bouton Log On bouton a été cliqué

    :(vsbLogOn#"")

       CHERCHER([WWW Users];[WWW Users]User Name=vtUserName)

       $0:=(Enregistrements trouves([WWW Users])>0)

       Si($0)

          WWW POST EVENT("Log On";WWW Log information)

            // La méthode WWW POST EVENT sauvegarde l'information dans une table de la base

       Sinon

 

          $0:=WWW Register

            // La méthode WWW Register permet à un nouvel utilisateur Web de s'enregistrer

       Fin de si

 

         // Le bouton Register a reçu un clic souris

    :(vsbRegister#"")

       $0:=WWW Register

 

         // Le bouton Information a reçu un clic souris

    :(vsbInformation#"")

       ENVOYER FICHIER HTML("userinfos.html")

 Fin de cas

Voici les caractéristiques de cette méthode :

Les valeurs des variables 4D vtNav_appName, vtNav_appVersion, vtNav_appCodeName et vtNav_userAgent (liées aux objets HTML de même nom) sont récupérées via la commande LIRE VARIABLES FORMULAIRE WEB à partir des objets HTML créés par le script JavaScript GetBrowserInformation.

Les variables 4D vsbLogOn, vsbRegister et vsbInformation sont liées aux trois boutons Submit. Notez que ces variables sont remises à leur valeur vide chaque fois que la page est envoyée au navigateur. Quand le submit est effectué par l'un de ces trois boutons, le navigateur retourne à 4D la valeur du bouton sur lequel on a cliqué. Comme les variables 4D sont initialisées à chaque fois, la variable qui n'est plus égale à chaîne vide vous indique sur quel bouton on a cliqué. Les deux autres variables sont des chaînes vides, non pas parce que le navigateur a retourné des chaînes vides, mais parce qu'il “n'a rien dit” à leur sujet et, en conséquence, 4D les a laissées inchangées. C'est la raison pour laquelle il est nécessaire de réinitialiser ces variables toutes les fois que la page est envoyée au navigateur.
C'est de cette manière que vous pouvez savoir quel bouton Submit a été activé quand plusieurs boutons Submit se trouvent sur la page Web. Notez que les boutons 4D (dans un formulaire 4D) sont des variables numériques. En revanche, en HTML, tous les objets sont des objets texte.

Si vous liez une variable 4D avec un objet SELECT, vous liez aussi une variable texte. Dans 4D, pour tester quel élément d'une liste déroulante a été sélectionné, vous testez la valeur numérique du tableau 4D. En HTML, c'est la valeur de l'élément sélectionné qui est retournée dans la variable 4D liée à l'objet HTML.

Quel que soit l'objet que vous associez à une variable 4D, la valeur retournée est de type Texte. Donc, vous devez associer des variables 4D process de type Alpha ou Texte.

Méthode projet COMPILER_WEB

Lorsque le serveur Web 4D reçoit un formulaire posté, il appelle automatiquement la méthode projet nommée COMPILER_WEB (si elle existe). Cette méthode doit contenir toutes les directives de typage et/ou d’initialisation des variables, en l’occurrence les variables dont les noms sont ceux des champs du formulaire Web. Elle sera utilisée par le compilateur en cas de compilation de la base.
La méthode COMPILER_WEB est commune à tous les formulaires Web. Par défaut, la méthode COMPILER_WEB n’existe pas. Vous devez la créer explicitement.

Note : Alternativement, vous pouvez utiliser la commande LIRE VARIABLES FORMULAIRE WEB, permettant de récupérer le nom et la valeur de tous les champs inclus dans une page HTML soumise au serveur.

Web Services : La méthode projet COMPILER_WEB est également appelée, si elle existe, à chaque requête SOAP acceptée. Vous devez utiliser cette méthode pour déclarer toutes les variables 4D associées à des arguments SOAP entrants et ce, pour toutes les méthodes publiées comme Web Services. En effet, l’utilisation de variables process dans les méthodes Web Services nécessite leur déclaration avant l’appel de la méthode. Pour plus d'informations sur ce point, reportez-vous à la description de la commande DECLARATION SOAP.

Server-side Image Mapping — Gérer des images interactives

Si vous envoyez un document HTML avec ENVOYER FICHIER HTML ou ENVOYER BLOB HTML, vous pouvez lier une variable 4D avec des objets HTML Image interactive (INPUT TYPE="IMAGE"). Par exemple, vous créez un objet HTML Image interactive dont le nom est bImageMap (vous prenez le nom que vous voulez). Chaque fois que vous cliquez sur l'image côté navigateur, un submit avec la position du clic est renvoyé au Serveur Web 4D. Pour récupérer les coordonnées de ce clic (exprimé par rapport au coin supérieur gauche de l'image), il suffit de lire la valeur des variables process 4D bImageMap_X et bImageMap_Y (de type Entier long) qui contiennent les coordonnées horizontales et verticales du clic. Ces variables doivent impérativement être initialisées dans la méthode projet COMPILER_WEB (cf. paragraphe précédent).

Dans la page HTML, vous écrivez, par exemple :

<P><INPUT TYPE="image"SRC="MonImage.GIF"NAME="bImageMap"BORDER=0></P>

La méthode 4D qui envoie la page HTML contient simplement :

ENVOYER FICHIER HTML("CettePage.HTM")

Dans la méthode projet COMPILER_WEB, vous écrivez :

 C_ENTIER LONG(bImageMap_X;bImageMap_Y)

 bImageMap_X:=-1 `Initialisation de la variable

 bImageMap_Y:=-1 `Initialisation de la variable

Ensuite, dans la méthode 4D appelée par l'action POST du formulaire — ou dans la méthode courante une fois que la méthode d'action POST a émis un ENVOYER FICHIER HTML ("") — vous récupérez les coordonnées du clic dans les variables bImageMap_X et bImageMap_Y :

 Si(($bImageMap_X#-1)&($bImageMap_Y#-1))

  ` Faire quelque chose en fonction de ces coordonnées

 Fin de si

Encapsuler du JavaScript

Le code source JavaScript encapsulé dans les documents HTML est supporté par le serveur Web 4D, ainsi que l'insertion de fichiers JavaScript .js dans des documents HTML (par exemple <SCRIPT SRC="...").

Avec ENVOYER FICHIER HTML ou ENVOYER BLOB HTML, vous envoyez une page que vous avez préparée avec un éditeur HTML ou construite avec 4D et sauvegardée comme document sur disque. Dans les deux cas, vous avez tout contrôlé sur la page et, par exemple, vous pouvez insérer des scripts JavaScript dans la section HEAD du document et utiliser des scripts avec une balise FORM. Ainsi, dans l'exemple ci-dessus, le script renvoie le formulaire "frm" car vous avez donné un nom au formulaire. Vous pouvez également déclencher, accepter ou rejeter la soumission du formulaire au niveau de la balise FORM.

Note : 4D supporte le transport d'Applets Java.