Skip to content
April 29, 2013 / Daniel Freeman

MadComponents and the Virtual Keyboard


MadComponent128exA common question that I’ve had from MadComponents developers is how to deal with the virtual keyboard.  Specifically, the problem of input textfields getting obscured under the virtual keyboard.

224497_371108816304092_884574636_n
The approach involves moving the UI up so that the input field is above the top of the virtual keyboard.  But what do you use to trigger this action?  How do you know the dimensions of the keyboard?   And how do you know when to restore the UI back to where it should be?

There are SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, and SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE events dispatched by TextFelds and StageText objects.  You can respond to these to know when to adjust the UI, and when to restore it.  When the virtual keyboard is active, you can query stage.softKeyboardRect object to determine the rectangle area occupied by the virtual keyboard.  Then it’s just a matter of raising the position of the UI, so that the input textfield is moved above this rectangle.

Here’s the code:-

</pre>
package com.powerflasher.SampleApp {

 import com.danielfreeman.madcomponents.*;
 import flash.text.ReturnKeyLabel;
 import flash.text.SoftKeyboardType;
 import flash.text.StageText;
 import flash.geom.Rectangle;
 import flash.events.SoftKeyboardEvent;

 public class InputHelper {

protected static var _stageText:StageText;
 protected static var _input:UIInput;

 public function InputHelper() {
 }

 public static function initialiseStageText(fontSize:int = 20, colour:uint = 0x000000):void {
// var stageTextInitOptions:StageTextInitOptions = new StageTextInitOptions(false);
_stageText = new StageText();
_stageText.fontSize = fontSize;
_stageText.color = colour;
_stageText.stage = UI.uiLayer.stage;
_stageText.visible = false;
_stageText.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, softKeyboardDeactivate);
 }

 public static function setSoftKeyboardListeners(input:UIInput):void {
UIBlueText(input.inputField).addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, softKeyboardActivate);
if (!_stageText) {
UIBlueText(input.inputField).addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, softKeyboardDeactivate);
}
 }

 public static function removeSoftKeyboardListeners(input:UIInput):void {
UIBlueText(input.inputField).removeEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, softKeyboardActivate);
UIBlueText(input.inputField).removeEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, softKeyboardDeactivate);
 }

 protected static function finishStageText():void {
_input.text = _stageText.text;
UIBlueText(_input.inputField).visible = true;
_stageText.visible = false;
_input = null;
 }

 public static function applyStageText(input:UIInput, autoCorrect:Boolean = false, softKeyboardType:String = SoftKeyboardType.DEFAULT, returnKeyLabel:String = ReturnKeyLabel.DEFAULT):void {
if (_input) {
finishStageText();
}
UIBlueText(input.inputField).visible = false;
_stageText.visible = true;
_stageText.text = input.text;
// The following line won't work in the current public release of MadComponents.  But it will work in a later release which has a password getter.
//_stageText.displayAsPassword = UIBlueText(input.inputField).password;
_stageText.autoCorrect = autoCorrect;
_stageText.softKeyboardType = softKeyboardType;
_stageText.returnKeyLabel = returnKeyLabel;
_stageText.viewPort = input.stageRect();
_stageText.assignFocus();
_input = input;
 }

 protected static function softKeyboardActivate(event:SoftKeyboardEvent):void {
var inputField:UIBlueText = UIBlueText(event.target);
var input:UIInput = UIInput(inputField.parent);
var stageRect:Rectangle = input.stageRect();
var difference:Number = UI.uiLayer.stage.softKeyboardRect.y - stageRect.bottom;
if (difference < 0) {
UI.uiLayer.y = difference;
}
if (_stageText) {
applyStageText(input);
}
 }

 protected static function softKeyboardDeactivate(event:SoftKeyboardEvent):void {
UI.uiLayer.y = 0;
if (_stageText) {
finishStageText();
}
 }

 }
}

How to use InputHelper

Suppose you have a MadComponents Form with username and password inputs:

<vertical background=”#222244″>
    <vertical alignH=”centre” alignV=”centre” width=”200″>
        <input id=”username” prompt=”username” alignH=”fill”/>
        <input id=”password” prompt=”password” password=”true” alignH=”fill”/>
        <button id=”login” alignH=”right”>Login</button>
    </vertical>
</vertical>;
 

To utilise the InputHelper class, your AS3 code would look something like this:-

_username = UIInput(UI.findViewById(“username”));
InputHelper.setSoftKeyboardListeners(_username);
 
_password = UIInput(UI.findViewById(“password”));
InputHelper.setSoftKeyboardListeners(_password);

( To remove inputs listeners, for memory management purposes, just call InputHelper.removeSoftKeyboardListeners(_input); )

StageText

The InputHelper also includes a mechanism for utilising StageText.  StageText can take advantage of auto-correction.  Also, you may wish to customise the type of virtual keyboard.  Alphanumeric, Numeric, Email, etc.  ( To access this capability, you might want to modify the helper slightly, and use the optional parameters in the applyStageText class.)  The applyStageText class temporarily replaces your <input> textfield by a StageText field.  (When the user completes their text input – the text is transferred into the <input>, and the StageText becomes invisible.)

To enable this capability, you must first initialise it by calling the initialiseStageText() method.  ( Call it prior to any setSoftKeyBoardListeners() calls )

On one Android test device, I noticed that StageText SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE event wasn’t always being dispatched properly when the soft keyboard disappeared.  (So the UI wasn’t being restored to its usual position).  But just tapping on the UI background tended to sort out the problem.

MadComponents

The popular MadComponents (+ ExtendedMadness) frameworks are about to get a new lease of life.  I’ve recently been commissioned to develop a mobile app (which I can’t talk about yet), but I’m basing it on MadComponents.  As the project will embody a lot of customised UI / UX  design – this is going to result in a lot of improvements to MadComponents, and some great new components too.  Watch this space, and join the Facebook MadComponents Group. 

There’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk 

If you like MadComponents, don’t forget to leave a “star”, or “g + 1″ recommendation on the Google Code site.
Advertisements

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: