Flex 4.5 mobile Изменить размер текстовой области с помощью анимации на клавиатуре Активировать событие? - PullRequest
Новая
       17

Flex 4.5 mobile Изменить размер текстовой области с помощью анимации на клавиатуре Активировать событие?

0 голосов
/ 01 июля 2011

Я использую Flex 4.5.1 с AIR 2.7 (и Flash Builder 4.5.1) для создания приложения для Blackberry Playbook.

Приложение имеет большую текстовую область, размер которой нужно изменить, когда появится экранная клавиатура. Я могу подключиться к событиям софт-клавиатуры и там что-то делать.

Теперь я хочу изменить размер текстовой области, чтобы она соответствовала оставшейся части экрана, когда клавиатура появляется. Я знаю текущий и конечный размер и хочу использовать плавную анимацию для отображения изменения размера текстовой области. (Я не могу уже установить высоту и вижу правильное изменение размера текстовой области в событии keyboard_activating - но я хочу сделать это с помощью анимации). Я пытался использовать класс Animate, класс spark.effects.Move, и ни один из них, похоже, не работает в этом случае. Кажется, они запускают анимацию, но экран не обновляется!

Я не хочу использовать встроенное свойство resizeAppForKeyboard в приложении ViewNavigatorApplication. Я установил в дескрипторе приложения значение none, чтобы с ним все было в порядке.

Есть идеи / мысли? Правильный ли мой подход вообще? Как можно изменить размер текстовой области, используя анимацию в событии активации клавиатуры? Мой код выглядит так:

В главном представлении (событие onCreationComplete): (txNote - рассматриваемая текстовая область) 

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

Код в 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);
}

MoveEffect / movePath / animate, которые я пробовал, настраиваются в конструкторе txNote следующим образом: 

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

}

1 Ответ

0 голосов
/ 29 июля 2011 
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.
}
...