Normalmente, el teclado virtual solo se abre cuando se toca un objeto TextField. Puede configurar una instancia de la clase InteractiveObject para abrir el teclado virtual cuando se seleccione.
Para configurar una instancia de InteractiveObject y abrir el teclado virtual defina su propiedad
needsSoftKeyboard
como
true
. Donde el objeto esté asignado a la propiedad focus del escenario, se abrirá automáticamente el teclado virtual. Además, es posible mostrar y ocultar el teclado llamando al método
requestSoftKeyboard()
de InteractiveObject.
El siguiente ejemplo muestra cómo programar un objeto InteractiveObject para que actúe como campo de entrada de texto. La clase TextInput mostrada en el ejemplo define la propiedad
needsSoftKeyboard
para que el teclado aparezca cuando sea necesario. Seguidamente, el objeto detecta eventos
keyDown
e inserta el carácter escrito en el campo.
El ejemplo utiliza el motor de texto de Flash para agregar y visualizar cualquier texto introducido y controla los eventos importantes. Por motivos de simplicidad, el ejemplo no implementa un campo de texto con todas sus funciones.
package {
import flash.geom.Rectangle;
import flash.display.Sprite;
import flash.text.engine.TextElement;
import flash.text.engine.TextBlock;
import flash.events.MouseEvent;
import flash.events.FocusEvent;
import flash.events.KeyboardEvent;
import flash.text.engine.TextLine;
import flash.text.engine.ElementFormat;
import flash.events.Event;
public class TextInput extends Sprite
{
public var text:String = " ";
public var textSize:Number = 24;
public var textColor:uint = 0x000000;
private var _bounds:Rectangle = new Rectangle( 0, 0, 100, textSize );
private var textElement: TextElement;
private var textBlock:TextBlock = new TextBlock();
public function TextInput( text:String = "" )
{
this.text = text;
this.scrollRect = _bounds;
this.focusRect= false;
//Enable keyboard support
this.needsSoftKeyboard = true;
this.addEventListener(MouseEvent.MOUSE_DOWN, onSelect);
this.addEventListener(FocusEvent.FOCUS_IN, onFocusIn);
this.addEventListener(FocusEvent.FOCUS_OUT, onFocusOut);
//Setup text engine
textElement = new TextElement( text, new ElementFormat( null, textSize, textColor ) );
textBlock.content = textElement;
var firstLine:TextLine = textBlock.createTextLine( null, _bounds.width - 8 );
firstLine.x = 4;
firstLine.y = 4 + firstLine.totalHeight;
this.addChild( firstLine );
}
private function onSelect( event:MouseEvent ):void
{
stage.focus = this;
}
private function onFocusIn( event:FocusEvent ):void
{
this.addEventListener( KeyboardEvent.KEY_DOWN, onKey );
}
private function onFocusOut( event:FocusEvent ):void
{
this.removeEventListener( KeyboardEvent.KEY_UP, onKey );
}
private function onKey( event:KeyboardEvent ):void
{
textElement.replaceText( textElement.text.length, textElement.text.length, String.fromCharCode( event.charCode ) );
updateText();
}
public function set bounds( newBounds:Rectangle ):void
{
_bounds = newBounds.clone();
drawBackground();
updateText();
this.scrollRect = _bounds;
//force update to focus rect, if needed
if( this.stage!= null && this.focusRect && this.stage.focus == this )
this.stage.focus = this;
}
private function updateText():void
{
//clear text lines
while( this.numChildren > 0 ) this.removeChildAt( 0 );
//and recreate them
var textLine:TextLine = textBlock.createTextLine( null, _bounds.width - 8);
while ( textLine)
{
textLine.x = 4;
if( textLine.previousLine != null )
{
textLine.y = textLine.previousLine.y +
textLine.previousLine.totalHeight + 2;
}
else
{
textLine.y = 4 + textLine.totalHeight;
}
this.addChild(textLine);
textLine = textBlock.createTextLine(textLine, _bounds.width - 8 );
}
}
private function drawBackground():void
{
//draw background and border for the field
this.graphics.clear();
this.graphics.beginFill( 0xededed );
this.graphics.lineStyle( 1, 0x000000 );
this.graphics.drawRect( _bounds.x + 2, _bounds.y + 2, _bounds.width - 4, _bounds.height - 4);
this.graphics.endFill();
}
}
}
La siguiente clase de aplicación principal muestra cómo usar la clase TextInput y gestiona el diseño de la aplicación cuando el teclado aparece o cambia la orientación del dispositivo. La clase principal crea un objeto TextInput y define sus límites para que llene todo el escenario. La clase ajusta el tamaño del objeto TextInput si aparece el teclado o el escenario cambia de tamaño. La clase detecta eventos del teclado virtual desde el objeto TextInput y cambia de tamaño los eventos del escenario. Independientemente de la causa del evento, la aplicación determina el área visible del escenario y cambia de tamaño el control de entrada para llenarla. Naturalmente, en una aplicación real sería necesario usar un algoritmo de diseño mucho más sofisticado.
package {
import flash.display.MovieClip;
import flash.events.SoftKeyboardEvent;
import flash.geom.Rectangle;
import flash.events.Event;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
public class CustomTextField extends MovieClip {
private var customField:TextInput = new TextInput("Input text: ");
public function CustomTextField() {
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
this.addChild( customField );
customField.bounds = new Rectangle( 0, 0, this.stage.stageWidth, this.stage.stageHeight );
//track soft keyboard and stage resize events
customField.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, onDisplayAreaChange );
customField.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, onDisplayAreaChange );
this.stage.addEventListener( Event.RESIZE, onDisplayAreaChange );
}
private function onDisplayAreaChange( event:Event ):void
{
//Fill the stage if possible, but avoid the area covered by a keyboard
var desiredBounds = new Rectangle( 0, 0, this.stage.stageWidth, this.stage.stageHeight );
if( this.stage.stageHeight - this.stage.softKeyboardRect.height < desiredBounds.height )
desiredBounds.height = this.stage.stageHeight - this.stage.softKeyboardRect.height;
customField.bounds = desiredBounds;
}
}
}
Nota:
el escenario solo distribuye eventos de cambio de tamaño como respuesta a un cambio de orientación si la propiedad
scaleMode
se establece como
noScale
. En otros modos, las dimensiones del escenario no cambian; en su lugar, se escala el contenido para compensar.
