Why this TLFTextField code works only once?

Question

I need the text in an input TLF text field to be modified when the user changes it. As for example, I'm trying to make it uppercase every time the user adds or deletes a character:

import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;

var myTLFTextField:TLFTextField = new TLFTextField();
addChild(myTLFTextField); 
myTLFTextField.x = 10;
myTLFTextField.y = 10;
myTLFTextField.width = 200
myTLFTextField.height = 100;
myTLFTextField.text = "This is my text";

var myFormat:TextLayoutFormat = new TextLayoutFormat();
myFormat.textIndent = 8;
myFormat.color = 0x336633;
myFormat.fontFamily = "Arial, Helvetica, _sans";
myFormat.fontSize = 24;

var myTextFlow:TextFlow = myTLFTextField.textFlow;
myTextFlow.hostFormat = myFormat;
myTextFlow.flowComposer.updateAllControllers();

//--

myTLFTextField.addEventListener(Event.CHANGE, this.onTextFieldChange);
function onTextFieldChange(event:Event):void
{
    myTLFTextField.text = myTLFTextField.text.toUpperCase();
}

The code that goes before //-- is taken from the TLFTextField documentation, the very first example on the page.

When I try to edit the text, it does become uppercase, but after that the text field stops responding to any input and the output says

TypeError: Error #1009: Cannot access a property or method of a null object reference. at flashx.textLayout.container::TextContainerManager/getController() at flashx.textLayout.container::TextContainerManager/mouseDownHandler()

When I comment out the addEventListener line, all appears to be working fine.

Does it mean that it's not possible to make changes to the text in a TLF text field on user input event like it is possible with the classic text fields?

Answer 1

Can't try your code right now so this is a wild guess, but the controllers seem to disappear when you set the text. what happens if you symply do this :

private var m_dontupdate:Boolean;
function onTextFieldChange(event:Event):void
{
  if(m_dontupdate) return;
  m_dontupdate = true;
  myTLFTextField.text = myTLFTextField.text.toUpperCase();
  myTLFTextField.textFlow.flowComposer.updateAllControllers();
  m_dontupdate = false;
}

? (I can't try it because I use FB 4.7 and TLFTextField is nowhere to be found).

Answer 2

Why? Because TLF has got problems. As others have pointed out, changing TLF text inside an Event.CHANGE handler causes the change handler to be called a second time. At that point, things break down.

I had come up with a solution that's similar to the one @Abe posted, but it's more general – it doesn't rely on checking for upper case characters. You listen for TextEvent.TEXT_INPUT, then toggle an Event.CHANGE listener inside the text input handler.

import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import flash.text.TextFieldType;
import flash.events.TextEvent;

var myTLFTextField:TLFTextField = new TLFTextField();
addChild(myTLFTextField); 
myTLFTextField.x = 10;
myTLFTextField.y = 10;
myTLFTextField.width = 500
myTLFTextField.height = 100;
myTLFTextField.text = "This is my text";
myTLFTextField.border = true;
myTLFTextField.multiline = true;
myTLFTextField.type = TextFieldType.INPUT;

var myFormat:TextLayoutFormat = new TextLayoutFormat();
myFormat.textIndent = 8;
myFormat.color = 0x336633;
myFormat.fontFamily = "Arial, Helvetica, _sans";
myFormat.fontSize = 24;

var myTextFlow:TextFlow = myTLFTextField.textFlow;
myTextFlow.hostFormat = myFormat;
myTextFlow.flowComposer.updateAllControllers();

myTLFTextField.addEventListener(TextEvent.TEXT_INPUT, onTextInput);

var selectionIndex:uint;
function onTextInput(e:TextEvent):void
{
    trace("onTextInput");
    selectionIndex = myTLFTextField.selectionEndIndex;
    myTLFTextField.addEventListener(Event.CHANGE, onTextChanged);
}

function onTextChanged(e:Event):void
{
    trace("onTextChanged");
    myTLFTextField.removeEventListener(Event.CHANGE, onTextChanged);

    // Do whatever you need to do here:
    myTLFTextField.text = myTLFTextField.text.toUpperCase();
    myTLFTextField.setSelection(selectionIndex + 1, selectionIndex + 1);
}

Answer 3

First - you doing infinite loop in event listener! Your code in event handler invokes it selves! TLF.text = VALUE produce event like TLF.dispatch(new Event(Event.CHANGE));

So add event listener to user actions not text change! E.g. for KEY_UP

Second - correct formatting code so it will be applied to new text:

myTLFTextField.text = NEW_VALUE;

myTextFlow = myTLFTextField.textFlow;
myTextFlow.hostFormat = myFormat;

Edit: For more clarity I add full code:

import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import flash.events.KeyboardEvent;

var myTLFTextField:TLFTextField = new TLFTextField();
addChild(myTLFTextField);
myTLFTextField.x = 10;
myTLFTextField.y = 10;
myTLFTextField.width = 400;
myTLFTextField.height = 100;
myTLFTextField.text = "This is my text";
myTLFTextField.type = "input";
//allow user to wirte in filed

var myFormat:TextLayoutFormat = new TextLayoutFormat();
myFormat.textIndent = 8;
myFormat.color = 0x336633;
myFormat.fontFamily = "Arial, Helvetica, _sans";
myFormat.fontSize = 24;

var myTextFlow:TextFlow = myTLFTextField.textFlow;
myTextFlow.hostFormat = myFormat;
myTextFlow.flowComposer.updateAllControllers();

//--;

myTLFTextField.addEventListener(Event.CHANGE, wrongHandler);
myTLFTextField.addEventListener(KeyboardEvent.KEY_UP, goodHandler);
myTLFTextField.text = 'TEXT';
//this invoke CHANGE and trace '-' in console

setTimeout(function(){  myTLFTextField.text = 'text';}, 500);
//this invoke CHANGE and trace '-' in console

function wrongHandler(event:Event):void
{
    //myTLFTextField.text = myTLFTextField.text.toUpperCase();
    //myTextFlow = myTLFTextField.textFlow;
    //myTextFlow.hostFormat = myFormat;
    // above code will run infinity loop of changing text! test it by uncomment and comment KEY_UP listener!
    trace('-'); // to see in console when and how many event was triggered
}

function goodHandler(event:Event):void
{
    myTLFTextField.text = myTLFTextField.text.toUpperCase();
    myTextFlow = myTLFTextField.textFlow; // reasign formating
    myTextFlow.hostFormat = myFormat;
    var i:uint = myTLFTextField.text.length;
    myTLFTextField.setSelection(i,i); // move carret to last sign
    trace('+'); // to see in console when and how many event was triggered
}

Output:

1. -
2. -

Output after writing 'a' character in field:

1. -
2. -
3. -
4. -
5. +
6. -

Result on stage: TEXTA