4D Doc Center : Asociar objetos 4D a objetos HTML

4D v12.4

Asociar objetos 4D a objetos HTML

Esta sección describe los medios disponibles por el servidor web de 4D para intercambiar la información vía la Web, es decir para enviar y recibir dinámicamente valores. Se tratan los siguientes puntos:

Envío de valores dinámicos almacenados en variables 4D
Recepción de valores dinámicos vía formularios web
Uso del método proyecto COMPILER_WEB
Encapsulación de JavaScript

Envío de valores dinámicos

Puede insertar en sus páginas HTML referencias a las variables 4D. Estas referencias pueden estar asociadas a todo tipo de objeto HTML. Cuando las páginas web se envían a los navegadores web, 4D reemplazará estas referencias con los valores actuales de las variables. Las páginas recibidas son por lo tanto una combinación de elementos estáticos y de valores que provienen de 4D. Este tipo de página se llama página semidinámica.

Notas:

Debe utilizar las variables proceso.
Como el HTML es un lenguaje orientado a texto, generalmente trabajará con variables Texto. Sin embargo, también puede utilizar variables BLOB. Sólo debe generar los BLOBs en modo Texto sin longitud.

En primer lugar, un objeto HTML puede inicializar su valor utilizando el valor de una variable 4D.
Luego, cuando un formulario web se envía de regreso, el valor de un objeto HTML puede devolverse en una variable 4D. Para hacer esto, en el código del formulario HTML, cree un objeto HTML cuyo nombre sea el mismo que el nombre de la variable proceso 4D a asociar. Este punto se estudia más a fondo en el párrafo “Recepción de valores dinámicos”.

Nota: no es posible hacer referencia a las variables imágenes 4D.

Como un valor de objeto HTML puede inicializarse con el valor de una variable 4D, por programación puede ofrecer valores por defecto a objetos HTML incluyendo  en el campo valor del objeto HTML, donde NombreVar es el nombre de la variable proceso 4D como está definido en el proceso web actual. Este es el nombre que rodea con , la notación estándar para los comentarios HTML.

Nota: algunos editores HTML no aceptan  en el campo valor de los objetos HTML. En este caso, deberá digitarlo directamente en el código HTML.

La etiqueta  también permite la inserción de expresiones 4D en las páginas enviadas (campos, elementos de array, etc.). El funcionamiento de esta etiqueta con este tipo de datos es idéntico al de las variables. Para mayor información, consulte la sección .

De hecho, la sintaxis  permite insertar los datos 4D en cualquier parte de la página HTML. Por ejemplo, si escribe:

<P>Bienvenido a !</P>

El valor de la variable 4D vtNombreSitio se insertará en la página HTML.

Este es un ejemplo:

  ` El siguiente código 4D asigna "4D4D" a la variable proceso vs4D

 vs4D:="4D4D"

  ` Luego envía la página HTML "AnyPage.HTM"

 SEND HTML FILE("AnyPage.HTM")

La fuente de la página HTML AnyPage.HTM es la siguiente:

<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>

Análisis de páginas enviadas por el servidor

Por razones de optimización, el análisis del código fuente HTML no es efectuado por el servidor web de 4D cuando las páginas HTML son llamadas utilizando URLs simples con sufijos “.HTML” o “.HTM”. 4D ofrece mecanismos que le permiten "forzar" el análisis de páginas si es necesario (consulte la sección Etiquetas HTML 4D).

Insertar el código HTML en las variables 4D

Puede insertar código HTML en las variables 4D. Cuando la página HTML estática se muestra en el navegador web, el valor de la variable se reemplaza por el código HTML y será interpretado por el navegador.

Para insertar el código HTML utilizando variables o expresiones 4D, puede utilizar la etiqueta especial 4DHTML.

Dada por ejemplo la siguiente variable 4D:

vtHTML:="<b>"+[Cliente]nombre+"</b>"

Puede insertar el código HTML en la página HTML utilizando el siguiente comentario:

<!--#4DHTML vtHTML-->

