Associer des objets 4D à des objets HTML

4D - Documentation   Français   English   German   Español   Japanese   4D v11 SQL, Commandes par thèmes   4D v11 SQL, Liste alphabétique des commandes   4D v11 SQL, Constantes par thèmes   Retour   Précédent   Suivant

version 2003 (Modifiée)


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

Gérer des images interactives (server-side image mapping)

Encapsuler du JavaScript

Note : l'envoi et la réception de valeurs dynamiques peuvent être effectués automatiquement en mode contextuel via les formulaires 4D convertis. Pour plus d'informations sur ce point, reportez-vous à la section Utiliser le mode contextuel.

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 (ce qui vous permet de vous affranchir de la limite des 32 000 caractères inhérente aux variables de type texte). 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 : En mode sans contexte, 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 <!--#4DVAR NomVar--> 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 <!––#4DVAR NomVar––> dans le champ valeur des objets HTML. Dans ce cas, vous devrez la placer directement dans le code HTML.

La balise <!--#4DVAR --> 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 identiques à celui des variables. Pour plus d'informations, reportez-vous à la section Balises HTML 4D.

En fait, la syntaxe <!--#4DVAR NomVar--> permet d'insérer des données 4D partout dans la page HTML. Si, par exemple, vous écrivez :

<P>Bienvenue dans <!--#4DVAR vtSiteName-->!</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 :

Dans le code HTML ci-dessus, vous remarquez le type de saisie hidden dont le nom est vs4D. La valeur de cet objet est mise à la valeur texte "<!--#4DVAR vs4D-->". Comme la méthode projet qui envoie le fichier HTML a préalablement défini la variable process vs4D, 4D remplace la valeur de l'objet HTML et la met à "4D4D", la valeur de la variable 4D.

Vous notez aussi la fonction encapsulée JavaScript Is4DWebServer qui teste la valeur de l'objet HTML vs4D. Voici l'astuce : si la page HTML est envoyée par 4D, la valeur de l'objet est changée en "4D4D" ; en revanche, si la page HTML est envoyée par une autre application (par exemple 4D WebSTAR sur Macintosh), l'objet conserve sa valeur telle qu'elle est définie dans la page, c'est-à-dire "[vs4D]". En testant la valeur de cet objet, par JavaScript, vous pouvez détecter à l'intérieur de la page, côté navigateur Web, si cette page est ou non envoyée par 4D.

Ce premier exemple montre comment vous pouvez construire des pages HTML "intelligentes", qui comportent des caractéristiques supplémentaires lorsqu'elles sont envoyées par 4D tout en restant compatibles avec d'autres serveurs de Web.

Important : Rappelons que vous ne devez associer que des variables process. De plus, vous ne pouvez pas, dans la version actuelle du programme, associer de tableau 4D à un objet HTML SELECT. En revanche, chaque élément d'un objet SELECT peut se référer à des variables 4D séparées (par exemple, le premier élément à V1, le second à V2, et ainsi de suite).

L'association dans le sens 4D vers navigateur Web fonctionne avec n'importe quel procédé d'encapsulation (ENVOYER FICHIER HTML, ENVOYER BLOB HTML ainsi que, en mode contextuel, texte statique ou variable texte ou BLOB dans un formulaire 4D).

Analyse des pages envoyées par le serveur

En mode contextuel, avant l'envoi d'une page HTML (document HTML ou formulaire 4D traduit), 4D scrute toujours le source HTML pour rechercher les objets renvoyant à des variables 4D.

En mode sans contexte, à 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 dans des variables 4D, vous disposez de deux possibilités :

Faire débuter la variable 4D par le code 1 (par exemple vtHTML:=Caractere(1)+"...Code HTML...") et l'insérer dans la page HTML via la balise <!--#4DVAR vtHTML-->.

Insérer une variable 4D standard (par exemple vtHTML:="...Code HTML...") dans la page HTML via la balise <!--#4DHTMLVAR 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. En vue de la compilation de la base, ces variables doivent être déclarées dans la méthode COMPILER_WEB (cf. paragraphe 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.

Attention : La récupération des valeurs dans les variables process 4D n'est possible qu'avec des pages HTML envoyées avec ENVOYER FICHIER HTML ou ENVOYER BLOB HTML. Dans le cas de HTML encapsulé dans un formulaire 4D en mode contextuel, la récupération des valeurs est limitée aux objets 4D effectivement placés dans ce formulaire.

Considérons cette page de code 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 Navigator dans quatre objets cachés dont les noms commencent par vtNav_App.

Vous remarquez aussi l'objet vtUserName dont la valeur initiale est <!--#4DVAR vtUserName-->.

