Los Elementos de Formulario

En el uso de formularios podremos utilizar muchos elementos.

Pero los principales serán siempre los mismos: cajas de texto y
botones.

De vez en cuando utilizaremos otros elementos como los

radioButtons, checkBoxes, comboBoxes o listBoxes. Veremos
como utilizarlos y a sacarles el mayor partido.

Flash ofrece estos objetos como componentes. Para acceder a

ellos sólo tendrás que abrir el Panel Componentes desde
Ventana → Componentes.

Una vez abierto el panel haz clic en User Interface para

desplegar sus elementos y verás todos los componentes que
podrás utilizar.

Incluso para la introducción de texto en formularios es

aconsejable el uso de componentes, pues veremos que poseen
propiedades que las simples cajas de texto no tienen.

Para utilizar alguno de estos componentes basta con arrastrarlo

del panel al escenario, o puedes arrastrarlo a la biblioteca para
utilizarlo más tarde.

En cualquier caso, cuando hayas añadido el componente a tu

película deberás darle un nombre de instancia para poder
acceder a él en el código y configurar sus opciones en el Panel
Parámetros:

Veamos cuales son las opciones para los diferentes componentes:

TextInput (Introducción de texto):

 • editable: true o false. Permite que el texto se pueda editar o no.

• password: true o false. Oculta el contenido del texto mostrándose un asterisco por
carácter.

• text: Indica el texto inicial de la caja.

TextArea (Área de texto):

• editable: true o false. Permite que el texto se pueda editar o no.

• html: true o false. Permite que se acepte contenido HTML dentro de la caja de texto.
Propiedad muy útil para incluir enlaces en el texto.

• text: Idica el texto inicial de la caja.

• wordWrap: true o false. Permite que se pueda realizar un desplazamiento del texto
de arriba abajo. En caso de que no se permita (false) cuando el texto sobre pase el
área del componente aparecerá una barra de desplazamiento que permitirá mover el
texto de izquierda a derecha.

Button (Botón):

• icon: Añade un icono al botón. Para insertar un icono deberás crear un gráfico o clip
de película y guardarlo en la Biblioteca. Una vez allí selecciónalo y haz clic derecho
sobre él y selecciona Vinculación. Marca la casilla Exportar para ActionScript en el
cuadro de diálogo que aparecerá y dale un nombre en Identificador. Este nombre es
el que deberás escribir en el campo icon del componente botón. Ni el botón ni el
símbolo se ajustará al tamaño del otro, así que deberás modificar sus tamaños para
que el icono no sobresalga del botón.

• label: Texto que se leerá en el botón.

 • labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto en
caso de que se utilice junto a un icono. Respectivamente, izquierda, derecha, arriba
y abajo.

• selected: true o false. Indica si el botón se encuentra seleccionado.

• toggle: true o false. Cuando se encuentra a true hace que el botón pueda tomar dos
posiciones, presionado y no presionado.

RadioButton (Botón de opción):

• data: Especifica los datos que se asociarán al RadioButton. La propiedad data puede
ser cualquier tipo de datos. Puedes acceder a esta propiedad a través de código para
ver que contiene.

• groupName: Nombre del grupo. En un grupo de botones de opción sólo uno de ello
puede estar seleccionado. Definiremos este grupo mediante esta propiedad. Todos
los botones que tengan el mismo nombre en groupName pertenecerán al mismo
grupo.

• label: Texto que se leerá al lado del botón.

• labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto

respecto al botón. Respectivamente, izquierda, derecha, arriba y abajo.

• selected: true o false. Indica si el botón se haya seleccionado o no. De nuevo, en un

mismo grupo sólo un botón de opción puede estar seleccionado.

CheckBox (Casilla de verificación):

• label: Texto que se leerá al lado de la casilla.

 • labelPlacement: left, right, top o bottom. Indica la posición de la etiqueta de texto
respecto a la casilla. Respectivamente, izquierda, derecha, arriba y abajo.

• selected: true o false. Indica si la casilla de verificación se haya seleccionada.

ComoBox (Lista desplegable):

• data: Matriz donde determinaremos el valor qué devolverá el componente al

seleccionar determinada posición.

• editable: true o false. Permite la edición del campo. Mediante ActionScript puedes
hacer que se añadan nuevos elementos a la lista.

• labels: Matriz donde determinaremos el nombre de los elementos de la lista. Estos

elementos se corresponderán uno a uno a los valores de la matriz introducida en
data. Para ambas propiedades se abrirá el siguiente cuadro de diálogo:

Desde aquí podrás añadir o quitar elementos utilizando los botones y . O

alterar el orden de éstos subiéndolos o bajándolos en la lista con los botones y
.
 • rowCount: Número máximo de elementos visibles en la lista. Si este número es
superado por los elementos se añadirá una barra de desplazamiento.

List (Lista):

• data: Matriz donde determinaremos el valor qué devolverá el componente al

seleccionar determinada posición.

• labels: Matriz donde determinaremos el nombre de los elementos de la lista. Estos

elementos se corresponderán uno a uno a los valores de la matriz introducida en
data. Para ambas propiedades se abrirá el mismo cuadro de diálogo visto para el
ComboBox.

• multipleSelection: true o false. Permite la selección múltiple de elementos

manteniendo la tecla Ctrl presionada. También es posible seleccionar un rango de
elementos seleccionando uno de ellos y pulsando la tecla Shift mientras
seleccionamos otro diferente, todos los elementos intermedios resultarán también
seleccionados.

• rowHeight: Número máximo de filas visibles en la lista. Si este número es superado

por los elementos se añadirá una barra de desplazamiento.

NumericStepper (Contador numérico):

• maximum: Establece el número máximo del contador.

• minimum: Establece el número mínimo del contador.

• stepSize: Establece el intervalo en el que se aumenta o disminuye el número del

campo al pulsar los botones del componente.

• value: Valor inicial del campo.

Nota: Todas las propiedades mencionadas para cada uno de los componentes son accesibles
a través de ActionScript escribiendo el nombre de instancia del componente seguido de un
punto y el nombre de la propiedad:

miBoton.label = "Haz clic aquí";

El componente Alert

El componente Alert es muy útil pero se utiliza de forma diferente al resto de los anteriores.

Este elemento nos permitirá el uso de avisos en forma de pop-ups. Para utilizarlo deberás
seleccionarlo en el Panel Componentes y arrastrarlo hasta la Biblioteca.

No lo arrastres sobre el escenario, pues no es necesario. Con que se halle presente en

nuestra biblioteca podremos realizar llamadas al componente. Para ello sólo deberemos
escribir:

Import mx.controls.Alert;

Alert.show("mensaje");

La primera línea la insertamos para poder utilizar el componente y acceder a él mediante el

código. Luego, en el momento en el que la ejecución llegue a la segunda línea saltará un
pop-up con el texto que se incluya en mensaje.

Hay que tener cuidado con este método, pues mientras en otros lenguajes de programación
las alertas detienen la ejecución del código a espera de la aceptación del mensaje,
ActionScript sigue ejecutando el resto de líneas.

Podremos añadir detectores para que se evalúen las acciones realizadas sobre la alerta
utilizando manejadores de eventos. En seguida veremos cómo.

También es posible configurar la alerta de muchas formas. La sintaxis completa del objeto
es la siguiente:

Alert.show(mensaje, titulo, botones, padre, manejador, icono,

botonDefecto);

• mensaje: El texto del mensaje.

• titulo: Título del aviso.

 • botones: Botones que tendrá el aviso. Puedes poner más de dos, en ese caso deberás
separarlos por el símbolo "|". Los botones que puedes añadir son: Alert.OK,
Alert.CANCEL, Alert.YES y Alert.NO. Podemos añadir también
Alert.NONMODAL para hacer que el mensaje de alerta no bloquee el resto de la
película, y así, aunque el mensaje se muestre, podamos seguir interactuando con el
resto de la ventana.

• padre: Determina el movieclip sobre el que se abrirá la alerta centrándose respecto a

él. Para referenciar a la película principal (_root) escribe null o undefined.

• manejador: El nombre del manejador que se encargará de gestionar el clic sobre la

alerta.

• icono: El nombre del icono que queremos que aparezca a la izquierda del mensaje.
Para incluir un icono deberemos vincularlo. Para ello haz clic derecho sobre el
gráfico o clip de película en la Biblioteca y selecciona Vinculación. Luego marca la
casilla Exportar para ActionScript y dale un nombre de Identificador. Será a éste al
que deberás referenciar en el Alert.show().

• botonDefecto: Determina el botón por defecto de la alerta. Utiliza la misma

notación que antes: Alert.OK, Alert.CANCEL, Alert.YES y Alert.NO. Se activará
este botón cuando se pulsa la tecla Intro.

Un ejemplo de manejador y alerta sería esta:

import mx.controls.Alert;

var miManejador:Function = function (miEvento:Object) {

if (miEvento.detail == Alert.OK) {
// acciones
}
else if (miEvento.detail == Alert.CANCEL) {
// acciones
}
}

Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null,

miManejador, "icono", Alert.OK);

Nota: Observa como se han manejado las respuestas de la alerta.

Cuando utilices este método para escribir los mensajes de alerta deberás tener en cuenta que
tienes que escribir todas las propiedades en orden y sin saltarte ninguna.

Aunque puedes no escribir algunas, deberás hacerlo de esta forma:

Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null,

