an euphonious keeps you smart

7 noviembre, 2010

an euphonious keeps you smart

an euphonious keeps you smart

 


TabNavigator y ModuleLoader

26 agosto, 2010

Bien, este es un tema un poco delicado puesto que si no desarrollamos el ModuleLoader este nos podrá generar un poco de dolor de cabeza y bien nos puede incluir una noche de desvelo. Asi que empecemos por comentar los puntos vitales al momento de trabajar con módulos.

Al momento de utilizar un Module tendremos que utilizar un método, un propiedad y otro método… si así como se lee… un método, una propiedad y otro método, ¿Por qué? cuando se carga un Module dentro de un ModuleLoader este consume memoria entonces primero haremos la solicitud para que se elimine de memoria el Módulo cargado, luego indicamos la url donde está ubicado el nuevo módulo a cargar y por último lo cargamos, si llegásemos a cargar otro módulo entonces utilizaremos esta metodología.

Adicionalmente al momento de trabajar con Módulos nuestro querido Flash Player genera conflicto o simplemente no funcionan de la forma adecuada con algunos contenedores y clases –un ejemplo, los Acordeones solo funcionan una vez y luego se quedan pegados en pantalla, o las PopUp de la clase Alert no emergen en pantalla–, entre los contenedores que generan algún tipo de falla están TabNavigator, Accordion, Alert, entre otros. Por lo tanto tendrás que instanciar algunos objetos del paquete managers, estos objetos los tienes que declarar dentro del archivo principal mxml o as.

En esta prácticEstructura de Archivosa utilizaremos tres archivos, el mxml principal y dos módulos que estarán dentro de una carpeta llamada modulos –su extensión también terminan con mxml pero se diferencia que el icono de los módulos llevan una franja celeste–.

La estructura del código MXML del TabNavigator es la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

   <mx:TabNavigator id="tabNav" width="75%" height="80%" x="150" y="50">

      <mx:ModuleLoader id="primeraVinieta" label="Primera Viñeta" horizontalAlign="center"/>

      <mx:ModuleLoader id="segundaVinieta" label="Segunda Viñeta" horizontalAlign="center"/>

   </mx:TabNavigator>

</mx:Application>

La creación de un módulo es sencillo, dentro del IDE de Flex Builder ingresamos a File > New > MXML Module, luego seleccionamos la carpeta donde estará el módulo. Veamos el código del primer módulo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="80%" height="70%"
   horizontalAlign="center">

   <mx:Accordion label="Herramientas de Trabajo" height="150" width="200">
      <mx:VBox label="Politicas de Promociones">

      </mx:VBox>
      <mx:VBox label="Margenes de Maniobra">

      </mx:VBox>
      <mx:VBox label="Aplicaciones Corporativas">

      </mx:VBox>
   </mx:Accordion>

</mx:Module>

La estructura del segundo módulo es la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="80%" height="70%"
   horizontalAlign="center">

   <mx:Accordion label="Manuales" height="150" width="200">
      <mx:VBox label="Manuales de Procedimientos">

      </mx:VBox>
      <mx:VBox label="Manuales de Ingreso">

      </mx:VBox>
      <mx:VBox label="Manuales de Terminales">

      </mx:VBox>
   </mx:Accordion>

</mx:Module>

Perfecto, con esto ya tenemos bastante tela para cortar… dentro del archivo mxml principal declararemos una etiqueta Script y dentro de ella declararemos una función llamada cambioPestania y esta se ejecutará cada vez que el usuario haga clic en algunas de las pestañas del TabNavigator y según sea el valor del selectedIndex así se mandara a llamar el módulo –esta etiqueta la podemos colocar por debajo de la etiqueta Application–, veamos el código:

<mx:Script>
   <![CDATA[

      private function cambioPestania(e:Event):void {
         var almacenaIndex:String = e.currentTarget.selectedIndex;
         switch (almacenaIndex) {
            case "0":
                     segundaVinieta.unloadModule();
                     primeraVinieta.url = "modulos/modulo1.swf";
                     primeraVinieta.loadModule();
                     break;
            case "1":
                     primeraVinieta.unloadModule();
                     segundaVinieta.url = "modulos/modulo2.swf";
                     segundaVinieta.loadModule();
                     break;
         }
      }

   ]]>
</mx:Script>

Las pestañas de un TabNavigator están señalizadas con un índice empezando desde cero y según sea el número de pestaña este valor puede ir incrementando, así que nos aprovecharemos de esta virtud y con e del tipo Event capturaremos el valor de la pestaña con la propiedad selectedIndex y la almacenamos dentro de almacenaIndex del tipo String. Luego con un condicional switch determinamos que módulo cargaremos.

Como mencionamos al principio primero tenemos que utilizar un método para descargar el Módulo cargado en memoria y para ello utilizaremos unloadModule, luego con la propiedad url indicamos el directorio y el archivo a cargar; por ultimo con el método loadModule cargamos el nuevo módulo.

Consideraciones

Es de tener cuidado sobre cual módulo será quitado de la memoria, si observas en el case 0, descargamos el segundo módulo y cargamos el primero, dentro del case 1 quitamos de memoria el primer módulo y procedemos a cargar el segundo. Si no hiciéramos esto la aplicación consumiría memoria innecesaria de la PC.

Si realizas las pruebas haciendo un Debug y navegas por las pestañas veras a continuación que la consola de Flex le imprimirá lo siguiente:

Consola de Flex Builder

Una de las ventajas sobre desarrollar con módulos es que la aplicación solo cargará aquellos módulos que solo requiera utilizar el usuario y no toda la aplicación.

Esta vez cambiaremos la metodología y no presentaremos el código completo tal como lo hemos hecho en los Post anteriores, sino que proporcionaremos directamente el código para que lo puedas descargar y exportar a tu IDE. Descárgalo aquí!!!!

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


Descarga el Proyecto rias4u

19 agosto, 2010

Desarrollamos un proyecto en Flex y su resultado final lo publicamos en YouTube, puedes verlo aquì:

La estructura del código que utilizamos dentro del proyecto es el que estamos posteando aquí, asi que lo puedes descargar en el siguiente enlace que te conecta a megaupload. Disfrutalo y cualquier consulta no dudes en hacerla.

Exitos!!!


Actualización de los ComboBox

16 agosto, 2010

Para este ejercicio utilizaremos un XML como fuente de datos externa y con ella poblaremos la información de dos Combo Box utilizando el HTTPService. Pero primero veamos el XML que utilizaremos.

<?xml version="1.0" encoding="utf-8"?>
<carrera>
   <curso periodo="Ciclo I">
      <materia>Estadística I</materia>
      <materia>Filosofía de la Calidad</materia>
      <materia>Física I</materia>
      <materia>Matemática I</materia>
      <materia>Psicología Social</materia>
   </curso>
   <curso periodo="Ciclo II">
      <materia>Estadística II</materia>
      <materia>Física II</materia>
      <materia>Matemática II</materia>
      <materia>Programación I</materia>
      <materia>Tecnología de la Información I</materia>
   </curso>
   <curso periodo="Ciclo III">
      <materia>Análisis de Sistemas I</materia>
      <materia>Base de Datos I</materia>
      <materia>Programación II</materia>
      <materia>Sistemas Operativos</materia>
      <materia>Tecnología de la Información II</materia>
   </curso>
   <curso periodo="Ciclo IV">
      <materia>Análisis de Sistemas II</materia>
      <materia>Base de Datos II</materia>
      <materia>Programación III</materia>
      <materia>Diseño Web</materia>
      <materia>Tecnología de la Información III</materia>
   </curso>
</carrera>

Primero declararemos la etiqueta HTTPService dentro del MXML, como necesitamos identificar esta etiqueta entonces utilizaremos la propiedad id, a la vez le especificaremos el nombre del archivo de XML e indicaremos el tipo de formato estándar e4x.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

   <mx:HTTPService id="cargaXML" url="recursos/materias.xml" resultFormat="e4x"/>

