Asociar objetos 4D a objetos HTML

4D - Documentation   Français   English   German   Español   English   4D v11 SQL, Comandos por temas   4D v11 SQL, Lista alfabética de comandos   4D v11 SQL, Constantes por temas   Regresar   Anterior   Siguiente

versión 2003 (Modificado)


Esta sección describe los medios disponibles para el servidor Web 4D para intercambiar 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 de proyecto COMPILER_WEB

Administración de imágenes interactivas

Encapsular JavaScript

Nota: el envío y la recepción de valores dinámicos puede efectuarse automáticamente en modo contextual vía los formularios 4D convertidos. Para mayor información sobre este punto, consulte la sección Using the Contextual Mode.

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. Puede asociar estar referencias a todo tipo de objeto HTML. Cuando las páginas Web son enviadas al navegador, 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 HTML es un lenguaje orientado al procesamiento de texto, generalmente trabajará con variables de texto. Sin embargo, también puede utilizar variables BLOB (las cuales no tienen el límite de los 32 000 caracteres de las variables de tipo texto). Sólo debe generar el BLOB 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 ser devuelto en una variable 4D. Para hacer esto, dentro del código del formulario HTML, usted crear un objeto HTML cuyo nombre es el mismo que el nombre de la variable de proceso 4D que quiere asociar. Este punto se estudia más a fondo en el párrafo "Recepción de valores dinámicos" en este documento.

Nota: en modo no contextual, no es posible hacer referencia a las variables de 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 <!--#4DVAR 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 usted rodea con <!--#...-->, la notación estándar para los comentarios HTML.

Nota: Algunos editores HTML pueden no aceptar <!--#4DVAR NombreVar--> en el campo valor de los objetos HTML. En este caso, deberá digitarlo directamente en el código HTML.

La etiqueta <!--#4DVAR --> 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 4D HTML Tags.

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

<P>Bienvenido a <!--#4DVAR 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 "AlgunaPagina.HTM"
   SEND HTML FILE("AlgunaPagina.HTM")

La fuente de la página HTML

AlgunaPagina
.HTM es la siguiente:

En el código fuente HTML anterior, note el tipo de entrada oculta llamada vs4D. El valor de este objeto está definido en el valor texto "<!--#4DVAR vs4D-->". Así como el método de proyecto que envía el archivo HTML definió previamente la variable proceso vs4D, 4D reemplaza el valor del objeto HTML y lo coloca en "4D4D", el valor de la variable 4D.

La función JavaScript anidada Es4DServidorWeb prueba el valor del objeto HTML vs4D. Este es el truco: si la página HTML es enviada por 4D, el valor del objeto se cambia por "4D4D". Sin embargo, si la página HTML es enviad por otra aplicación (por ejemplo 4D WebSTAR en Macintosh), el objeto conserva su valor como está definido en la página, "[vs4D]". Utilizando JavaScript para probar el valor de ese objeto, desde el interior de la página del lado del navegador Web, si está pagina es enviada o no por 4D.

Este primer ejemplo muestra cómo puede construir páginas HTML "inteligentes", que ofrecen características adicionales cuando son enviadas por 4D, mientras continúan siendo compatibles con otros servidores Web.

Importante: Recuerde que sólo debe asociar variables proceso. Además, la versión actual de 4D no permite asociar un array 4D con un objeto HTML SELECT. Por otra parte, cada elemento de un objeto SELECT puede referirse a variables 4D separadas (por ejemplo, el primer elemento a V1, el segundo a V2, y así sucesivamente).

La asociación en la dirección 4D hacia el navegador Web funciona con todo método de encapsulación (SEND HTML FILE, SEND HTML BLOB, como también, en modo contextual, texto estático o variable de tipo texto o BLOB en un formulario 4D).

Análisis de páginas enviadas por el servidor

En modo contextual, antes de enviar una página HTML (documento HTML o formulario 4D traducido), 4D siempre analiza el código fuente HTML para buscar los objetos que reenvíen variables 4D.

En modo no contextual, con fines de optimización, el análisis de código fuente HTML no es efectuado por el servidor Web de 4D cuando las páginas HTML son llamadas utilizando URLs simples que tengan sufijos ".HTML" o ".HTM". 4D ofrece mecanismos que le permiten "forzar" el análisis de páginas cuando sea necesario (consulte la sección 4D HTML Tags).

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 en las variables 4D, usted tiene dos posibilidades:

Hacer que la variable 4D comience con el código 1 como primer carácter (por ejemplo, vtHTML:=Char(1)+"...HTML code...") e insertarla en la página HTML utilizando la etiqueta <!--#4DVAR vtHTML-->.

Insertar una variable 4D estándar (por ejemplo, vtHTML:="...HTML code...") en la página HTML utilizando la etiqueta <!--#4DHTMLVAR vtHTML-->.

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

Para mayor información, consulte la sección "HTML Tags".

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.

Advertencia: La recuperación de los valores en las variables proceso 4D sólo es posible con páginas HTML enviadas utilizando SEND HTML FILE o SEND HTML BLOB. En el caso de HTML encapsulado en un formulario 4D en modo contextual, la recuperación de los valores está limitada a los objetos 4D ubicados en el formulario.

Considere esta página de código HTML:

Cuando la página es enviada al navegador Web por 4D, se ve así:

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

Incluye tres botones Enviar: vsbEntrar, vsbRegistrr y vsbInformacion.

Cuando hace clic en Log On, el envío del formulario primero es procesado por la función JavaScript Validad_Ingreso. Si no se introduce ningún nombre, el formulario no se envía a 4D, y aparece una alerta JavaScript.

