Flex Animated List Component and Source

By | June 9, 2008

Here is a Flex list component that animates the rows when an item is selected. There are also animations for the ‘new’ and ‘delete’ operations. It is one of the first Flex components that I wrote and I posted this example a few months ago, but it was before I joined the MXNA aggregator so I’m reposting it again. I’m also including the source code this time.

View Source

Flash Player Required to view this demo.


15 thoughts on “Flex Animated List Component and Source

  1. equ

    When I edit one of rows in the list and click save/cancel: the spacing between this row and the next one increases and 1px white line appears (or bottom border of this element change to white/light-grey).. You want it to be in this way or is just a little bug?

  2. Bill Post author

    Great catch! I had missed that. It turns out that it was not adding a 1px line, but rather changing the existing line’s color which was the color of the drop shadow. I’ve fixed it, cleaned up the code a little bit and republished it along with the update source. Thanks!

  3. Russ

    This is really slick, but don’t push the add new button when editing a row.;)

  4. Bill Post author

    @Russ: Thanks for catching that. I’ve fixed it and updated the source. If I really wanted to do it right, I’d probably make it so that when a ‘new’ button click closes the row that is being viewed but for now I’m just disabling the new button when a row is being viewed. 🙂

  5. Christopher Keeler


    Nice animation component. I’d like to modify it to render two columns of rows like the TileList.
    I’ll keep you posted.

  6. Bill Post author

    @CK: Glad you are able to make use of it. Thanks 🙂

  7. Vasilio Ruzanni

    Looks nice, but there are some bugs.
    Just try to (very) quickly press the “Delete” button on one or two rows then quickly press the “Edit” button on another row. There will be some rendering mess.

  8. Daniel

    Great work! Just a quick question…is there a way to use percentage sizes for the width and height of the list?

    When I set it with %, it just keeps on expanding horizontally forever (endless loop).

    Any thoughts?

    1. Bill Post author


      I just threw this sample together so I overlooked that feature. The reason it extends forever is due to the binding on the width property in the addRow Method of the AnimatedList class. If you comment that out, you can tweak the RowRenderer to size itself to the parent’s current width. You could do this by overriding the RowRenderer’s updateDisplayList to and calling something like this.width=parent.width. You’d have to tweak a few other things to get it working perfectly, but this would be a start. 🙂


  9. Cliff

    Hey Bill,

    Great work. I’m not able to edit any info in the edit mode. What’s the problem. Can you please tell me.

    1. Bill Post author


      The edit mode is just a demo. You cannot really edit it. I was just showing that, if this were a production user interface, that row would now be in an editable state where a developer would enable the fields to be editable. 🙂


    1. Bill Post author

      Right click on the SWF on the post page and click ‘view source’.


Leave a Reply

Your email address will not be published. Required fields are marked *