Dentro de la etiqueta Application mandamos a llamar un CreationComplete para solicitar los datos del XML utilizando el método send de HTTPService.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="cargaXML.send()">

Luego declaramos el primer ComboBox, este será nombrado como cboCiclo y el dataProvider poblara la información que entregue el HTTPService cargaXML. Recuerda que la propiedad lastResult solo puede ser utilizada cuando usamos un HTTPService y con la ayuda del formato e4x señalamos la etiqueta que vamos a utilizar –en este caso la etiqueta curso–.

<mx:ComboBox id="cboCiclo" x="10" y="10" dataProvider="{cargaXML.lastResult.curso}" labelField="@periodo" change="changeCboMateria(event)" prompt="Elija un periodo..."/>

Con el  método labelField extraemos el valor de la propiedad periodo del XML y a la vez usamos el evento Change que se activará al momento que el usuario hace clic sobre algún elemento del ComboBox. Para efectos de estética utilizamos la propiedad prompt para que el ComboBox nos imprima por primera vez la leyenda “Elija un periodo…”.

Necesitamos incluir el código ActionScript para que nos de la funcionalidad de actualización y para ello utilizaremos la etiqueta Script que puede ir por debajo de la etiqueta de apertura Application. Dentro de ella vamos a declarar una variable Bindable actualizaCboMateria del tipo XMLList, y declaramos la función changeCboMateria. La función a ejecutarse asigna a la variable actualizaCboMateria el nuevo contenido que poblara al segundo ComboBox cboMateria, esto a través de la propiedad selectedItem. Este contenido asignado será utilizado dentro del dataProvider del segundo ComboBox.

<mx:Script>
   <![CDATA[
      [Bindable]
      private var actualizaCboMateria:XMLList;

      private function changeCboMateria(e:Event):void {
         cboMateria.visible = true;
         cboMateria.includeInLayout = true;
         actualizaCboMateria = cboCiclo.selectedItem.materia;
      }
   ]]>
</mx:Script>

En el código anterior, las propiedades visible e includeInLayout es para hacer la solicitud de imprimir en pantalla el ComboBox cboMateria, esto es para darle una mejor interactividad al ejercicio. Veamos el segundo ComboBox:

<pre><mx:ComboBox id="cboMateria" x="10" y="40" dataProvider="{actualizaCboMateria}" visible="false" includeInLayout="false"/></pre>

Con esto, al seleccionarse un elemento del primer ComboBox este actualizará de forma automática el segundo ComboBox. Recuerde que el Documento XML tiene que estar bien formado. Veamos como quedo el código final:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="cargaXML.send()">

   <mx:Script>
      <![CDATA[
         [Bindable]
         private var actualizaCboMateria:XMLList;

         private function changeCboMateria(e:Event):void {
            cboMateria.visible = true;
            cboMateria.includeInLayout = true;
            actualizaCboMateria = cboCiclo.selectedItem.materia;
         }
      ]]>
   </mx:Script>

   <mx:HTTPService id="cargaXML" url="recursos/materias.xml" resultFormat="e4x"/>

   <mx:ComboBox id="cboCiclo" x="10" y="10" dataProvider="{cargaXML.lastResult.curso}" labelField="@periodo" change="changeCboMateria(event)" prompt="Elija un periodo..."/>

   <mx:ComboBox id="cboMateria" x="10" y="40" dataProvider="{actualizaCboMateria}" visible="false" includeInLayout="false"/>

</mx:Application>

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



Insertando datos con ActionScript 3.0

12 agosto, 2010

Prefacio

Para entender el funcionamiento del código enlazaremos esta función con la interfaz que creamos en el post de Mi Primer Formulario, y a la vez este código lo puedes implementar con la Clase DatosLoader.as que hemos desarrollado. Recuerda todo lo que estamos desarrollando en este post lo puedes integrar con los demas post que estamos desarrollando, todo con el objetivo para poder facilitarte la comprensión.

