El teclado es de tipo QWERTY, y tiene tres modos: normal (minúsculas), mayúsculas y símbolos. Incluye también los números.
Otro detalle importante es que posee transparencia con el fondo y posee efectos especiales al utilizar los botones. ¿Qué más se puede pedir?
El aspecto que presenta es el siguiente:
Modo normal
Modo Mayúsculas
Modo Símbolo
El modo de utilizarlo es muy sencillo. El código para el ejemplo es el siguiente:
El ejemplo parte de que el componente está en la misma carpeta que la aplicación. Si no fuese así, habría que hacer el "import" correspondiente.
El ejemplo es muy sencillo: en una caja de texto escribiremos parte de un texto. Cuando se pulse el botón "Teclado" aparecerá el el teclado virtual con el texto escrito. En ese momento se modificará el texto con este teclado. Al darle al botón "Aceptar", el nuevo texto aparecerá en la caja de texto. Si se cerrase la ventana con el botón de cierre, mostrará un texto indicando que el texto no fue aceptado, y no habrá cambio alguno.
El componente KeyboardWindow es un "TitleWindow" o PopUp. Hay que importar la clase PopUpManager y declarar una variable de este tipo KeyboardWindow:
import mx.managers.PopUpManager;
import mx.controls.Alert;
private var wKeyboard:KeyboardWindow;
Cuando el usuario haga click sobre el botón "Aceptar" se ejecutará la función "showKeyboard()":
private function showKeyboard():void {
wKeyboard = KeyboardWindow(PopUpManager.createPopUp(
this, KeyboardWindow, true));
wKeyboard.addEventListener(Event.REMOVED, checkText);
PopUpManager.centerPopUp(wKeyboard);
wKeyboard.setText(myText.text);
}
La primera sentencia crea la ventana emergente (PopUp), indicando cual es el contenedor padre (this o la propia aplicación), así como de qué tipo es la ventana hija (KeyboardWindow).
La segunda sentencia agrega el evento Event.REMOVED que permite escuchar cuándo la ventana emergente se cierra, enviando la ejecución del código a la función checkText.
La tercer sentencia se encarga de centrar la ventana emergente dentro del contenedor (en nuestro caso, la aplicación).
La cuarta sentencia le pasa al teclado virtual el texto que tenemos en la caja de texto, para su gestión.
Por último, queda la función checkText(), cuyo código es el siguiente:
private function checkText(e:Event):void {
if (wKeyboard.action==wKeyboard.ACTION_OK)
myText.text = wKeyboard.getText();
else if (wKeyboard.action==wKeyboard.ACTION_CANCEL)
Alert.show("Texto no aceptado");
}
El componente KeyboardWindow tiene una variable que contiene el estado o acción realizada antes de cerrar la ventana. Si se hizo click sobre el botón "Aceptar", el estado será ACTION_OK. Si se hizo click sobre el botón de cierre de la ventana, la acción o estado será ACTION_CANCEL. En el primer caso, se recogerá el texto gestionado por el teclado virtual mediante el método getText(), y se colocará en la caja de texto principal. En el segundo caso, se mostrará una alerta indicando que el texto no fue aceptado.
El aspecto final de este ejemplo es el siguiente:
Para ejecutar el ejemplo en directo:
http://www.tecnillusions.com/demos/DemoKeyboard/DemoKeyboard.html
Para descargar el componente y el código fuente:
http://www.tecnillusions.com/demos/DemoKeyboard/DemoKeyboard.zip
