4D v13.4

Asociar objetos 4D a objetos HTML

Inicio

 
4D v13.4
Manual de lenguaje 4D
Servidor Web
Asociar objetos 4D a objetos HTML

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
  • Encapsulación de JavaScript

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 <!--#4DTEXT NombreVar--> 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 <!--#4DTEXTNombreVar--> en el campo valor de los objetos HTML. En este caso, deberá digitarlo directamente en el código HTML.

La etiqueta <!--#4DTEXT --> 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 ST FREEZE EXPRESSIONS.

De hecho, la sintaxis <!--#4DTEXT NombreVar--> permite insertar los datos 4D en cualquier parte de la página HTML. Por ejemplo, si escribe:

<P>Bienvenido a <!--#4DTEXT vtNombreSitio-->!</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("Usted está conectado al servidor web 4D")
} else {
alert("Usted no está conectado al servidor web 4D")
}

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

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

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 “”.

Cuando el servidor web recibe un formulario "posted", 4D puede recuperar los valores de todos los objetos HTML que contiene. Este principio puede implementarse en el caso de un formulario web, enviado por ejemplo con WEB SEND FILE o SEND HTML BLOB, donde el usuario introduce o modifica valores, luego hace clic en el botón de validación. En este caso, hay dos formas de que 4D pueda recuperar los valores de los objetos HTML presentes en la petición:

El comando WEB GET VARIABLES recupera los valores en forma de texto, mientras que los comandos WEB GET BODY PART y WEB Get body part count pueden recuperar los archivos publicados, utilizando BLOBs.

Nota de compatibilidad (4D v13.4): en las versiones anteriores, 4D copiaba directamente los valores de las variables recibidas vía un formulario web publicado o un URL GET, en las variables proceso 4D (en modo compilado, estas variables tenían que haber sido declaradas en la método COMPILER_WEB). Este funcionamiento se elimina a partir de 4D v13.4, se mantiene por compatibilidad de las bases de datos convertidas, pero puede desactivarse mediante la opción de compatibilidad Asignación automática de variables en la Página Compatibilidad de las Propiedades de la base (se recomienda desactivar esta opción y utilizar los comandos WEB GET VARIABLES o WEB GET BODY PART en sus bases).

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("Introduzca su nombre, luego intente de nuevo.")
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>Por favor introduzca su nombre:</b>
  <input name="vtUserName" value="" 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.
  • También incluye el objeto vtNombreUsuario.
Examinemos ahora el método 4D (llamado WWW_STD_FORM_POST) que se llama cuando el usuario hace clic en uno de los botones del formulario HTML:

  // Recuperación del valor de las variables <p>ARRAY TEXT($arrNames;0)
 ARRAY TEXT($arrValues;0)
 WEB GET VARIABLES($arrNames;$arrValues)
 C_TEXT($user)
 
 Case of
 
  // Se hizo clic en el botón Log On
    :(Find in array($arrNames;"vsbLogOn")#-1)
       $user :=Find in array($arrNames;"vtUserName")
       QUERY([WWW Users];[WWW Users]UserName=$arrValues{$user})
       $0:=(Records in selection([WWW Users])>0)
       If($0)
          WWW POST EVENT("Log On";WWW Log information)
  // The WWW POST EVENT method saves the information in a database table
       Else
 
          $0:=WWW Register
  // El método WWW Register permite registrarse a un nuevo usuario web
       End if
 
  // Se hizo clic en el botón Register
    :(Find in array($arrNames;"vsbRegister")#-1)
       $0:=WWW Register
 
  // Se hizo clic en el botón Information
    :(Find in array($arrNames;"vsbInformation")#-1)
       WEB SEND 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 WEB GET VARIABLES a partir de los objetos HTML creados por el script JavaScript GetBrowserInformation. 
  • Fuera de las variables vsbLogOn, vsbRegister y vsbInformation relacionadas con los los tres botones Submit, sólo la que corresponde al botón en el que se hizo clic será recuperada por el comando WEB GET VARIABLES. Cuando el envío se efectúa por uno de estos botones, el navegador devuelve a 4D el valor del botón sobre el cual se hizo clic. Este principio le indica en cual botón se hizo clic. Note que los botones 4D (en un formulario 4D) son variables numéricas. Sin embargo, con HTML, todos los objetos son objetos texto.

Si utiliza un objeto SELECT, este es el valor del elemento seleccionado en el objeto que es devuelto en el comando [#cmd id="683"/], y no posición del elemento en el array como en 4D.

WEB GET VARIABLES siempre devuelve valores de tipo texto.

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 WEB GET 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.

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 WEB SEND 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.

 
PROPIEDADES 

Producto: 4D
Tema: Servidor Web

 
VER TAMBIÉN 

Etiquetas HTML 4D
SEND HTML BLOB
URLs y acciones de formularios
WEB SEND FILE