09 de Septiembre de 2010

Notas Espacio Programación

galería de imágenesvideo
AUTOR: Andrés Fernández
FECHA: 20/8/2006
LECTURAS:8478
Buscar Notas
volver
Usuarios

Formularios en Flash

Si te interesó el artículo donde explicábamos cómo hacer un Formulario de contacto en HTML, quizá te inerese este...
Vamos a explicar cómo hacer un formulario en flash como el que se ve en este enlace.
Primero vamos a tomar el archivo que vimos en el artículo Formulario de Contacto en PHP y vamos a introducirle unas pequeñas modificaciones porque ya no nos servirá que nos lleve a una nueva página luego de enviar el mail, como lo hacía en ese caso. Ahora, lo que nos interesa es que ese archivo devuelva un mensaje de enviado correctamente a Flash luego de realizar el envío.
Las modificaciones que haremos para que eso suceda son las siguientes:

1)Suprimiremos de la zona de configuración la variable que se llamaba $adondevoy.
2)Reemplazaremos la última línea del archivo (la que nos derivaba a la página de agradecimiento indicada en la variable $adondevoy).

De manera tal que el archivo de envío (al que renombramos como procesar_formulario_flash.php) debe quedarnos así:
<?php
/*----------- INICIO DE CONFIGURACION-----------------*/
//mail del destinatario (escribirlo entre las comillas)
$destino='';
//nombre del que envía el correo (escribirlo entre las comillas)
$origen_nombre='';
//mail del que envía el correo (escribirlo entre las comillas)
$origen_mail='';
//título del corrreo (escribirlo entre las comillas)
$subject='';
//antes estaban estas 2 líneas:
//página a la que se va luego de enviar el mail (escribirlo entre las comillas)
//$adondevoy='';
/*----------- FIN DE LA CONFIGURACION-----------------*/
$headers "From: $origen_nombre <$origen_mail>\r\n";
$headers .= "Reply-To: $origen_mail\r\n"
$headers .= "Return-Path: $origen_nombre <$origen_mail>\r\n";  
$mensaje='';
    foreach(
$_POST as $k => $v){
        if(
$k!='Submit'){
            
$mensaje.=ucfirst($k).": $v\n";
        }
    }

mail($destino,$subject,$mensaje,$headers);
//antes estaba esta línea:
//header("Location:$adondevoy");
echo "&contestar=Estado: mensaje enviado correctamente.&";
?>


Bien, ahora dentro de Flash creamos nuestro formulario haciendo que cada campo del mismo corresponda a un texto de tipo Introducción de Texto o Input Text, y le asignamos a cada uno de ellos un nombre de instancia. Nuestro ejemplo es el de esta figura:

http://www.disegnocentell.com.ar/new/ejemplos/vista_form.jpg

Es decir, tenemos 4 campos de texto tipo input text con los siguientes nombres: nombre, apellido, email, y comentario. También tenemos un campo de texto dinámico vacío (no visible en la figura superior) con nombre de instancia estado, en el cual pondremos los mensajes de error y de proceso, para que el usuario sepa en todo momento qué está sucediendo con el envío de su correo o si se equivoca al rellenar los campos o si deja vacío un campo de llenado obligatorio. Por último, tenemos también un botón al que le daremos el original nombre de instancia boton (sin acento).
En el mismo fotograma donde tenemos todos estos elementos, colocaremos las siguientes acciones (las cuales explicaremos a continuación):
System.useCodepage=true;
var 
enviar=new LoadVars();
var 
recibir=new LoadVars();
function 
enviar_mensaje(){
    if(
_root.nombre.text.length<1){
        
_root.estado.text="por favor complete el campo nombre";return;
    }
    if(
_root.apellido.text.length<1){
        
_root.estado.text="por favor complete el campo apellido";return;
    }
    if(
_root.email.text.length<1){
        
_root.estado.text="por favor complete el campo email";return;
    }
    if(
_root.email.text.indexOf("@")<0){
        
_root.estado.text="por favor complete el campo email";return;
    }
    if(
_root.email.text.indexOf(".")<0){
        
_root.estado.text="por favor complete el campo email";return;
    }
    if(
_root.comentario.text.length<1){
        
_root.estado.text="por favor complete el campo comentario";return;
    }
    
enviar.nombre=_root.nombre.text;
    
enviar.apellido=_root.apellido.text;
    
enviar.email=_root.email.text;
    
enviar.comentario=_root.comentario.text;
    
_root.estado.text="Estado: conectando con el servidor...";
    
enviar.sendAndLoad("procesar_formulario_flash.php",recibir,"POST");
}
function 
recibir_rta(ok){
    if(
ok){
        
_root.estado.text=this.contestar;
        
_root.nombre.text='';
        
_root.apellido.text='';
        
_root.email.text='';
        
_root.comentario.text='';        
    }
}    
recibir.onLoad=recibir_rta;
_root.boton.onRelease=enviar_mensaje;


