Issuu on Google+

CARRERA PROFESIONAL DE: COMPUTACIÓN E INFORMÁTICA

UNIDAD DIDÁCTICA: ANIMACION DE GRAFICOS

Unidad Nº12 Contenido: Formularios - ActionScript

Autor Milton Escobar


Animación de Gráficos

Unidad 12

Los elementos de formulario En el uso de formularios podremos utilizar muchos elementos.

Flash ofrece estos objetos como componentes. Para acceder a ellos 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. Para utilizar estos componentes tienes que con arrastrarlo del panel al escenario, o puedes arrastrarlo a la biblioteca para utilizarlo más tarde. En cualquier caso, cuando hayamos añadido el componente a nuestra película deberemos darle un nombre de instancia para poder acceder a él desde el código y configurar sus opciones en la sección Parámetros de componente del inspector de Propiedades: Veamos cuales son las opciones para los diferentes componentes: TextInput (Introducción de texto):  displayAsPassword: Oculta/muestra el contenido del texto mostrándose un asterisco por carácter.  editable: Permite que el texto se pueda editar o no.  text: Indica el texto inicial de la caja.  maxChars: El número máximo de caracteres que se pueden cumplir.

Milton Escobar

Pág. (2)


Animación de Gráficos

Unidad 12

TextArea (Área de texto):    

editable: Permite que el texto se pueda editar o no. text: Indica el texto inicial de la caja. htmlText: Contiene texto que acepta etiquetas html. wordWrap: 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. vertical/horizontalScrollPolicy: Establece cómo se mostrarán las barras de desplazamiento del texto: on, siempre, off nunca, y auto, solo cuando el texto no quepa.

Button (Botón): 

 

 

icon: Añade un icono al botón. Para insertar un icono deberemos crear un gráfico o clip de película y guardarlo en la Biblioteca. Una vez allí lo seleccionamos y haciendo clic derecho sobre él, seleccionamos Vinculación. Marcamos la casilla Exportar para ActionScript en el cuadro de diálogo que aparecerá y le damos un nombre en Identificador. Este nombre es el que deberemos 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 deberemos 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: Indica si el botón se encuentra inicialmente seleccionado. toggle: Cuando se encuentra marcada, hace que el botón pueda tomar dos posiciones, presionado y no presionado.

RadioButton (Botón de opción): 

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

Milton Escobar

Pág. (3)


Animación de Gráficos

  

Unidad 12

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: 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: Indica si la casilla de verificación se haya inicialmente seleccionada.

ComboBox (Lista desplegable): 

editable: Permite la edición del campo. Mediante ActionScript podemos hacer que se añadan nuevos elementos a la lista. dataProvider: Matriz donde determinaremos el nombre de los elementos de la lista y su valor. Se mostrará el siguiente diálogo para introducir los pares texto a mostrar (label) y valor a enviar (data): Desde

aquí

podremos

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.

Milton Escobar

Pág. (4)


Animación de Gráficos

Unidad 12

List (Lista):  

dataProvider: Matriz donde determinaremos el valor qué devolverá el componente al seleccionar determinada posición. allowMultipleSelection: 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. verticalLineScrollSize: 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í";

Botones de formulario En los formularios, normalmente, incluiremos dos botones: Enviar y Limpiar. Imagina que llamamos al componente botón de limpiar btn_borrar, su código asociado sería sencillo: btn_borrar.addEventListener(MouseEvent.CLICK,boton); function boton(event:MouseEvent):void{ nombre.text = ""; email.text = ""; mensaje.text = "";} Milton Escobar

Pág. (5)


Animación de Gráficos

Unidad 12

Como puedes ver, hemos creado un escuchador para btn_borrar. 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.text = "Escribe aquí tu nombre"; email.text = "Escribe aquí tu e-mail"; mensaje.text = "Escribe aquí tu mensaje";

En definitiva, puedes tratar los campos como quieras.

Validar datos Antes de enviar los datos es conveniente validarlos, por ejemplo, para que un campo requerido no quede en blanco. Si la validación se completa, proseguimos con el envío, pero si no, advertimos al usuario de los errores. Un campo requerido es aquél que el usuario debe de rellenar. Por ejemplo, en el caso de un campo de texto, podemos comprobar su longitud con la propiedad miCampoTxt.text.lenght, y si es 0 es vacío. En cambio, si se trata de una casilla que ha de estar seleccionada, basta con consultar la propiedad miCasilla.selected. Una forma más avanzada sería utilizar expresiones regulares, con el objeto RexExp, que nos permite personalizar mucho más la validación. Por ejemplo, la siguiente función comprueba si el valor es un número: function esNumero(valor:String):Boolean { var expRegular:RegExp = /[0-9]+/; return expRegular.test(valor); }

Con esto para comprobar si el contenido de un texto es numérico, bastaría con preguntar si esNumero(miCampo.text). Una función muy útil es la de establecer dónde colocar el foco escribiendo la siguiente línea: miCampoTxt.stage.focus = miCampoTxt;

De este modo, si encontramos un error al validar podemos establecer el punto de inserción en el campo correspondiente para que el usuario escriba directamente. Para acabar, debemos de tener un campo de texto para mostrar los posibles errores. Vamos a unir todo esto en una función que validará los datos de un formulario. function validarDatos():Boolean { if (txt_nombre.length==0) { //campo requerido txt_nombre.stage.focus=txt_nombre; //le damos el foco Milton Escobar

Pág. (6)


Animación de Gráficos

Unidad 12

txt_aviso.text="Introduce tu nombre"; //Indicamos el error return false; //Devolvemos falso } else if (!chk_condiciones.selected) { //Comprobamos que la casilla esté marcada chk_condiciones.stage.focus = chk_condiciones; txt_aviso.text="Debes aceptar las condiciones"; return false; } else { if (esNumero(txt_edad.text)) { //Comprobamos si es un número if (Number(txt_edad.text)<18) { //comprobamos si es mayor txt_edad.stage.focus=txt_edad; txt_aviso.text="Tienes que ser mayor de edad"; return false; } else { //Si llega hasta aquí, es que todo se ha validado //Devolvemos true return true; } } else { txt_edad.stage.focus=txt_edad; txt_aviso.text="Introduce tu edad"; return false; } } }

Como se ve, comprobamos si el campo txt_nombre tiene texto, si la casilla chk_condiciones está marcada, y si txt_edad es un número mayor que 18. A esta función, la llamaríamos al pulsar el botón de envío (btn_enviar). Lo que hará será validar, y si el resultado es correcto, llamará a la función que envía los datos (enviarDatos) que veremos en el próximo apartado. ? btn_enviar.addEventListener(Mouse.CLICK, validaryEnviar); function validaryEnviar(event):void { if (validarDatos()) { //validamos enviarDatos(); //Y si es True, enviamos } }

Envío de formularios Vamos a crear el código estándar que nos permite enviar el formulario. Antes de enviar los datos, hemos validado los datos como vimos en el punto anterior.

Milton Escobar

Pág. (7)


Animación de Gráficos

Unidad 12

Lo normal, tras rellenar un formulario en una página web, es que esta los envíe a una página dinámica, en PHP o ASP. Esta página se encargará de recoger los datos, volverlos a validar, y hacer lo que corresponda con ellos, como guardarlos en una base de datos, o enviar un correo. Con Flash haremos lo mismo. En nuestro ejemplo, enviaremos los datos a enviarCorreo.php. Vamos a utilizar tres objetos:   

Un objeto URLVariables. Este objeto nos permite componer cómodamente variables de URL, con el formato var1=valor1&var2=valor2&var3=valor3... Un objeto URLRequest. Nos permite configurar la dirección web de envío, cómo se enviarán los datos y asignarle esos datos con un objeto URLVariables. Un objeto URLLoader. Aunque normalmente lo empleamos para obtener información de archivos, también nos sirve para enviar información al archivo indicado como un URLRequest.

Veamos el código: //Función que se ejecuta al presionar el botón de envío function enviarDatos(event:MouseEvent):void { System.useCodepage = true;//Esta línea coge la página de carácteres //del sistema, para mostrarlos correctamente //Utilizamos un objeto URLVariables para guardar los datos de nuestros campos. var datosFormulario:URLVariables = new URLVariables(); //Definimos los campos y les agregamos el valor de las cajas de texto. datosFormulario.nombre = txtNombre.text; datosFormulario.apellidos = txtApellidos.text; datosFormulario.email = txtEmail.text; //Con un obj. URLRequest generamos la URL a la que se envían los datos var paginaEnvio:URLRequest=new URLRequest("enviarCorreo.php"); //Indicamos el método de envío y le cargamos misVariables. paginaEnvio.method=URLRequestMethod.POST; paginaEnvio.data=misVariables; //Utilizamos un obj. URLLoader para enviar info. a un archivo externo var cargador:URLLoader = new URLLoader(); //Como siempre, creamos un evento que nos indica si se ha completado //el envío de información, y x tanto se han enviado los datos cargador.addEventListener(Event.COMPLETE, envioCompleto); //Utilizamos el evneto IOErrorEvent.IO_ERROR que se lanza cuando ocurre //un error, por lo que los datos no se han enviado cargador.addEventListener( IOErrorEvent.IO_ERROR, errorEnvio ); //Y para acabar, enviamos los datos caragdor.load(paginaEnvio); } function envioCompleto(event):void { //Si se completa, avisamos del envío y limpiamos campos aviso.text="Envío completo"; txtNombre.text=""; Milton Escobar

Pág. (8)


Animación de Gráficos

Unidad 12

txtApellidos.text=""; txtEmail.text=""; } function errorEnvio(event):void { //Si hay un error, avisamos de ello aviso.text="Se produjo un error, no se ha completado el envío"; }

btn_enviar.addEventListener(MouseEvent.CLICK, validaryEnviar); function validaryEnviar(event):void { if (validarDatos()) { //validamos enviarDatos(); //Y si es True, enviamos } }

Podemos ver que para crear las variables en el objeto URLVariables, no tenemos más que escribir el nombre que le queremos dar como una propiedad, y asignarle el valor que queremos guardar en la variable: datosFormulario.nombre = txtNombre.text; datosFormulario.apellidos = txtApellidos.text; datosFormulario.email = txtEmail.text;

Al objeto URLRequest, le indicamos el nombre de archivo (nuestra página), el método de envío (method), como en los formularios HTML, y los datos (data) que hemos configurado en el objeto URLVariables. var paginaEnvio:URLRequest=new URLRequest("enviarCorreo.php"); paginaEnvio.method=URLRequestMethod.POST; paginaEnvio.data=misVariables;

Y por último utilizamos el objeto URLLoader para comunicarnos con el archivo cuya ubicación se indica en el objeto URLRequest. Cargamos la información hacia él, y comprobamos si se ha completado el envío o se ha producido un error, para avisar al usuario. El script enviarCorreo.php se encargaría de recibir los datos, generar el correo y enviarlo. Nota: Para poder ejecutar una página dinámica, como la que envía el correo en PHP, hay que tener instalado un servidor web en el equipo. Por lo que si no lo tienes, no se enviará el correo, aunque tampoco dará ningún error si se encuentra el archivo.

Milton Escobar

Pág. (9)


Animación de Gráficos

Unidad 12

Otras propiedades de los formularios Además de todo lo que hemos visto existen, también, otras propiedades bastante interesantes. Por ejemplo, el orden de tabulación. Esta propiedad establece como actúa el cursor a las repetidas pulsaciones de la tecla Tabulador. Podemos alterar el orden utilizando la propiedad tabIndex. Esta propiedad indicará el orden en el que se desplazará el cursor cada vez que pulsemos el Tabulador: nombre_txt.tabIndex = 1; mail_txt.tabIndex = 2; mensaje_txt.tabIndex = 3; reset_btn.tabIndex = 4; submit_btn.tabIndex = 5;

También podemos establecer el botón predeterminado del formulario para que cuando se pulse la tecla Intro sea como si hiciésemos clic en él. Escribe la siguiente línea: //En este caso, debemos de importar la clase para que la reconozca import fl.managers.FocusManager; var fm:FocusManager = new FocusManager(this); fm.defaultButton = submit_btn;

De esta forma haremos que el botón predeterminado sea submit_btn. En este caso, this se refiere a la película principal, pero podemos indicar el contenedor que contenga a nuestro formulario. Estos conceptos son muy importantes de cara al usuario, ya que muchos están acostumbrados a cambiar de un control a otro con el Tabulador y a pulsar Intro para enviarlo.

Recuperando información XML XML es un lenguaje de marcas estructuradas, en el que la información se clasifica en elementos y sub elementos, con propiedades y atributos, utilizando etiquetas, de forma muy similar al HTML. De hecho, existe XHTML, que no es más que HTML que cumple las reglas estrictas del XML. Por ejemplo, nosotros vamos a trabajar con la siguiente información XML que tenemos en un archivo, llamado comentarios.xml: <?xml version="1.0" encoding="ISO-8859-1" ?> <listadoComentarios> <comentario> <autor>josé</autor> <email>jose@correo.com</email> <mensaje>estoy escribiendo un mensaje</mensaje> </comentario> <comentario> Milton Escobar

Pág. (10)


Animación de Gráficos

Unidad 12

<autor>amparo</autor> <email>amparo@correo.com</email> <mensaje>este mensaje también se publicará</mensaje> </comentario> <comentario> <autor>miguel</autor> <email>miguel@correo.com</email> <mensaje>mensaje de prueba</mensaje> </comentario> <comentario> <autor>cristina</autor> <email>cristina@correo.com</email> <mensaje>esto funciona!</mensaje> </comentario> </listadoComentarios>

En Flash tenemos el elemento XML. En él almacenamos la información con la estructura XML. Este objeto, nos permite recorrer esta información de forma organizada. A un elemento XML le podemos asignar directamente la información como si fuera un String, pero sin encerrarla entre comillas. Por ejemplo: var miXML:XML = <pedido> <articulo id='1' cantidad='1'> <nombre>Raqueta Tenis</nombre> <precio>33.95</precio> </articulo> <articulo id='2' cantidad='3'> <nombre>Pelota Tenis</nombre> <precio>4.45</precio> </articulo> </pedido>;

Pero en nuestro ejemplo, la información XML la tenemos en un archivo. Como ya vimos, para cargar información de archivos externos necesitamos un elemento URLLoader. Vamos a ver cómo hemos utilizado la información del archivo utilizando estos dos elementos: //Para trabajar con datos XML utilizamos un objeto XML var datosXML:XML = new XML(); datosXML.ignoreWhite = true; //Ignora elementos en blanco //Para obtener información de un archivo, utilizamos un URLLoader var cargadorXML:URLLoader = new URLLoader(); cargadorXML.load(new URLRequest('comentarios.xml')); //Utilizamos el evento complete para no trabajar hasta que //se haya cargado completamente cargadorXML.addEventListener("complete", archivoCargado); Milton Escobar

Pág. (11)


Animación de Gráficos

Unidad 12

function archivoCargado(ev:Event):void { comentarios_text.text=""; //Convertimos la info leída a XML y se la asignamos al objeto XML datosXML=XML(cargadorXML.data); var cadena:String; //Con este bucle, reccoremos todos los elementos for (var elemento:String in datosXML.comentario) { //Para cada elemento, cremos una cadena de texto y la mostramos cadena="<a href=\"mailto:"+datosXML.comentario.email[elemento]+"\">"+ datosXML.comentario.autor[elemento]+"</a>: <span class=\"mensaje\">"+ datosXML.comentario.mensaje[elemento]+"</span><br>\n"; comentarios_text.appendText(cadena); } }

Comenzamos declarandos el objeto XML, al que hemos llamado datosXML porque es lo que contendrá. Como todo objeto, tiene una serie de propieades que no vamos a detallar. Hemos utilizado la propiedad ignoreWhitespace, que ignorará aquellos campos que estén en blanco y así no tendremos que preocuparnos por posibles errores. A continuación, extraemos la información del archivo, para lo que hemos utilizado un objeto URLLoader, al que hemos llamado cargadorXML. En su método load le indicamos el archivo a cargar. Además, como veníamos haciendo, para no continuar con el trabajando hasta que no se haya terminado de cargar, utilizamos el evento complete. En él, trataremos la información. Llegados a este punto, tenemos la información cargada en la propiedad .data del cargador. Como no hemos indicado otra cosa, se ha cargado todo el archivo como texto. Utilizamos la función XML() para convertirlo a información XML, y se la asignamos a nuestro objeto XML: datosXML = XML(cargadorXML.data);

Ahora, ya tenemos datosXML con toda la información. Con este objeto es sencillo acceder a ella, listarla, etc. En nuestro ejemplo, si queremos acceder al primer email (posición 0), lo podemos hacer escribiendo datosXML.comentario.email[0]. Basándonos en eso, hemos hecho un bucle for para recorrer todos los elementos, e ir construyendo la cadena de texto que mostramos en la caja de texto. Esta forma requiere que conozcamos la estructura del archivo, saber que se divide en etiquetas <comentario> y que dentro de ella tenemos la etiqueta <email>. Utilizando los índices, podemos acceder a los distintos elementos de la jerarquía. Por ejemplo: trace ('datosXML: ',datosXML); //Escribe todo el archivo trace ('datosXML.comentario[1]: ',datosXML.comentario[1]); //Escribe el segundo comentario trace ('datosXML.comentario[1].email: ',datosXML.comentario[1].email); trace ('datosXML.comentario.email[1]: ',datosXML.comentario.email[1]); //Los dos anteriores escriben el email del segundo comentario.

Milton Escobar

Pág. (12)


Animación de Gráficos

Unidad 12

En el ejemplo hemos accedido a un archivo .xml, pero podemos hacerlo con cualquier archivo que contenga la información XML debidamente estructurada. Por ejemplo, es muy frecuente utilizarlo llamando a un archivo PHP que genera el XML de forma dinámica.

HTML y CSS en cajas de texto Si recordamos el ejemplo anterior, tras mostrar el contenido del XML, obteníamos el siguiente texto en comentarios_text, una caja de texto: ? <a href="mailto:ana@correo.com">ana</a>: <span class="mensaje">si actualizo aquí se verá en otra ventana?</span> <br> <a href="mailto:jesus@correo.com">jesús</a>: <span class="mensaje">pues ya estamos todos</span> <br> <a href="mailto:emilio@correo.com">emilio</a>: <span class="mensaje">yo también me apunto</span> <br> <a href="mailto:david@correo.com">david</a>: <span class="mensaje">bien, pero trae algo para cenar, no tengo nada en la nevera</span> <br>

Pero lo normal es que si escribimos código HTML es porque queremos que se vea con un determinado formato, no las etiquetas HTML. Para que Flash tome el contenido como HTML, en vez de utilizar la propiedad comentarios_text.text empleamos comentarios_text.htmlText para establecer el texto. Pero no sólo queremos ocultar las etiquetas, queremos formatear el texto debidamente utilizando la siguiente hoja de etilos, que tenemos en el archivo estilo_comentarios.css: .mensaje { font-style: italic; color: #2C578F; } a{ font-weight: bold; color: #CF406E; }

Podemos distinguir dos estilos: uno aplicado a los elementos con la clase mensaje (class="mensaje") y otro aplicado a los enlaces (<a href...). Como siempre, e independientemente de para qué lo usemos, cargamos la información del archivo con un objeto URLLoader, y preparamos el evento complete, para utilizar los datos cuando estén listos: var cargadorCSS:URLLoader=new URLLoader(); cargadorCSS.load(new URLRequest('comentarios.css')); cargadorCSS.addEventListener('complete', estiloCargado);

Milton Escobar

Pág. (13)


Animación de Gráficos

Unidad 12

El objeto que nos permite utilizar las propiedades CSS es del tipo StyleSheet. Lo declaramos, y cuando el cargador tenga los datos listos es su propiedad .data, se los asignamos a la hoja de estilo con su método parseCSS. Y para acabar, con la propiedad styleSheet de la caja de texto indicamos que usará nuestra hoja. var miHojaEstilo:StyleSheet = new StyleSheet(); function estiloCargado(event):void { //Convertimos los datos cargados miHojaEstilo.parseCSS(cargadorCSS.data); //E indicamos a la caja de texto que use esta hoja comentarios_text.styleSheet = miHojaEstilo; };

Esto debemos de realizarlo antes de rellenar la caja de texto con HTML, ya que flash no trata igual el HTML si no tiene una hoja de estilo asociada. Si queremos podemos cambiar la propiedad para utilizar otra hoja de estilo. O aprovechando las funciones y objetos definidos, podemos crear un botón para que cargue una nueva hoja: btn.addEventListener(MouseEvent.CLICK, cambiarHoja); function cambiarHoja(event) { cargadorCSS.load(new URLRequest('comentarios2.css')); }

Como el cargador ya tiene asociado el evento complete, se volverá a ejecutar la función estiloCargado asignando el nuevo estilo.

Milton Escobar

Pág. (14)


S12 formularios