4

I am using Flex 4, ActionScript 3.

In the AdvancedDataGrid component, when you are in Edit mode in a cell, you can hit the Escape key to cancel editing (i.e. return to the previous value in the cell).

I had expected the same behaviour while in Edit mode in both the Halo and Spark TextInput and TextArea components, and was surprised to find out that this is not the case.

I looked at the attributes of all four components to see if this is something that I need to configure, but couldn't find anything.

Is this something that needs to be coded?

zero323
  • 322,348
  • 103
  • 959
  • 935
bon_t
  • 97
  • 1
  • 7

1 Answers1

3

Yes, this is something that will have to be coded. Here's the approach I would take:

  1. Create a custom component that extends the TextInput. Let's call it UndoTextInput.
  2. Add a new variable to UndoTextInput to store the original text of the TextInput. We'll call it originalText.
  3. Add an event listener on the focusIn event. In the focusIn event handler, store the current text value in the originalText variable.
  4. Add an event on the focusOut event. In the focusOut event, set the value of originalText back to an empty String.
  5. Add an event listener on the keyDown event. In the event listener, check to see if the Escape (Keyboard.ESCAPE) key was pressed. If it was, reset the text back to what was stored in originalText.

I hope this helps!

UPDATE:

Here's a quick example on how to do this using an Actionscript class. Feel free to modify as needed.

package
{
    import flash.events.FocusEvent;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;

    import spark.components.TextInput;

    public class UndoTextInput extends TextInput
    {
        private var originalText:String = "";

        public function UndoTextInput()
        {
            super();
            this.addEventListener(FocusEvent.FOCUS_IN, focusInEventHandler);
            this.addEventListener(FocusEvent.FOCUS_OUT, focusOutEventHandler);
            this.addEventListener(KeyboardEvent.KEY_DOWN, checkKeyPress);
        }

        protected function focusOutEventHandler(event:FocusEvent):void
        {
            this.originalText = "";
        }

        protected function focusInEventHandler(event:FocusEvent):void
        {
            this.originalText = this.text;
        }

        protected function checkKeyPress(event:KeyboardEvent):void
        {
            if (event.keyCode == Keyboard.ESCAPE)
            {
                event.stopImmediatePropagation();
                this.text = this.originalText;
            }
        }
    }
}
Jason Towne
  • 8,014
  • 5
  • 54
  • 69
  • Hi Jason, thanks for your prompt reply. I'm just wondering about the advantage of creating a separate component though. I altered your solution by still using the regular TextArea, creating a global variable originalText, and setting focusIn/focusOut/keyUp listeners on the regular TextArea. I understand that having a custom component helps with reuse, which I will need, but is the only component captured in the custom component the originalText variable? Meaning do I still need to define focusIn/focusOut/keyUp in each mxml that uses the custom component? I hope you understand my question. Bon – bon_t Jun 06 '11 at 21:38
  • @bon_t If you create a custom component that extends the TextArea component and add all of the variables, eventListeners, etc. that the component needs then you won't have to declare them again outside the component. You'll also want to go with a custom component if you ever want to use it in a `DataGroup`, `Repeater` or just want to have more than one on a page. If you need to declare *other* focusIn, focusOut, etc. eventListeners on the component (for validation for example) then yes you would declare those in the mxml that has the component. I hope this makes sense. :) – Jason Towne Jun 07 '11 at 05:48
  • Hi Jason, am I creating an ActionScript class with TextArea as the superclass, or am I creating an mxml component? Thanks for your patience. – bon_t Jun 07 '11 at 14:23
  • Hi Jason, yes, I will accept your answer. I first started doing the ActionScript class, but I don't know how to put focusIn, focusOut, keyUp there. Are they public methods? So then I'm now using the mxml component b/c I know how to define those attributes. Can you enlighten me on how to do it for an AS class? – bon_t Jun 07 '11 at 15:28
  • @bon_t I added a quick example on how you could do this with an Actionscript class. I hope it helps! – Jason Towne Jun 07 '11 at 16:33
  • Thanks so much, Jason! I will add it to my "How-To" archives. And thank you for your quick replies. – bon_t Jun 07 '11 at 17:50