Examinons maintenant la méthode 4D (nommé ici WWW Welcome) qui envoie cette page HTML à l'aide de la commande ENVOYER FICHIER HTML. Cette méthode est appelée par la Méthode base Sur connexion Web.

      ` Méthode projet WWW Welcome 
      ` WWW Welcome -> Booleén
      ` WWW Welcome -> Oui = La session peut commencer

   C_BOOLEEN($0)
   $0:=Faux

      ` Objets de saisie HTML cachés retournant l'information sur le Navigateur
   C_TEXTE(vtNav_appName;vtNav_appVersion;vtNav_appCodeName;vtNav_userAgent)
   vtNav_appName:=""
   vtNav_appVersion:=""
   vtNav_appCodeName:=""
   vtNav_userAgent:=""

      ` Objet texte saisie HTML où le nom de l'utilisateur est saisi
   C_TEXTE(vtUserName)
   vtUserName:=""

      ` Valeurs du HTML bouton Submit
   C_ALPHA(31;vsbLogOn;vsbRegister;vsbInformation)

   Repeter 
         ` Ne pas oublier d'initialiser les valeurs des boutons Submit!  
      vsbLogOn:=""
      vsbRegister:=""
      vsbInformation:=""
         ` Envoyer la page Web
      ENVOYER FICHIER HTML("Welcome.HTM")
         ` 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 
               CONFIRMER("Ce nom d'utilisateur est inconnu. Voulez-vous l'enregistrer?")
               $0:=(OK=1)
               Si ($0)
                  $0:=WWW Register
                     ` La méthode WWW Register permet à un nouvel utilisateur Web de s'enregistrer
               Fin de si 
            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 # "")
            DIALOGUE([User Interface];"WWW Information")
      Fin de cas 
   Jusque (Non(<>vbWebServicesOn) | $0)

Voici les caractéristiques de cette méthode :

Les variables 4D vtNav_appName, vtNav_appVersion, vtNav_appCodeName et vtNav_userAgent (liées aux objets HTML de même nom) reçoivent les valeurs assignées aux objets HTML par le script JavaScript GetBrowserInformation. C'est simple : initialisez les variables en chaînes de caractères, et ensuite récupérez les valeurs après que la page ait été soumise.

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.

Un point intéressant de cet exemple (partiel) est qu'une fois que vous avez obtenu l'information sur le navigateur, vous pouvez stocker ces valeurs dans une table 4D, et là encore vous associez le Web et les capacités de base de données de 4D. C'est ce que réalise la méthode projet WWW POST EVENT. Elle ne "poste" pas un événement, elle sauvegarde les informations de la session Web dans des tables du type de celles-ci :

Une fois que vous avez sauvegardé ces informations dans une table, vous pouvez, avec d'autres méthodes projet, renvoyer l'information à l'utilisateur Web. Pour cela, vous utilisez simplement un CHERCHER pour trouver la bonne information et un VISUALISER SELECTION pour montrer les enregistrements [WWW Log]. L'image ci-dessous présente les informations de connexion que l'utilisateur Web peut obtenir s'il est un utilisateur enregistré du site Web :

Compte tenu des possibilités des liens 4D/HTML dans cet exemple et des informations que vous pouvez demander aux utilisateurs par des dialogues HTML ou des formulaires 4D, vous pouvez concevoir des capacités d'administration très intéressantes pour votre site Web.

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


Comme cela est décrit dans la section Utiliser le mode contextuel, quand un formulaire 4D est utilisé comme page Web, 4D peut fournir une image interactive côté serveur ("Server-side Image Mapping") au moyen de boutons invisibles placés par-dessus une image statique.

Si vous envoyez un document HTML avec ENVOYER FICHIER HTML ou ENVOYER BLOB HTML, vous pouvez aussi 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 en mode standard, 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ôle 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.

En mode contextuel, si vous encapsulez de l'HTML dans un formulaire 4D, vous n'avez pas de contrôle sur la section HEAD (en-tête) ni sur la déclaration du FORM (formulaire). L'aire d'action des scripts est donc différente. Ainsi, vous ne pouvez pas accéder au formulaire HTML par son nom. Cependant, comparez la fonction JavaScript Is4DWebServer de l'exemple ci-dessus avec celui-ci :

Les deux fonctions font la même chose. La seconde utilise la propriété forms de l'objet HTML document pour accéder à l'objet par l'élément forms[0]. Le résultat est que tout fonctionne, même si vous ne connaissez pas le nom du formulaire que 4D a ou n'a pas donné à la page HTML traduite.

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

Référence

Balises HTML 4D, ENVOYER BLOB HTML, ENVOYER FICHIER HTML, URLs et actions de formulaires.


4D - Documentation   Français   English   German   Español   Japanese   4D v11 SQL, Commandes par thèmes   4D v11 SQL, Liste alphabétique des commandes   4D v11 SQL, Constantes par thèmes   Retour   Précédent   Suivant