Flex List Control with Editable InputText ItemRenderer

I think the title of this post says it all.   I needed a InputText for the label of images in my TitleList control.  I wanted users to click on the text and edit it in place.  I started out creating a simple ItemRenderer with a InputText and skinned the InputText to look like a regular label until you click to edit the information.   I then decided to go a little further and make a custom control based on InputText which did all the style changes and kept broadcast a change event only when the text actually changes.   I also removed the extension from any titles (like myimage.jpg becomes myimage instead).

This was all fine and dandy until I used the component within the TileList.   You see, the List controls allow Alphanumeric keys as a form of navigation.  This is really cool because if you have images and titles below them, you can skip from image to image by typing the first letter of the image title.  However, this conflicted with the InputText.  Each time I clicked on a title to edit and started to type, the TitleList would navigate based on the character I typed.   This was not so cool. 

I ended up with a simple solution:

event.stopImmediatePropagation();

I used stopImmediatePropogation to prevent my keyDown events on the InputText from bubbling up to the List control.  Problem solved!  Here is a working example, right-click on the Flex application to get the code (I can’t tell you how many people post messages about how to get the Flex source code from examples, I mean, if you have to ask….).

 

ItemRendererEditor Example and Source

 

– Mister

10 Comments

  1. seems like a complex problem yet easy solution. Time and time again this is what makes Flex great, everything seems to be in there, you just need to know where to find it šŸ™‚

  2. Yeah, this one took a few tries to find. I think the answer is also always out there some place in the blogs, like this one. Of course this is also probably only one of several ways to solve the same problem. This is what I like about Flex, a little bit of discovery and room to make your own solutions.

  3. Hello Mister,

    This is very good ! I would of course have a small question. I have been exploring the code and I have small difficulties to, for example, align the text in the text field to the left. How would you do that ?

  4. Hi,
    If you simply add
    dragEnabled=”true” dragMoveEnabled=”true” dropEnabled=”true”
    To the TileList, then you see that the data looose user modification after a drag…

    Any solution???

    Many thanks

  5. Just a quick thanks for posting this! Saved me in the 11th hour for something I needed to accomplish for a demo tomorrow. I was doing some ugly stuff with states because I’m new to Flex – this is such a better solution!

  6. I tried using this and when the TextInput was displayed the first time it looked a TextInput instead of a Label. I added a CreationComplete event to the LabelEditor constructor and called setEditable(false) and now it works.

    [as]
    public function LabelEditor(){

    addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete);

    editable = false;
    }

    private function creationComplete(e : FlexEvent) : void {
    removeEventListener(FlexEvent.CREATION_COMPLETE, creationComplete);

    setEditable(false);
    }
    [/as]

Comments are closed.