Puede utilizar una variable de tipo Texto o BLOB (generada en modo Texto sin largo).

Para mayor información, consulte la sección “”.

Recibir los valores dinámicos

Cuando envía una página HTML utilizando SEND HTML FILE o SEND HTML BLOB, también puede asociar las variables 4D con los objetos HTML en la dirección “navegador web hacia 4D”. La asociación funciona de ambas formas: una vez el formulario HTML es devuelto, 4D puede copiar los valores de los objetos HTML en las variables proceso 4D. Con miras a la compilación de la base, estas variables deben declararse en el método COMPILER_WEB (ver el párrafo más adelante).

También es posible recuperar los valores de los formularios web enviados a 4D sin conocer previamente los campos que contiene, utilizando el comando GET WEB FORM VARIABLES. Para mayor información, consulte la descripción de este comando.

Considere esta página de código 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>

Cuando 4D envía la página al navegador web, se ve así:

Las principales características de esta página son:

Incluye tres botones Enviar: vsbEntrar, vsbRegistrar y vsbInformacion.
Cuando hace clic en Log On, el envío del formulario primero es procesado por la función JavaScript LogOn. Si no se introduce ningún nombre, el formulario no se envía a 4D y se muestra una alerta JavaScript.
El formulario tiene un método POST 4D y un script Submit (GetBrowserInformation) que copia las propiedades del navegador en cuatro objetos ocultos cuyos nombres comienzan por vtNav_App.
El valor inicial del objeto vtNombreUsuario es .

Examinemos ahora el método 4D (llamado WWW_STD_FORM_POST que se llama cuando el usuario hace clic en uno de los botones en el formularios HTML.

 

 

  // Recuperación del valor de las variables

 ARRAY TEXT($arrNames;0)

 ARRAY TEXT($arrValues;0)

 GET WEB FORM VARIABLES($arrNames;$arrValues)

 

  //Probar los valores de los botones Submit para detectar si uno de ellos ha recibido un clic

 Case of

 

  // Se hizo clic en el botón Log On

    :(vsbLogOn#"")

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

       $0:=(Records in selectino([WWW Users])>0)

       If($0)

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

  // El método WWW POST EVENT guarda la información en una tabla de la base

       Else

 

          $0:=WWW Register

  // El método WWW Register permite a un nuevo usuario web registrarse

       End if

 

  // El botón Register recibió un clic

    :(vsbRegister#"")

       $0:=WWW Register

 

  // El botón Information recibió un clic

    :(vsbInformation#"")

       SEND HTML FILE("userinfos.html")

 End case

Las características de este método son:

Los valores de las variables 4D vtNav_appName, vtNav_appVersion, vtNav_appCodeName y vtNav_userAgent (asociadas a los objetos HTML del mismo nombre) son recuperados por el comando GET WEB FORM VARIABLES a partir de los objetos HTML creados por el script JavaScript GetBrowserInformation.

Las variables 4D vsbLogOn, vsbRegister y vsbInformation están asociadas a los tres botones Submit. Note que estas variables se reinician cada vez que la página se envía al navegador. Cuando el envío se efectúa por uno de estos botones, el navegador devuelve el valor del botón sobre el cual se hizo clic. Como las variables 4D se reinicializan cada vez, la variable que ya nos es igual a la cadena vacía indica en qué botón se hace clic. Las otras dos variables son cadenas vacías, no porque el navegador devuelva cadenas vacías, sino porque el navegador no ha “dicho” nada sobre ellas; por lo tanto, 4D deja las variables sin cambio. Por esta razón es necesario reiniciar estas variables todas las veces que la página se envíe al navegador.
Esta es la manera de saber en cuál botón Submit se hizo clic cuando existen varios botones Submit en la página web. Note que los botones 4D en un formulario 4D son variables numéricas. Sin embargo, con HTML, todos los objetos son objetos texto.

Si asocia una variable 4D con un objeto SELECT, también asocia una variable texto. En 4D, para probar que el elemento de una lista desplegable fue seleccionado, usted prueba el valor numérico del array 4D. Con HTML, este es el valor del elemento seleccionado que es devuelto en la variable 4D asociada al objeto HTML.

Sin importar que objeto asocie a la variable 4D, el valor devuelto es de tipo Texto, de manera que debe asociar las variables 4D proceso de tipo Alfa o Texto.

Método de proyecto COMPILER_WEB

Cuando el servidor web 4D recibe un formulario enviado, llama automáticamente el método de proyecto llamado COMPILER_WEB (si existe). Este método debe contener todas las directivas de digitación y/o inicialización de las variables, las cuales son las variables cuyos nombres son los mismos que los nombres de los campos en el formulario. Será utilizado por el compilador en caso de compilación de la base.

El método COMPILER_WEB es común para todos los formularios web. Por defecto, el método COMPILER_WEB no existe. Debe crearlo explícitamente.

Nota: también puede utilizar el comando GET WEB FORM VARIABLES, que permite recuperar el valor de las variables incluidas en una página HTML enviada al servidor.

Servicios web: el método de proyecto COMPILER_WEB es llamado, si existe, por cada petición SOAP aceptada. Debe utilizar este método para declarar todas las variables 4D asociadas con los argumentos SOAP entrantes y para todos los métodos publicados como Servicios web. De hecho, el uso de variables proceso en los métodos de servicios web necesita que sean declaradas antes de llamar al método. Para mayor información sobre este punto, consulte la descripción del comando SOAP DECLARATION.

Asociar objetos HTML con variables 4D - Mapeo de imágenes

Si envía un documento HTML con SEND HTML FILE o SEND HTML BLOB, puede asociar una variable 4D con objetos HTML Image Map (INPUT TYPE="IMAGE") para recuperar información. Por ejemplo, puede crear un objeto HTML Image Map llamado bImagenMap (puede utilizar el nombre que quiera). Cada vez que haga clic en la imagen del lado del servidor, un submit con la posición del clic es enviado al servidor web 4D. Para recuperar las coordenadas del clic (expresadas con relación a la esquina superior izquierda de la imagen), sólo necesita leer el valor de las variables proceso 4D bImagenMap_X y bImagenMap_Y (de tipo Entero largo) que contiene las coordenadas horizontales y verticales del clic. Estas variables deben declararse en el método de proyecto COMPILER_WEB (ver párrafo anterior).

En la página HTML, escriba por ejemplo:

<P><INPUT TYPE="image"SRC="MiImagen.GIF"NAME="bImagenMap"BORDER=0></P>

El método 4D que envía la página HTML contiene:

SEND HTML FILE("EstaPagina.HTM")

En el método de proyecto COMPILER_WEB, escribe:

 C_LONGINT(bImagenMap_X;bImagenMap_Y)

 bImagenMap_X:=-1 `Inicialización de la variable

 bImagenMap_Y:=-1 `Inicialización de la variable

Luego, en el método 4D llamado por la acción POST del formulario o en el método actual, una vez que el método de acción POST a emitido un SEND HMTL FILE(""), recupera las coordenadas del clic en las variables bImagenMap_X y bImagenMap_Y:

 If(($bImagenMap_X#-1)&($bImagenMap_Y#-1))

  ` Hacer algo de acuerdo a las coordenadas

 End if

Encapsulación de JavaScript

4D soporta código fuente JavaScript encapsulado en los documentos HTML y también la inserción de archivos JavaScript .js en los documentos HTML (por ejemplo <SCRIPT SRC="...").

Utilizando SEND HTML FILE o SEND HTML BLOB, usted envía una página que haya preparado en un editor HTML o creada por programación utilizando 4D y guardada como documento en disco. En ambos caso, tiene control total de la página. Puede insertar scripts JavaScript en la sección HEAD del documento y utilizar los scripts con una etiqueta FORM. En el ejemplo anterior, el script reenvía el formulario "frm" porque usted pudo darle nombre al formulario. Puede igualmente activar, aceptar o rechazar el envío del formulario a nivel de la etiqueta FORM.

Nota: 4D soporta el transporte de Applets Java.