Invoking the virtual keyboard programmatically

In most cases, simply giving focus to a text input field will invoke the virtual keyboard. Losing focus will dismiss the virtual keyboard. Perhaps we require our application to do this without user interaction, or immediately when entering a certain application state for convenience.

How to do it...

We configure a Shape to toggle the Android virtual keyboard on and off through a Tap touch event assigned to it.

  1. First, import the following classes into your project: 
    import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.SoftKeyboardEvent;
import flash.events.TouchEvent;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
  2. Declare a Shape alongside a TextField and TextFormat object. These will be used for interaction and visual feedback. 
    private var tapBox:Sprite;
private var tapBoxField:TextField;
private var tapBoxFormat:TextFormat;
  3. Next, construct a method to handle the creation of our Sprite and add it to the DisplayList. Tapping this Sprite will allow us to invoke or hide the virtual keyboard. We will also construct a TextField and associated TextFormat object within the Sprite to allow us to provide stateful messages to the user. 
    protected function setupBox():void {
tapBox = new Sprite();
tapBox.graphics.beginFill(0xFFFFFF, 1);
tapBox.x = stage.stageWidth/2;
tapBox.y = stage.stageHeight/2 - 200;
tapBox.graphics.drawRect(-200,-100,400,160);
tapBox.graphics.endFill();
tapBoxFormat = new TextFormat();
tapBoxFormat.bold = true;
tapBoxFormat.font = "_sans";
tapBoxFormat.size = 42;
tapBoxFormat.align = "center";
tapBoxFormat.color = 0x333333;
tapBoxField = new TextField();
tapBoxField.defaultTextFormat = tapBoxFormat;
tapBoxField.selectable = false;
tapBoxField.mouseEnabled = false;
tapBoxField.multiline = true;
tapBoxField.wordWrap = true;
tapBoxField.width = tapBox.width;
tapBoxField.height = tapBox.height;
tapBoxField.x = -200;
tapBoxField.y = -80;
tapBoxField.text = "Tap to Toggle Virtual Keyboard";
tapBox.addChild(tapBoxField);
addChild(tapBox);
}
  4. Set the specific input mode for the multitouch APIs to support touch input by setting Multitouch.inputMode to the MultitouchInputMode.TOUCH_POINT constant and register an event listener on the DisplayObject, which will be used to trigger the activation and deactivation of the Android virtual keyboard. In this case, a TouchEvent.TOUCH_TAP event. A touch tap is the touch equivalent of a mouse click event. We can also register a number of listeners for a set of virtual keyboard events. In order for a DisplayObject to be able to invoke the virtual keyboard, we will need to set its needsSoftKeyboard property to true. The SoftKeyboardEvent listeners we register here are optional. 
    protected function setupTouchEvents():void {
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
tapBox.needsSoftKeyboard = true;
tapBox.addEventListener(TouchEvent.TOUCH_TAP, touchTap);
tapBox.addEventListener (SoftKeyboardEvent. SOFT_KEYBOARD_ACTIVATING, vkActivating);
tapBox.addEventListener(SoftKeyboardEvent. SOFT_KEYBOARD_ACTIVATE, vkActivate);
tapBox.addEventListener(SoftKeyboardEvent. SOFT_KEYBOARD_DEACTIVATE, vkDeactivate);
}
  5. To make use of the SoftKeyboardEvent listeners defined in the preceding point, we must create a variety of methods to execute once each activity is detected. In this way, we can monitor, interact with, or even prevent certain events from firing by intercepting the virtual keyboard while in the midst of activating, or detecting when the virtual keyboard has completed activation or deactivation completely. 
    protected function vkActivating(e:SoftKeyboardEvent):void {
trace("Virtual Keyboard ACTIVATING");
}
protected function vkActivate(e:SoftKeyboardEvent):void {
trace("Virtual Keyboard ACTIVATED");
}
protected function vkDeactivate(e:SoftKeyboardEvent):void {
trace("Virtual Keyboard DEACTIVATED");
}
  6. To invoke the virtual keyboard, we simply invoke requestSoftKeyboard()on the DisplayObject, whose needsSoftKeyboard property has been set to true. Here, we are checking to see whether needsSoftKeyboard is set to true or not, and toggling this property based upon that. 
    protected function touchTap(e:TouchEvent):void {
if(tapBox.needsSoftKeyboard == true){
tapBox.requestSoftKeyboard();
tapBoxField.text = "Virtual Keyboard is Up";
tapBox.needsSoftKeyboard = false;
}else{
tapBox.needsSoftKeyboard = true;
tapBoxField.text = "Virtual Keyboard is Down";
}
}
  7. To dismiss the virtual keyboard, the user will need to tap upon a DisplayObject, whose needsSoftKeyboard property has been set to false.
  8. The result will appear similar to the following:

How it works...

In order to invoke the Android virtual keyboard through ActionScript, we must set an interactive DisplayObjects.needsSoftKeyboard property to true. This will allow us to register a tap touch listener and invoke requestSoftKeyboard() upon the tap touch event being fired, revealing the virtual keyboard on screen.

Touching any DisplayObject whose needsSoftKeyboard property is set to false (the default state), will dismiss the virtual keyboard. In our preceding example, we switch this property from true to false in order to make the DisplayObject function as a toggle control.

There's more...

While it is not necessary to use the SoftKeyboardEvent class to activate or dismiss the Android virtual keyboard through ActionScript, it is included in the example class as it allows us to respond to such events with an additional set of listener functions.

本周热推：
不可不知的电脑工具软件Premiere Pro 2022短视频剪辑、调色与特效制作实战（全彩微课版）After Effects全套影视特效制作典型实例（培训教材版）iPad Procreate风格绘画之美PS App UI设计从零开始学
上一章目录下一章