MaskedTextInput, nuevo componente de máscara en Apache Flex 4.12

Una de las novedades que trae consigo la inminente salida de Apache Flex SDK 4.12 es un nuevo componente de máscara en el que he estado trabajando últimamente debido a una necesidad en un proyecto real. El componente al que me refiero es el MaskedTextInput, y está creado dentro de la arquitectura spark.

Este es uno de esos componentes que seguramente muchos de vosotros habéis necesitado en algún momento y que por las razones que sean nunca hemos tenido disponible dentro del SDK. Históricamente hemos tenido diversos intentos de la propia Adobe y de terceros de ofrecer un componente de este tipo, pero la realidad es que o se han quedado obsoletos (eran componentes creados en la arquitectura mx antigua) o tenían determinados bugs que los hacían poco usables en la práctica. Hacía falta un componente que tuviese en cuenta la arquitectura spark ya asentada desde Flex 4.0.

Este componente estará disponible en Apache Flex 4.12. Actualmente se puede obtener en la versión 4.12RC1 publicada recientemente

No obstante hay que decir que aunque el componente soporta ya muchas de las necesidades típicas, no deja de ser una versión inicial del mismo y todavía tiene que evolucionar en algunos aspectos que comentaré más adelante.

Objetivo

Para el que no conozca este tipo de componentes, básicamente se trata de un recurso muy usado en las aplicaciones de gestión para introducir determinados datos que tienen un número de caracteres conocido unido a un formato concreto. Un error en la introducción del dato a representar daría como resultado un error en el sistema y por tanto el objetivo de este tipo de control es impedir al usuario la introducción de datos no validos. Por tanto se suelen usar para introducir datos tales como: fechas, teléfonos, cuentas bancarias o matrículas por poner solo unos ejemplos.

Carácteristicas

El nuevo MaskedTextInput, es una extensión del Spark TextInput y comparte el espacio de nombres del resto de componentes spark, pero se encuentra actualmente en la librería experimental, debido a que todavía no se han creado los test de la suite mustella necesarios para catapultarlo a la librería de componentes oficial spark.

El componente ofrece unas reglas de plantilla para definir el tipo de carácter a introducir:

  • # para permitir solo números
  • @ para permitir solo letras
  • ? para permitir tanto números como letras

Además soporta diversos parámetros de configuración:

  • maskText: Define la máscara a aplicar en el campo de texto. Por defecto “”.
  • separators: Los caracteres especificados como separadores y que estarán presentes en la máscara definida anteriormente. Por defecto, se han definido – +/|()[]{}.
  • textMaskPrompt: La máscara a representar visualmente en el campo definida por el usuario y que sustituye la máscara creada por defecto por el propio componente. Por defecto “”
  • placeHolder: Este carácter se mostrará en vez del carácter interno usado como máscara y que define una serie de reglas (#, @ and ?). Por defecto “_”.
  • usePlaceHolder: Si está activado, muestra el placeHolder en vez de los caractéres #, @ or ?. Activado por defecto.
  • hideSeparatorInText: Si está activado, el separador se oculta en el texto pero se muestra en la máscara y viceversa si está desactivado. Activado por defecto.
  • showMaskWhileWrite: Si está activado el resto de la máscara se muestra mientras el usuario escribe a modo de ayuda. Si está desactivado se oculta la máscara tan pronto como el usuario interacciona con el control. Activado por defecto.

Algunos ejemplos de plantillas de mascaras serían:

  • Fecha:##/##/####
  • Teléfono: (###)###.##.##.##
  • Cuenta IBAN: ES##-####-####-##-##########
  • Cuenta Bancaria: ####-####-##-##########

Por último comentar que hay algunas consideraciones en la implementación para ofrecer mejor usabilidad y experiencia de usuario, como es el poder copiar y pegar texto en el componente, la consideración de rangos de selección en el borrado e inserción o el tratamiento especial de la tecla Insert exclusiva de los sistemas Windows.

Ejemplo de uso

A continuación os adjunto un pequeño código de prueba para que podáis ver como se usaría en código:

Demo

El ejemplo de código anterior daría el siguiente resultado por pantalla:


MaskedTextInputDemoImage

Algunas consideraciones

Como comentaba al principio, se trata de la primera versión del componente que trata de ser lo más funcional posible, robusto y libre de bugs (o al menos eso espero), pero es cierto que hay aspectos a mejorar en futuras versiones. Algunos ya comentados en la lista de desarrollo de Apache Flex con el resto de compañeros son:

  • Soporte para aplicaciones móviles y tablets. El componente actual no está preparado para este escenario.
  • Añadir los test a la suite mustella para promocionar el componente a la librería spark
  • Soporte para expresiones regulares, de forma que podamos añadir reglas de validación a la máscara y limitar por ejemplo, en el caso de fechas, los valores a introducir.
  • Un segundo modo de inserción. El modo implementado utiliza el concepto de arrastre de todos los caracteres y va formateando la cadena según las reglas de un autómata. Otra forma muy típica en este tipo de componentes es mantener las posiciones que se han escrito aunque borremos alguna intermedia. Seguramente a futuro se implemente una variable para cambiar entre el modo actual y este otro.

Esperando que os haya sido de utilidad e interés el nuevo componente y este artículo, os invito a todos a que lo probéis en el SDK de Apache Flex 4.12 y comentéis si cumple vuestras expectativas o si veis necesidades que no se cubren en esta primera versión.

Etiquetado en:

6 Comentarios

  1. David Pérez

    Hola Carlos.. pues lo he probado 3 o 4 pruebas semi-básicas y peta por todos lados (no funciona).
    Como salga esto en la 4.12 no le auguro mucho futuro al sdk.

    David

  2. David

    Carlos gracias por el aporte. Yo lo he probado sin ningún problema y me parece una buena solución para el IBAN, tan en boga ahora.
    Si encuentro algún bug te lo haré saber con detalles para buscarle solución.
    Saludos!

  3. Antonio Villar Catena

    Buenas Carlos, estoy utilizando tu componente y estoy tratando de cambiarle el tipo de letra. He intentado poner Arial y NeoSans, pero el componente funciona mal. Solo he conseguido que funcione correctamente con el tipo de letra TypeWritter.

    ¿Me puedes indicar si existe alguna manera de utilizar un tipo de letra diferente a typewritter?.

    Un saludo,Gracias.

  4. Carlos Rovira

    Hola Antonio,

    es una restricción de este tipo de componentes (no solo el mío) ya que requieren fuentes monospace para que todos los caracteres ocupen el mismo espacio y el texto y mascara estén solapados a nivel de carácter. Lo único que puedes hacer es cambiar entre fuentes que sean monospace, pero cualquier otro tipo sane o serif te darán ese problema por que cada chat tiene su anchura propia.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase