Crear controles personalizados en Flex

Una de las ventajas que tiene el desarrollo con el framework de Flex, es la capacidad de crear controles personalizados basados en otros controles es decir, crear controles de usuarios con características especiales, que cumplan con ciertos procesos y que nos ahorren trabajo.

..
Para iniciar, vamos a crear un nuevo proyecto de Adobe Flash Builder 4, para este caso lo llamare ControlPersonalizado, en tipo de proyecto seleccionamos proyecto WEB y utilizamos la SDK4 (con Flex 3 también es posible). Una buena práctica en el desarrollo de software, es tener un proyecto de pruebas, donde se creen las rutinas de prueba, los controles personalizados y todo lo que eventualmente pueda llegar a constituir un problema en el desarrollo, bien sea por su complejidad o por los riesgos del ejercicio.

Presionamos el botón “Finish” para cargar la aplicación.

Una de las ventajas del nuevo Flash Builder, es la posibilidad de trabajar paquetes (package), los paquetes son carpetas lógicas que permiten administrar de una manera ordenada nuestros componentes, clases, y recursos de código, etcétera. En el explorador de proyectos, buscamos la carpeta src, presionamos clic derecho, new package, y lo llamamos Componentes (la primera letra de la palabra debe están en mayúscula).

En el paquete, presionamos clic derecho, new, MXML Component.

Ponemos el nombre del Componente (cómo este funcionará como una clase, entonces la primera letra debe ir en mayúscula al igual que la primera letra de cada palabra compuesta). Para este ejercicio, vamos a crear un Campo de texto que tenga restricciones para que solo acepte números, en el campo Base don, seleccionamos la clase Group, cambiamos el tamaño por defecto a 200px por 200px (estos valores van a cambiar), y presionamos Finish.

Ahora, tenemos un nuevo archivo con código independiente de la aplicación, que también cuenta con un entorno de diseño, sin embargo no lo vamos a utilizar. Después de la etiqueta “s:Group” vamos a crear un campo de texto y debe quedar de esta manera:

Descripción: En la etiqueta s:Group, editamos el valor de ancho y alto, y lo ponemos del mismo tamaño de un campo de texto clásico: 132 x 22.

Creamos una etiqueta TextInput, esto crea un campo de texto en el formulario, el campo id, es muy importante, ya que gracias a este id, podemos acceder directamente a la información del campo. Las propiedades X y Y quedan en 0, para que se alineen al borde superior izquierdo del grupo. La propiedad restrict nos permite restringir o permitir valores dentro del campo de texto, en este caso, el campo solo admite valores numéricos, al intentar ingresar letras o caracteres especiales no será posible entrar ese tipo de datos. Finalmente las propiedades de ancho y alto del campo, las dejamos en 100% cada una, esto asegura que sin importar el tamaño final del control, el campo de texto se acoplara a su contenedor.

Guardamos y vamos al archivo del proyecto, es decir a ControlPersonalizado.mxml, estando en la vista de diseño, vamos al panel components y nos podemos dar cuenta que hay un nuevo control en la carpeta Custom:

Ahora solo basta con arrastrar el control y probar el proyecto:

Si intentamos introducir algún carácter que no sean números, no los acepta el campo de texto. La propiedad restrict se puede adicionar a cualquier campo de texto, la ventaja de hacerlo de esta manera es que no es necesario añadir esa línea cada vez que necesitemos hacer un control numérico, solo basta con crear un componente personalizado y utilizarlo las veces que sea necesario.

Finalmente para acceder a la información del campo de texto, es necesario recurrir al id del control en el formulario y al id del campo de texto, de esta manera:

Lo último que hacemos es poner un botón en el formulario, que al presionar click, llame al método mostrarTexto(), este método muestra una alerta con el texto del campo de texto. Lo realmente importante es que para acceder a la información del campo de texto, solo se necesita poner el nombre del control en el formulario (campo1Txt), el nombre del campo de texto en el componente (campoTexto) y la propiedad text de este último.

Este es el ejemplo:

Espero sus comentarios.