miManejador, "icono", Alert.OK);
Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null,
miManejador, "icono");
Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL, null,
miManejador);
Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL,
null);
Alert.show("Mensaje de alerta.", "Título", Alert.OK | Alert.CANCEL);
Alert.show("Mensaje de alerta.", "Título);

Botones de Formulario

En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar.

Imagina que llamamos al componente botón de limpiar reset_btn, su código asociado sería
sencillo:

var escuchadorLimpiar:Object = new Object();

escuchadorLimpiar.click = function(evt:Object) {
campo1_txt.text = "";
campo2_txt.text = "";
campo3_txt.text = "";
}
reset_btn.addEventListener("click", escuchadorLimpiar);

Como puedes ver, hemos creado un escuchador para reset_btn. Cuando se activa
simplemente vaciamos el contenido de los campos de texto que queramos.

También podríamos iniciar los campos de otra forma:

nombre_txt.text = "Escribe aquí tu nombre";

email_txt.text = "Escribe aquí tu e-mail";
mensaje_txt.text = "Escribe aquí tu mensaje";

En definitiva, puedes tratar los campos como quieras.

Para el botón de envío deberás asociar un escuchador del mismo modo, pero el código que
irá incluido en él deberá enviar los datos, que será lo que veamos en el siguiente apartado.
Envío de formularios
A partir de ahora veremos cómo afrontar el envío y la
recepción de datos con formularios.

Lo haremos a través de este ejemplo, donde encontraremos

elementos de entrada (en los que tendremos que escribir
datos para enviarlos) y de salida (donde tendremos que
recoger datos de un archivo externo para mostrarlo).

El envío de datos de formulario lo realizaremos utilizando el

objeto LoadVars que ya hemos visto. Pero en este caso, en
vez de recabar información, lo usaremos para enviarla.

Su uso es el siguiente:

var escuchadorEnvia:Object = new Object();

escuchadorEnvia.click = function(evt:Object) {
var envio:LoadVars = new LoadVars();

// rellenamos las variables

envio.autor = nombre_txt.text;
envio.email = mail_txt.text;
envio.mensaje = mensaje_txt.text;

envio.onLoad = function(exito:Boolean) {
if (exito) {
nombre_txt.text = "";
mail_txt.text = "";
mensaje_txt.text = "";
}
else {
Alert.show("Ha habido un
error en el envío");
}
}

// enviamos las variables al archivo PHP

envio.sendAndLoad("enviar_comentario.php",
envio, "POST");
}
submit_btn.addEventListener("click",
escuchadorEnvia);

Hemos definido un escuchador que se ejecutará cuando se

pulse el botón de enviar.

Dentro del código de éste hemos declarado un objeto LoadVars llamado envio.
Almacenar las variables en el objeto es tan fácil como escribir lo siguiente:

envio.autor = nombre_txt.text;
envio.email = mail_txt.text;
envio.mensaje = mensaje_txt.text;

Y sólo quedaría enviarlo con el método send.

envio.send("enviar_comentario.php", "_blank", "POST");

Esta función envía las variables almacenadas en LoadVars utilizando el método

especificado en el tercer parámetro (puede ser POST o GET).

Si quieres que el script que se ejecuta se abra en una ventana deberás indicarlo en el
segundo parámetro.

Estas dos últimas funciones son opcionales y podríamos escribir solamente:

envio.send("enviar_comentario.php");

En el ejemplo no hemos utilizado el método send, sino el método sendAndLoad.

envio.sendAndLoad("enviar_comentario.php", envio, "POST");

De este modo podemos añadir un controlador onLoad para evaluar si el envío se realizó
correctamente. En el segundo parámetro deberemos indicar cuál será el objeto que se
cargará (en nuestro caso el mismo objeto envio).

Por lo que además de realizar el envío hemos añadido las líneas:

envio.onLoad = function(exito:Boolean) {
if (exito) {
nombre_txt.text = "";
mail_txt.text = "";
mensaje_txt.text = "";
}
else {
Alert.show("Ha habido un error en el envío");
}
}

Que vacía los campos si la carga del script se realizó correctamente o muestra una alerta en
caso contrario.
Nosotros en el ejemplo hemos añadido algunos validadores para asegurar que todos los
campos se han rellenado. Así, antes de declarar el objeto LoadVars hemos introducido unas
cuantas condiciones del tipo:

if (nombre_txt.text.length == 0) {
Alert.show("Introduce tu nombre", "Error", Alert.OK);
return false;
}

Donde se evalúa la longitud del texto del campo nombre. Si llega a la línea return false; se
saldrá de la función y no llegará a enviar los datos.

El script enviar_comentario.php se encargaría de recibir los datos, tratarlos y luego

almacenarlos o enviarlos por correo.

Nosotros hemos almacenado la opción en un archivo XML desde donde recuperaremos la

información cada cierto tiempo utilizando un bucle en la línea de tiempo.