Flex 4.5 mobile Resize textarea with animation on soft keyboard activate event?

Question

I'm using Flex 4.5.1 with AIR 2.7 (and Flash Builder 4.5.1) to build an app for the Blackberry Playbook.

The app has a large textarea that needs to be resized when the soft keyboard shows up. I am able to hook into the soft keyboard events and do things there.

Now, I want to resize the textarea to fit the remaining part of the screen when the keyboard shows up. I know the current and destination size and want to use a smooth animation to show the textarea resizing. (I can't already set the height and can see the textarea being correctly resized in the keyboard_activating event - but I want to do it through an animation). I've tried using the Animate class, the spark.effects.Move class and none of them seem to work in this case. They seem to run the animation but the screen does not get refreshed!

I don't want to use the built-in resizeAppForKeyboard property on the ViewNavigatorApplication. I have set to 'none' in the app descriptor so that part of it is fine.

Any ideas / thoughts? Is my approach correct at all? How would one go about resizing the textarea using an animation in the keyboard activating event? My code looks like:

In the main view (onCreationComplete event): (txNote is the textarea in question)

txNote.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, function(e:SoftKeyboardEvent):void {
    toggleEditMode(true);
});

txNote.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, function(e:SoftKeyboardEvent):void {
    toggleEditMode(false);
});

private function toggleEditMode(keyboardActivated:Boolean):void {
    trace("toggle edit: " + editMode + ", kb activating: " + keyboardActivated + ", txNote height = " + txNote.height);

    editMode = keyboardActivated;

    //we handle resize manually, because we want a nice animation happening and we want to resize only the text area - nothing else.
    var y:Number = editMode ? -38 : 0;
    var height:Number = editMode ? 218 : 455;
    txNote.moveAndSize(y, height);
}

The code in txNote.moveAndSize:

public function moveAndSize(newY:Number, newHeight:Number):void {

//parent group uses BasicLayout
//(this.parent as Group).autoLayout = false;
//resizePath.valueFrom = this.height;
//resizePath.valueTo = newHeight;

//movePath.valueFrom = this.y;
//movePath.valueTo = newY;

//resizeEffect.heightFrom = this.height;
//resizeEffect.heightTo = height;

    this.top = newY;
    moveEffect.xFrom = this.x;
    moveEffect.xTo = this.x;

    moveEffect.yFrom = this.y;
    moveEffect.yTo = newY;

    moveEffect.end();
    moveEffect.play([ this ]);

    //this.move(x, newY);
    //animate.play([ this ]);

    //this.height = height;
    //this.y = y;

    //setLayoutBoundsSize(width, height);
    //setLayoutBoundsPosition(x, y);
}

The moveEffect / movePath / animate various things I tried are set up in the txNote constructor as follows:

public class NotesArea extends TextArea {
//      private var animate:Animate;
//      private var movePath:SimpleMotionPath;
//      private var resizePath:SimpleMotionPath;

        private var moveEffect:Move;
//      private var resizeEffect:Resize;

        public function NotesArea() {
            super();

//          animate = new Animate();
//          var paths:Vector.<MotionPath> = new Vector.<MotionPath>();
//          movePath = new SimpleMotionPath("top");
//          resizePath = new SimpleMotionPath("height");
//          paths.push(movePath);
            //paths.push(resizePath);

//          animate.duration = 300;
//          animate.motionPaths = paths;

//          animate.addEventListener(EffectEvent.EFFECT_UPDATE, function(e:EffectEvent):void {
//              trace("y = " + y);
//              invalidateDisplayList();
//          });
//          animate.addEventListener(EffectEvent.EFFECT_END, function(e:EffectEvent):void {
//              trace("EFFECT ended: y = " + y);
//          });

            moveEffect = new Move();
            moveEffect.duration = 250;
            moveEffect.repeatCount = 1;
            moveEffect.addEventListener(EffectEvent.EFFECT_END, function (e:EffectEvent):void {
                //(this.parent as Group).autoLayout = true;
                trace("move effect ran. y = " + y + ", top = " + top);
            });

            //this.setStyle("moveEffect", moveEffect);
//
//          resizeEffect = new Resize();
//          resizeEffect.duration = 250;
//          this.setStyle("resizeEffect", resizeEffect);
        }

}

Answer 1

yourTextField.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_DEACTIVATE, onActivating);
yourTextField.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATING, onActivating); 
yourTextField.addEventListener(SoftKeyboardEvent.SOFT_KEYBOARD_ACTIVATE, onActivating); 

// in the event listener to the textField IE : 

private function onActivating(event:SoftKeyboardEvent):void 
{
  //listen to the event; make your move here.
}