El formulario tiene un método 4D POST y un script Submit (ObtenerInformacionNavegador) que copia las propiedades del navegador en cuatro objetos ocultos cuyos nombres comienzan por vtNav_.

El valor inicial del objeto vtNombreUsuario es <!--#4DVAR vtNombreUsuario-->.

Examinemos el método 4D ( WWW Welcome) que envía esta página HTML utilizando el comando SEND HTML FILE. Este método es llamado por El método de base On Web Connection.

      ` Método de proyecto WWW Bienvenida 
      ` WWW Bienvenida  -> Booleano
      ` WWW Bienvenida  -> Yes = La sesión puede comenzar

   C_BOOLEAN($0)
   $0:=False

      ` Objetosde entrada HTML ocultos devolviendo la información sobre el navegador
   C_TEXT(vtNav_Nombre;vtNav_Version;vtNav_NombreCodigo;vtNav_Usuario)
   vtNav_Nombre:=""
   vtNav_Version:=""
   vtNav_NombreCodigo:=""
   vtNav_Usuario:=""

      ` Objeto de texto entrada HTML donde el nombre del usuario se introduce
   C_TEXT(vtNombreUsuario)
   vtNombreUsuario:=""

      ` Valores del HTML botón Enviar
   C_STRING(31;vsbEntrar;vsbRegistro;vsbInformacion)

   Repeat 
         ` ¡No olvide inicializar los valores de los botones submit!  
      vsbEntrar:=""
      vsbRegistro:=""
      vsbInformacion:=""
         ` Enviar la página Web
      SEND HTML FILE("Bienvenido.HTML")
         ` Probar los valores de los botones submit para detectar en cual se ha hecho clic
      Case of 

            ` Se hizo clic en el botón Entrar
         : (vsbEntrar # "")
            QUERY([WWW Usuarios];[WWW Usuarios]Nombre Usuario=vtNombreUsuario)
            $0:=(Records in selection([WWW Usuarios])>0)
            If ($0)
               WWW EVENTO POST ("Entrar";WWW Log informacion )
                  ` El método WWW EVENTO POST guarda la información en una tabla de la base
            Else 
               CONFIRM("Este nombre de usuario no es conocido, ¿quiere registrarlo?")
               $0:=(OK=1)
               If ($0)
                  $0:=WWW Registrar
                     ` El método WWW Registrar permite registrar a un nuevo usuario Web
               End if 
            End if 

            ` Se ha hecho clic en el botón Registro
         : (vsbRegistro # "")
            $0:=WWW Registrar
 
               ` El botón información ha recibido un clic
         : (vsbInformacion # "")
            DIALOG([User Interface];"WWW Informacion")
      End case 
   Until (Not(<>vbWebServicesOn) | $0)

Las características de este método son:

Las variables 4D vtNav_Nombre, vtNav_Version, vtNav_NombreCodigo, CodeNombre, y vtNav_Usuario (asociadas a los objetos HTML del mismo nombre) utilizan el script JavaScript ObtenerInformacionNavegador para obtener los valores asignados a los objetos HTML. Es simple: el método inicializa las variables como cadenas, luego recupera los valores después que la página Web haya sido enviada.

Las variables 4D vsbEntrar, vsbRegistro y vsbInformacion están asociadas a los tres botones Enviar. 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 Enviar se hizo clic cuando existen varios botones Enviar 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.

Un punto interesante de este ejemplo es que una vez haya obtenido la información sobre el navegador, puede almacenar estos valores en una tabla 4D, nuevamente combinando la Web y las capacidades de las bases de datos de 4D. Esto es lo que hace el método de proyecto WWW EVENTO POST. No "envía un evento"; guarda la información de la sesión en tablas de este tipo:

Después de guardar la información en una tabla, puede utilizar otros métodos de proyecto para reenviar la información al usuario Web. Para hacer esto, simplemente utilice QUERY para buscar la información correcta y utilice DISPLAY SELECTION para mostrar los registros [WWW Log]. La siguiente imagen muestra la información de conexión que el usuario Web puede obtener si es un usuario registrado del sitio Web:

Utilizando las características de asociación mostradas en este ejemplo, combinadas con la información que puede dar o reunir de los usuarios vía los diálogos HTML o los formularios 4D, puede añadir algunas capacidades de administración muy interesantes para su sitio Web.

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


Como se vio en la sección Using the Contextual Mode, cuando un formulario 4D se utiliza como página Web, 4D ofrece una imagen interactiva del lado del servidor (Server-side Image Mapping) por medio de botones invisibles colocados sobre la imagen estática.

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 ser declaradas en el método de proyecto COMPILER_WEB (ver párrafo anterior).

En la página HTML, usted escribe 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 simplemente:

   SEND HTML FILE("EstaPagina.HTM")

En el método de proyecto COMPILER_WEB, usted 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 en modo estándar, 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, usted 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.

En modo contextual, si encapsula HTML en un formulario 4D, no tiene control sobre la sección HEAD o sobre la declaración de FORM. Por lo tanto el alcance de los scripts es diferente. Por ejemplo, usted no puede acceder al formulario HTML por su nombre. Sin embargo, compare la función JavaScript Is4DWebServer del ejemplo anterior con esta:

Las dos funciones hacen los mismo, pero el segundo ejemplo utiliza las propiedad forms del objeto HTML document para acceder al objeto por el elemento forms[0]. Como resultado, funciona incluso si no conoce el nombre del formulario que 4D puede o no haber dado a la página HTML traducida.

Nota: 4D soporta el transporte de Applets Java.

Ver también

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


4D - Documentation   Français   English   German   Español   English   4D v11 SQL, Comandos por temas   4D v11 SQL, Lista alfabética de comandos   4D v11 SQL, Constantes por temas   Regresar   Anterior   Siguiente