Normalerweise wird die virtuelle Tastatur nur geöffnet, wenn der Benutzer auf ein TextField-Objekt tippt. Sie können eine Instanz der InteractiveObject-Klasse so konfigurieren, dass die virtuelle Tastatur geöffnet wird, wenn die Instanz den Fokus erhält.
Um eine InteractiveObject-Instanz so zu konfigurieren, dass sie die Softwaretastatur öffnet, setzen Sie ihre
needsSoftKeyboard
-Eigenschaft auf
true
. Die Softwaretastatur wird immer automatisch geöffnet, wenn das Objekt der focus-Eigenschaft der Bühne zugewiesen wird. Sie können die Tastatur auch einblenden, indem Sie die
requestSoftKeyboard()
-Methode der InteractiveObject-Instanz aufrufen.
Das folgende Beispiel zeigt, wie Sie eine InteractiveObject-Instanz als Texteingabefeld programmieren. Die im Beispiel gezeigte TextInput-Klasse stellt die
needsSoftKeyboard
-Eigenschaft so ein, dass die Tastatur bei Bedarf eingeblendet wird. Das Objekt wartet dann auf
keyDown
-Ereignisse und fügt das eingegebene Zeichen in das Feld ein.
Im Beispiel wird die Flash Text Engine verwendet, um eingegebenen Text anzufügen und anzuzeigen. Außerdem werden einige wichtige Ereignisse verarbeitet. Der Einfachheit halber ist im Beispiel kein Textfeld mit vollem Funktionsumfang implementiert.
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();
}
}
}
Die folgende Hauptanwendungsklasse zeigt die Verwendung der TextInput-Klasse. Sie veranschaulicht auch, wie das Anwendungslayout verwaltet wird, wenn die Tastatur eingeblendet wird oder wenn die Ausrichtung des Geräts sich ändert. Die Hauptklasse erstellt ein TextInput-Objekt und stellt seine Begrenzungen so ein, dass das Objekt die Bühne ausfüllt. Die Klasse passt die Größe des TextInput-Objekts an, wenn die Softwaretastatur eingeblendet wird oder wenn die Größe der Bühne sich ändert. Die Klasse wartet auf Ereignisse zur Softwaretastatur vom TextInput-Objekt und auf resize-Ereignisse von der Bühne. Unabhängig von der Ursache des Ereignisses bestimmt die Anwendung den sichtbaren Bereich der Bühne und passt das Eingabesteuerelement so an, dass es diesen Bereich ausfüllt. In einer echten Anwendung wäre ein komplexerer Layoutalgorithmus erforderlich.
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;
}
}
}
Hinweis:
Die Bühne gibt nur resize-Ereignisse als Reaktion auf Ausrichtungsänderungen aus, wenn die
scaleMode
-Eigenschaft auf
noScale
gesetzt ist. In anderen Modi werden die Abmessungen der Bühne nicht geändert, sondern der Inhalt wird entsprechend skaliert.