Con esta instrucción...
System.useCodepage=true;

...compatibilizamos la codificación del texto, para que caracteres como ñ o vocales acentuadas se lean sin problemas.
Con...
var enviar=new LoadVars();
var 
recibir=new LoadVars();


...instanciamos 2 objetos LoadVars
La función enviar_mensaje será la encargada de procesar el envío. En ella se realizan varias operaciones. Como nuestros campos son todos obligatorios, controlamos primero que hayan escrito algo en ellos con instrucciones de este tipo:
if(_root.nombre.text.length<1){ 
        
_root.estado.text="por favor complete el campo nombre";return; 
    }


Es decir, un condicional que toma lo escrito en un campo (en este caso como es nombre el nombre de instancia de ese campo, para tomar lo escrito en el mismo se usa _root.nombre.text) y verifica si la propiedad length de lo escrito es menor que 1 caracter, o sea si no se ha escrito nada dentro del campo. En caso afirmativo (es decir, si el campo está vacío), se escribe dentro del texto dinámico estado un alerta para el usuario y se detiene con return la ejecuión del script (recordemos que la instrucción return sirve para devolver un valor y finalizar una función; si no se le indica un valor, sólo detiene la ejecución del script, es decir, finaliza la función justo en el punto donde se encuentre el return).
También verán en la función unos condicionales ligeramente diferentes:
if(_root.email.text.indexOf("@")<0){ 
        
_root.estado.text="por favor complete el campo email";return; 
    } 
    if(
_root.email.text.indexOf(".")<0){ 
        
_root.estado.text="por favor complete el campo email";return; 
    }


Lo que hacen es tomar lo escrito en el campo email (_root.email.text) y verificar la ubicación de determinados caracteres con el método de String indexOf, el cual devuelve la ubicación dentro de un texto determinado del caracter o conjunto de caracteres que se le pase por parámetro (o sea, dentro del paréntesis). Si el método no encuentra el caracter o conjunto de caracteres dentro del texto analizado deuelve -1. En caso de que eso suceda, nosotros escribimos un alerta dentro del campo estado y detenemos la ejecución del script. Demás está ecir que la validación del formato del correo se puede mejorar, ya que sólo verifica que hayan escrito por lo menos una @ y un punto, pero si les consuela, es la que usa Macromedia en Dreamweaver por defecto en los comportamientos de validación de e-mail en formularios.
En la función sigue esto:
enviar.nombre=_root.nombre.text
 
enviar.apellido=_root.apellido.text
 
enviar.email=_root.email.text
 
enviar.comentario=_root.comentario.text;


Qué es eso? Eso es asignar al objeto LoadVars, creado anteriormente y llamado enviar, una serie de propiedades personalizadas. En este caso, las propiedades que asignamos son nombre, apellido, email y comentario. Para qué servirán estas propiedades?... pues actuarán exactamente como los campos de los formularios html, es decir, serán las encargadas de enviar a la página de proceso un valor identificado con su nombre, Y el valor que enviarán en este caso corresponderá a lo que se escriba en el campo, por eso cada una de ellas es igual a _root.nombrecampo.text.
En resumen, cuando enviemos el formulario a la página de proceso estaremos enviando por el método que elijamos (en nuestro caso POST) una serie de valores que en realidad son las propiedades que le asignemos al objeto enviar.
Al mismo tiempo que preparamos el envío, escribimos en nuestro campo estado en qué etapa del proceso estamos:
_root.estado.text="Estado: conectando con el servidor...";

Y finalmente, con esta instrucción realizamos el envío:
enviar.sendAndLoad("procesar_formulario_flash.php",recibir,"POST");

