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.
This movie requires Flash Player 9
by equ
30 Mar 2008 at 05:17
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?
by Bill
30 Mar 2008 at 20:06
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!
by John
08 Apr 2008 at 03:15
nice
by Russ
15 Apr 2008 at 14:53
This is really slick, but don’t push the add new button when editing a row.;)
by Bill
15 Apr 2008 at 19:44
@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. :)
by Christopher Keeler
18 Jun 2008 at 16:07
Bill,
Nice animation component. I’d like to modify it to render two columns of rows like the TileList.
I’ll keep you posted.
Thanks.
-CK
by Bill
19 Jun 2008 at 20:54
@CK: Glad you are able to make use of it. Thanks :)
by Vasilio Ruzanni
18 Sep 2008 at 19:05
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.
by Daniel
29 May 2009 at 10:09
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?
Thanks!
by Bill
01 Jun 2009 at 11:26
@Daniel,
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. :)
Bill
by Cliff
01 Feb 2010 at 06:22
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.
by Bill
10 Feb 2010 at 07:24
@Cliff
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. :)
Bill