Prefacio
Como Flex Builder 3 esta ligado con ActionScript 3.0 nos genera la consecuencia que para aplicar una mejor funcionalidad tendremos que trabajar con archivos con extensión .mxml y archivos .as; por lo tanto la funcionalidad de las plataforma que trabajemos se las daremos en la mayoria de ocasiones con ActionScript 3.0. Cabe mencionar que al hacer esto llamaremos a las etiquetas desde el código ActionScript y para ello necesitaremos darle a todas nuestras etiquetas mxml -como las etiquetas TextInput- su atributo de identificación id.
Desarrollaremos un formulario que sea capaz de insertar, editar y consultar datos. Suficiente para comprender como se pueden manipular los datos en Flex Builder 3. Una de las bondades que nos trae del MXML de Flex es que es sumamente sencillo crear una interfaz para el usuario y más aun modificar los atributos de sus etiquetas.
El IDE de Flex Builder 3 nos da la posibilidad de poder trabajar en ambiente grafico o directamente con el código, a mi punto de vista este último es la mejor forma de trabajar y dejar la vista de diseño solamente cuando requiera modificar la interfaz de usuario o para afinar los detalles.
Comencemos con el concepto, la interfaz que desarrollemos administrara unas cuentas de correos donde se estaran procesando los datos de Nombre, Apellidos y Correo Electrónico, y por motivos de sencilles la interfaz permitira realizar las busquedas por medio del Correo Electrónico. Antes de empezar con el código MXML veamos la estructura de la interfaz.
Estructura de la Interfaz
La estructura estara poseerá un contenedor principal del tipo VBox -nos ayudara a ordernar verticalmente sus contenedores hijos- y dentro poseerá dos contendores Form -uno para busqueda y otro para resultados- y un ControlBar que serivará para distribuir los botones de la aplicación. Veamos como quedaria el cádigo con el contenedor VBox.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF" backgroundGradientColors="[#008AFF, #EFEFF0]" backgroundGradientAlphas="[0.0, 1.0]"> <mx:VBox horizontalAlign="center" x="400" y="30"> </mx:VBox> </mx:Application>
Valga la aclaración que de aquí en adelante todo lo que insertemos estará entre las etiquetas VBox. Dentro de la etiqueta Application solo hemos colocado atributos que pintaran la interfaz con un tono blanco con azul y la etiqueta VBox solo hemos echo que sus contenedores hijos esten posicionados al centro y con los atributos x y asignamos la ubicación del contenedor dentro de la aplicación -nada complicado-. Ahora pasemonos al primer contenedor Form que realizara la busqueda del correo electronico.
<mx:Form>
<mx:FormItem direction="horizontal" label="Buscar por Correo">
<mx:TextInput id="txtBuscar" maxChars="35" restrict="a-zñA-ZÑ0-9 @,._-" width="200"/>
<mx:Button id="btnBuscar" label="Buscar" width="100"/>
</mx:FormItem>
</mx:Form>
Bien comentaremos lo más importante… como valor estandar la etiqueta FormItem distribuye a sus contenedores hijos de forma vertical, sin embargo con el atributo direction hemos cambiado la dirección del orden a horizontal. Dentro de la etiqueta TextInput hemos utilizado el atributo id para identificarlo dentro del codigo ActionScript -esto si fuese necesario-, establecemos el atributo maxChars a 35 caracteres para que el usuario pueda digitar y con el atributo restrict hemos indicado cuales son los caracteres que el usuario podra digitar -con esto evitamos que el usuario digite caracteres especiales o ingrese datos incongruentes-.
Con la misma logica hemos desarrollado el segundo formulario para captura y modificación de datos, pero le hemos adicionado a un par de etiquetas FormItem el atributo required con el valor de verdadero, esto es para indicarle al usuario que campos serán obligatorios, veamos el código:
<mx:Form>
<mx:FormHeading label="Gestión de Datos"/>
<mx:FormItem label="Nombre" required="true">
<mx:TextInput id="txtNombre" maxChars="25" restrict="a-zñ A-ZÑ." width="250"/>
</mx:FormItem>
<mx:FormItem label="Apellido">
<mx:TextInput id="txtApellido" maxChars="25" restrict="a-zñ A-ZÑ." width="250"/>
</mx:FormItem>
<mx:FormItem label="Correo Electrónico" required="true">
<mx:TextInput id="txtEMail" maxChars="35" restrict="a-zñA-ZÑ0-9 @,._-" width="250"/>
</mx:FormItem>
</mx:Form>
Seguido al segundo formulario utilizaremos una etiqueta Text para mandar a imprimir el resultado devuelto que genere la consulta a la fuente externa, y por debajo colocaremos un contenedor ControlBar que nos servirá para distribuir horizontalmente los botones de la interfaz de usuario.
<mx:Text id="txtMensaje" fontSize="13" fontWeight="bold"/> <mx:ControlBar> <mx:Button id="btnCapturar" label="Capturar"/> <mx:Button id="btnModificar" label="Modificar"/> <mx:Button id="btnLimpiar" label="Limpiar"/> </mx:ControlBar>
Veamos a continuación las etiquetas de validación, estas etiquetas en conjunto con el código ActionScript 3.0 podremos prevenir que el usuario ingrese los datos correctos antes de procesarlos para la base de datos, las etiquetas que utilizaremos son StringValidator y EmailValidator, estas etiquetas las podremos colocar por debajo de la etiqueta de apertura Application.
<mx:StringValidator id="nombreValidator" required="true"
source="{txtNombre}" property="text" minLength="2"
trigger="{btnCapturar}" triggerEvent="click"
requiredFieldError="Ingrese un nombre"
tooShortError="Ingrese un nombre mayor a 2 letras"/>
<mx:EmailValidator id="eMailValidator" required="true"
source="{txtEMail}" property="text"
trigger="{btnCapturar}" triggerEvent="click"
requiredFieldError="Ingrese un correo electrónico"
missingAtSignError="Falta el signo de arroba"
missingPeriodInDomainError="Falta el un punto en el dominio"
missingUsernameError="Falta el nombre de usuario"
tooManyAtSignsError="El E-Mail contiene más de una arroba"/>
A cada validador le asignaremos un valor a la propiedad id para llamarlo desde el código ActionScript, la propiedad source nos ayudará a indicar que TextInput evaluará, mientras que el activador de las validaciones lo fijaremos con la propiedad trigger y el tipo de evento lo determinaremos con triggerEvent. El grupo de posibles respuestas que se podrá imprimir dependerá del tipo de validador a ejecutarse, las respuestas se activarán si no cumple el requerimiento que establezcamos, por ejemplo, algún campo de texto obligatorio está vacío o no se escriba el dominio de una cuenta de correo electrónico. Ahora veamos el código completo que hemos desarrollado:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="#FFFFFF" backgroundGradientColors="[#008AFF, #EFEFF0]"
backgroundGradientAlphas="[0.0, 1.0]">
<mx:StringValidator id="nombreValidator" required="true"
source="{txtNombre}" property="text" minLength="2"
trigger="{btnCapturar}" triggerEvent="click"
requiredFieldError="Ingrese un nombre"
tooShortError="Ingrese un nombre mayor a 2 letras"/>
<mx:EmailValidator id="eMailValidator" required="true"
source="{txtEMail}" property="text"
trigger="{btnCapturar}" triggerEvent="click"
requiredFieldError="Ingrese un correo electrónico"
missingAtSignError="Falta el signo de arroba"
missingPeriodInDomainError="Falta el un punto en el dominio"
missingUsernameError="Falta el nombre de usuario"
tooManyAtSignsError="El E-Mail contiene más de una arroba"/>
<mx:VBox x="400" y="30" horizontalAlign="center">
<mx:Form>
<mx:FormItem label="Buscar por Correo" direction="horizontal">
<mx:TextInput id="txtBuscar" maxChars="35" restrict="a-zñA-ZÑ0-9 @,._-" width="200"/>
<mx:Button id="btnBuscar" label="Buscar" width="100"/>
</mx:FormItem>
</mx:Form>
<mx:HRule width="100%"/>
<mx:Form>
<mx:FormHeading label="Gestión de Datos"/>
<mx:FormItem label="Nombre" required="true">
<mx:TextInput id="txtNombre" maxChars="25" restrict="a-zñ A-ZÑ." width="250"/>
</mx:FormItem>
<mx:FormItem label="Apellido">
<mx:TextInput id="txtApellido" maxChars="25" restrict="a-zñ A-ZÑ." width="250"/>
</mx:FormItem>
<mx:FormItem label="Correo Electrónico" required="true">
<mx:TextInput id="txtEMail" maxChars="35" restrict="a-zñA-ZÑ0-9 @,._-" width="250"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="txtMensaje" fontSize="13" fontWeight="bold"/>
<mx:ControlBar>
<mx:Button id="btnCapturar" label="Capturar"/>
<mx:Button id="btnModificar" label="Modificar"/>
<mx:Button id="btnLimpiar" label="Limpiar"/>
</mx:ControlBar>
</mx:VBox>
</mx:Application>
Con la interfaz hasta este punto estamos excelentes, pero nos falta por implementar el procesamiento de datos y esto lo realizaremos desde el código ActionScript 3.0. Para ello puedes revisar en el siguiente vinculo.
Hola, espero te haya gustado y te sea util la información que hayas encontrado, esperamos que sigas aprendiendo y te invito a que revises todo el blog. Mientras agilizare el proceso de edición de información dentro del blog para que puedas encontrar diversos temas referentes a Flex Builder 3 y ActionScript 3.0.
Apoya al proyecto rias4u ingresando aquí!!! =D
Escrito por rias4u 