Con esa línea, que significa "voy a enviar por el método POST todos los valores asignados al objeto enviar... adónde?... a la página de proceso llamada procesar_formulario_flash.php... y espero respuesta de esa página y la misma debe ser enviada al objeto recibir", con esa línea, repetimos, finalizamos la función enviar_mensaje.
Pasemos entonces a la función recibir_rta:
function recibir_rta(ok){ 
    if(
ok){ 
        
_root.estado.text=this.contestar
        
_root.nombre.text=''
        
_root.apellido.text=''
        
_root.email.text=''
        
_root.comentario.text='';         
    } 
}


Declaramos la función y le pasamos un argumento. Este argumento es en realidad una forma de comprobar si PHP regresa valores a Flash. Si es así, el valor booleano de "ok" será 1 (o TRUE); de lo contrario, tomará el valor de 0 (o FALSE). El evento "onLoad" que utilizaremos para llamar a esta función, es el encargado de modificar este valor, de forma que, en caso de que PHP regrese un valor correctamente a Flash, la llamada de esta función vendría a ser similar a escribir recibir_rta(TRUE); y como TRUE es siempre verdadero, la condición if(ok) se cumplirá, realizándose entonces el resto de las instrucciones de la función.
La primera de dichas instrucciones
_root.estado.text=this.contestar;

lo que hace es escribir en el texto dinámico estado lo que recibamos desde PHP.
Pero expliquemos un poco cómo se reciben los datos desde PHP. Desde PHP recibimos valores de manera similar a cuando extraemos datos de un archivo de texto con el método loadVariables, es decir, recibimos valores que están escritos de la siguiente manera en el archivo de texto:
//este sería el contenido del archivo de texto:
&variable1=valor1&variable2=valor2&variablen=valorn&


(Nótese que cada par variable=valor está separado por el signo &).
Si esos valores estuvieran escritos así, nosotros podríamos leerlos desde Flash de la siguiente manera:
//En PHP o en archivo de texto:
&variable1=valor1&
//Para leerlo desde Flash haríamos lo siguiente:
valor_recibido=recibir.variable1 ;
//ó valor_recibido=recibir['variable1'];
//las dos formas son equivalentes


Por supuesto, haríamos lo mismo para recibir el resto de los valores. Para recibir por ejemplo el valor de variable2, en Flash escribiríamos algo como esto:
valor_recibido2=recibir.variable2=recibir['variable2'];

Como vemos, de la misma manera en que para enviar los valores los transmitíamos como propiedades del objeto enviar, para recibirlos los recibimos como propiedades del objeto recibir.
El resto de las líneas de la función
_root.nombre.text='';

y similares lo que hacen es borrar lo escrito en los campos para que sea más evidente que el mensaje se envió (decimos más evidente, porque la instrucción que acabamos de explicar -_root.estado.text=this.contestar;- para ese momento habrá escrito dentro del campo estado el mensaje recibido desde PHP que, en nuestro ejemplo, dice: "Estado: mensaje enviado correctamente.").
Finalmente, sólo resta explicar estas líneas:
recibir.onLoad=recibir_rta;
_root.boton.onRelease=enviar_mensaje;


La primera lo que hace es llamar a la función recibir_rta, que es la que acabamos de explicar, no bien Flash recibe datos desde PHP. Es decir, cuando se produce el evento onLoad. Al mismo tiempo, como dijimos antes, le asigna el valor 1 o TRUE al parámetro ok de dicha función.
La segunda, llama a la función enviar_mensaje cuando se produce el evento onRelease en el botón que instanciamos como boton. Es decir, envía a la página de proceso los valores asignados al objeto enviar cuando se hace click en el botón enviar.
Una última cosa, noten que en las llamadas a ambas funciones no colocamos los paréntesis luego de sus nombres: si no lo hacemos de esa manera obtendremos un error.
Eso es todo.
Repetimos el enlace donde pueden ver el ejemplo terminado y les dejamos todos los archivos utilizados en este artículo para que descarguen gratuitamente desde el botón de descargas ubicado en el lateral izquierdo de esta misma página.
Home - Quiénes Somos - Portfolio - Espacio Diseño - Espacio Programación - Capacitación - Contacto - RSS - XHTML 1.0