Question

I am writing a flex application that involves modifying a textarea very frequently. I have encountered issues with the textarea sometimes not displaying my modifications.

The following actionscript code illustrates my problem:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
    <mx:TextArea x="82" y="36" width="354" height="291" id="textArea" creationComplete="initApp()"/>

    <mx:Script>
        <![CDATA[
            private var testSentence:String = "The big brown fox jumps over the lazy dog.";

            private var testCounter:int = 0;

            private function initApp():void {
                var timer:Timer = new Timer(10);
                timer.addEventListener(TimerEvent.TIMER, playSentence);
                timer.start();
            }

            private function playSentence(event:TimerEvent):void {
                textArea.editable = false;

                if (testCounter == testSentence.length)  {
                    testCounter = 0;
                    textArea.text += "\n";
                }
                else {
                    textArea.text += testSentence.charAt(testCounter++);
                }

                textArea.editable = true;
            }
        ]]>
    </mx:Script>
</mx:Application>

When you run the above code in a flex project, it should repeatedly print, character by character, the sentence “The big brown fox jumps over the lazy dog.”. But, if you are typing into the textarea at the same time, you will notice the text the timer prints is distorted.

I am really curious as to why this happens. The single-threaded nature of flex and disabling user input for the textarea when I make modifications should prevent this from happening, but for some reason this doesn’t seem to be working.

I must note too that, when running the timer at larger intervals (around 100ms) it seems to work perfectly, so I am tempted to think it’s some kind of synchronization issue in the internals of the flex framework.

Any ideas on what could be causing the problem?

Answer 1

My son is having a rough go at this teething thing, hense my being awake. AND, I’m not really sure how I happened upon this random question/answer since I’m so rarely on stackoverflow…. but…

You SHOULD NOT have to increase your framerate by 4x because of a textArea! We’re talking about system resources, not to mention a very elegant flex framework that you could instead leverage:

Here’s a very quick, and flex-sdk compliant and happy fix:

create a component that extends TextArea and add the following property and override (if this in fact what you’re trying to do):

private var _tackOnText : String = "";
private var _tackOnTextChanged : Boolean = false;
public function set tackOnText(value:String):void
{
    _tackOnText = value;
    _tackOnTextChanged = true;
    invalidateProperties();
}

public function get tackOnText():String
{
    return _tackOnText;
}


override protected function commitProperties():void
{
    super.commitProperties();

    if(_tackOnTextChanged) {
        this.textField.text += _tackOnText;
        _tackOnText = "";
        _tackOnTextChanged = false;
    }

}

Then change your playSentence to do this:

if (testCounter == testSentence.length)  {
    testCounter = 0;
    textArea.tackOnText += "\n";
}
else {
    textArea.tackOnText += testSentence.charAt(testCounter++);
}

This is one fix to a semi-common problem that should allow you to not increase your frameRate by 4x to get your app to function correctly AND you’ll be better working with the flex sdk.

My 2p.

Have a good one,
Jeremy