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.
Flash Player Required to view this demo.
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?
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!
nice
This is really slick, but don’t push the add new button when editing a row.;)
@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. 🙂
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
@CK: Glad you are able to make use of it. Thanks 🙂
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.
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!
@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
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.
@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
Where may I see the source code?
Right click on the SWF on the post page and click ‘view source’.
Well, Can’t I test it on Flex 4.6? Why?