Necesitamos crear algun archivo ActionScript para que sea conectado a la interfaz de usuario, este archivo lo llamaremos interfaceCode.as y lo ubicaremos dentro de la misma carpeta donde este el archivo .mxml de la aplicaciòn principal. Un ejemplo de como quedaria:

Ejemplo de Estructura de Archivos

Ejemplo de Estructura de Archivos

Para poder crear el archivo interfaceCode.as tendremos que ingresar dentro del IDE de Flex Builder 3 a File > New > ActionScript File y una vez nos salga la ventana de dialogo, solamente tendremos que seleccionar la ubicación donde queremos guardar el archivo y le asignamos el nombre.

Ahora empecemos con el còdigo, primero importaremos las bibliotecas DatosLoader para instanciar un objeto y así enviar la solicitud ser procesada -para una mejor comprensión lee aquí para entender la clase DatosLoader-, las clases MouseEvent son para que responda bien la aplicación cuando hagamos el llamado a la función al momento que el usuario haga clic en el boton dentro de la interfaz y la clase URLVariables la utilizaremos para empaquetar los datos capturados, el código es el siguiente:

// ActionScript file
import com.gestiondatos.DatosLoader;

import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLVariables;

import mx.events.FlexEvent;

Seguido declaremos la variable directorio que almacenará la ubicación del directorio donde estarán guardados los Script PHP que utilizaremos -la estructura del los Script PHP lo puedes revisar aquí, de ahi puedes adaptar ese código PHP a este proyecto-. y un objeto llamado consultaLoader de la clase DatosLoader. Támbien creamos la variable datosXMLList que cargará el XML leido por la clase DatosLoader -este contendrá las etiquetas hijos que se encuentren dentro de channel, para la saber como es la estructura de un Documento XML puedes revisar aquí-.

// recuerda que aquí tienes que reemplazar la dirección del servidor que tu utilizas.
private var directorio:String = "http://localhost:8088/GestionDatos/src/ScriptPHP/";

private var datosXMLList:XMLList;

private var consultaLoader:DatosLoader = new DatosLoader();

La función encargada de realizar el ingreso de nuevos registros a la base de datos tendrá el nombre de capturaDatos; dentro de la función crearemos en primera instancia el objeto que llevará empaquetado como atributos todos los datos del formulario, tendrá como nombre capVrs del tipo URLVariables. Luego se asigna al objeto consultaLoader un detector de eventos con los parámetros Event.COMPLETE y la función resCapturaDatos. Por último utilizamos el método gestion de la clase DatosLoader y pasamos como parámetros la variable directorio concatenando el nombre del archivo PHP y el objeto capVrs.

private function capturaDatos(e:MouseEvent):void {
   var capVrs:URLVariables = new URLVariables();
   capVrs.nombre = txtNombre.text;
   capVrs.apellido = txtApellido.text;
   capVrs.email = txtEMail.text;
   consultaLoader.addEventListener(Event.COMPLETE, resCapturaDatos);
   consultaLoader.gestion(directorio + "capturaInfo.php", capVrs);
}

Dentro de la función resCapturaDatos estaremos cargando las respuestas que se recibirán de la etiqueta message del Script PHP generado como Documento XML, con esto lo mandaremos a imprimir en la etiqueta text txtMensaje. Luego limpiaremos el formulario con una función llamada limpiaForm -la desarrollaremos más adelante- y por último removemos el evento -esto último es para eliminar consumo de memoria innecesaria y respuestas no deseadas ante eventos-.

private function resCapturaDatos(e:Event):void {
   datosXMLList = consultaLoader.obtenerDatosXML();
   txtMensaje.text = datosXMLList.message;
   limpiaForm();
   consultaLoader.removeEventListener(Event.COMPLETE, resCapturaDatos);
}

Extraemos el XML devuelto con el método obtenerDatosXML de la clase DatosLoader y luego le asignamos el valor de la etiqueta message a txtMensaje. Ahora veamos la función limpiaForm:

private function limpiaForm():void {
   txtNombre.text = "";
   txtApellido.text = "";
   txtEMail.text = "";
}

La función es sencilla, solo solicitamos borrar el contenido de las etiquetas pasando el valor “” con la propiedad text. Ahora necesitamos implementar esta función al botón btnCapturar, entonces nos pasaremos al archivo de la aplicación principal con extensión .mxml y dentro haremos referencia al archivo interfaceCode.as haciendo uso de la etiqueta Script que irá por debajo de la etiqueta de apertura Application -este archivo es el que creamos en este post-. Veamos el código:

<?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]" width="480" height="280">

   <mx:Script source="interfaceCode.as"/>

Después con el evento click asignamos la función capturaDatos al botòn btnCapturar que esta ubicado dentro de la etiqueta ControlBar, así:

<mx:ControlBar>
   <mx:Button id="btnCapturar" label="Capturar" click="capturaDatos(event)"/>
   <mx:Button id="btnModificar" label="Modificar"/>
   <mx:Button id="btnLimpiar" label="Limpiar"/>
</mx:ControlBar>

Si unes todo lo visto en este post te estaria funcionando perfectamente -claro si haz desarrollado previamente la base de datos-. Practicamente es la misma secuencia de código la que estarías utilizando si deseases modificar datos, el único código a modificar seria cambiar el nombre de la función de capturaDatos a modificaDatos -o cualquier otro-, y cambiar el nombre del archivo PHP a utilizar -recuerda que dentro del Script PHP tendrás que adaptarlo para que te funcione como un UPDATE dentro de la base de datos-.

Veamos como ha quedado el código completo:

// ActionScript file
import com.gestiondatos.DatosLoader;

import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLVariables;

import mx.events.FlexEvent;

// recuerda que aquí tienes que reemplazar la dirección delservidor que tu utilizas.
private var directorio:String = "http://localhost:8088/GestionDatos/src/ScriptPHP/";

private var datosXMLList:XMLList;

private var consultaLoader:DatosLoader = new DatosLoader();

private function capturaDatos(e:MouseEvent):void {
   var capVrs:URLVariables = new URLVariables();
   capVrs.nombre = txtNombre.text;
   capVrs.apellido = txtApellido.text;
   capVrs.email = txtEMail.text;
   consultaLoader.addEventListener(Event.COMPLETE, resCapturaDatos);
   consultaLoader.gestion(directorio + "gestionPorDUI.php", capVrs);
}

private function resCapturaDatos(e:Event):void {
   datosXMLList = consultaLoader.obtenerDatosXML();
   txtMensaje.text = datosXMLList.message;
   limpiaForm();
   consultaLoader.removeEventListener(Event.COMPLETE, resCapturaDatos);
}

private function limpiaForm():void {
   txtNombre.text = "";
   txtApellido.text = "";
   txtEMail.text = "";
}

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. Estamos trabajando para editar la 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



Sigamos adelante!!!

12 agosto, 2010

Ayudanos ampliar y mejorar el sitio!!!!

El objetivo de rias4u es proporcionar y facilitar la información sobre el desarrollo de aplicación y sitios RIAS, damos nuestro mayor esfuerzo para que te mantengas actualizado con las nuevas tecnologias de desarrollo.

A veces en los libros no se encuentra la solución pero en muchas ocasiones otras personas ya pasaron por donde tu estas y es en ellos quienes puedes buscar consejo de desarrollo, ya sea un amigo, un conocido de un amigo, foros, páginas de internet que hablen sobre la tecnología en que estés desarrollando. Si no encuentras alguna solución sobre un obstáculo como alguna clase de ActionScript 3.0 que no cumpla con tus requerimientos, no te quedes atascado en el lío y busca alternativas para la solución! Mira a los lados y documéntate bien antes de desarrollar!!!

Mis mejores deseos.-

Colabora!!!


Mi primer formulario

8 agosto, 2010

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

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