Virtueel toetsenbord ondersteunen voor interactieve objecten

Normaliter wordt het virtuele toetsenbord alleen weergegeven wanneer een TextField-object wordt aangeraakt. U kunt een instantie van de InteractiveObject-klasse configureren, zodat het virtuele toetsenbord wordt geopend als het object de focus krijgt.

Stel de eigenschap needsSoftKeyboard van een InteractiveObject-instantie in op true om de instantie zodanig te configureren dat het elektronische toetsenbord wordt geopend. Wanneer het object wordt toegewezen aan de focuseigenschap van het werkgebied, wordt het elektronische toetsenbord automatisch geopend. Bovendien kunt u het toetsenbord weergeven door de methode requestSoftKeyboard() van het InteractiveObject aan te roepen.

Het volgende voorbeeld toont hoe u een InteractiveObject zodanig kunt programmeren dat het als een veld voor tekstinvoer fungeert. De klasse TextInput uit het voorbeeld stelt de eigenschap needsSoftKeyboard zodanig in dat het toetsenbord wordt weergegeven wanneer dat nodig is. Het object luistert vervolgens naar keyDown -gebeurtenissen en voegt het getypte teken in in het veld.

Het voorbeeld maakt gebruik van de Flash-tekstengine om getypte tekst toe te voegen en weer te geven en verwerkt enkele belangrijke gebeurtenissen. Om het eenvoudig te houden, implementeert het voorbeeld geen tekstveld met alle mogelijke functies.

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(); 
        } 
    } 
}

De volgende hoofdtoepassingsklasse toont hoe u de klasse TextInput kunt gebruiken en de toepassingslay-out kunt beheren wanneer het toetsenbord wordt weergegeven of de oriëntatie van het apparaat wordt gewijzigd. De hoofdklasse creëert een TextInput-object en stelt de grenzen van het object in om het werkgebied te vullen. De klasse past de grootte van het TextInput-object aan wanneer het virtuele toetsenbord verschijnt of wanneer de grootte van het werkgebied verandert. De klasse luistert naar elektronische-toetsenbordgebeurtenissen van het TextInput-object en naar vergroot- of verkleingebeurtenissen van het werkgebied. Ongeacht de oorzaak van de gebeurtenis bepaalt de toepassing het zichtbare gedeelte van het werkgebied en past het de grootte van het tekstinvoergebied aan het werkgebied aan. In een echte toepassing hebt u natuurlijk een meer geavanceerd lay-outalgoritme nodig.

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; 
        } 
    } 
}

De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.