domingo, 18 de octubre de 2009

Flex/AIR: Teclado virtual avanzado para pantallas táctiles

Ya está disponible una nueva versión del teclado virtual para pantallas táctiles, con las siguientes mejoras y cambios:

- Posibilidad de elegir entre un texto simple (una línea) o un texto multilínea.
- Se ha evitado los estados para hacer más sencilla la recepción del texto, con tan sólo cerrar la ventana.
- La tecla "Aceptar" se ha sustituito por el "Intro" o retorno de carro.
- Se ha agregado el botón "Anular", con el que se anula por completo el texto actual.
- Se puede interactuar con el teclado tradicional, haciendo editable el display. De esta manera, cuando el texto sea más grande que el display, se hará scrolling, accediendo a la zona de edición (en la versión anterior se cortaba, pues sólo se veía el principio).
- Es posible editar texto para su sustitución por un carácter pulsado en el teclado, o por la tecla borrar.
- Es posible especificar el tamaño máximo del texto (número de caracteres).
- Se ha incluido un status en el que se visualiza cuántos caracteres hay escritos y cuántos caracteres se pueden escribir (tamaño máximo del texto).



En la segunda demo, se ha incluído un fondo para ver cómo el teclado utiliza las transparencias con el fondo. Hay una caja de texto simple y una TextArea. La edición de ambas cajas de texto se realiza, simplemente, haciendo click sobre cada una de ellas.

Cajas de texto simple y multilínea


Teclado virtual avanzado editando multilínea


El código de la demo es el siguiente:


La explicación del código es muy similar a la del ejemplo anterior (mirar http://rafinguer.blogspot.com/2009/10/flexair-teclado-virtual-para-pantallas.html para el detalle). Tan sólo añadir que se pasa al componente, a través de la función "setTextType()", el tipo de texto a visualizar: TYPE_SINGLE (opcional) o TYPE_MULTILINE (en caso de querer un texto multilínea). Asimismo, también se especifica el tamaño máximo a editar para el texto, mediante la función "setMaxChars()".

Otro detalle a considerar es que ahora, al no tener estados o acciones (sólo el cierre de la ventana del teclado), el evento a gestionar es de tipo "Event.CLOSE", cuya función delegada simplemente ha de obtener el texto (función "getText()") sin necesidad de evaluar estados.

Para ver la demo en directo: http://www.tecnillusions.com/demos/DemoKeyboard2/DemoKeyboard2.html

Para descargarse el código fuente y el ejecutable: http://www.tecnillusions.com/demos/DemoKeyboard2/DemoKeyboard2.zip