In a previous post, I showed a demo of a custom list component created with Degrafa. I received a request for the same application done with Flex 4 and FXG, so I spent a little time converting it over and here is the result. (** requires Flash Player 10)
I’m sure I could have used the new features of Flex 4 even more efficiently than I did, so please feel free to let me know how to improve upon this implementation if you have any suggestions.
Flash Player Required to view this demo.
It seems like the flex 4 version has much smoother animation. Is that what you observe as well? How was it working with Flex 4? Did you like it better than Flex 3/Degrafa? What was the difference in work flow?
nice demo – i’ll waitiing for the one with Multitouch-Support on my HTC Legend 😉
@Mark
I think the animation may indeed be a tad smoother since it is using the 3D capabilities of Flash Player 10 along with the light-weight spark components. I was able to bypass the use of Alex Ulman’s distortion effects library this time around. That library is fantastic but I wanted to see if this version could utilize as many of the new features as possible. In fact, TweenMax is the only external library I kept, mainly because it is so efficient and straightforward.
hi, i checked the example but why are the last 4 items not animating when i hover over them?
@Markus
Good catch. I had not noticed that before. It turns out I was not resetting the animating flag after the tiles were created. I’ve fixed the issue and reposted the demo code. 🙂
Hi i have a serious problem with the positioning of the two “panels”.
I want the “List” on the right side so i thought i changed in the main app the order first detailPanel than teachersPanel.
In doing that the “hover” animation is destroyed. Can you please explain what i`m doing wrong.
Please check it
Thanks gurkerl
You should have a look at the filter function of arrayCollections. May be easier for you (didn’t check to see if there is a reason you weren’t using it though).
Nice demo 🙂
Very nice demo! One small issue… Scrolling the list with the mouse wheel moves only a few pixels per scroll. So it takes about 20 strokes on the wheel to get down one item. Strange.
-James
@James
I did not add mousewheel listeners since it does not work consistently across all browsers so I’m not sure why it is doing that.
-Bill
@Rob
I’ll take a look at the filter function. I wrote that logic quite a while ago so and I think I copied it from some Java code I had written so that is probably why I did not take advantage of the filter function. 🙂
-Bill
This is awesome dude… thanks for the comment on the lions game.
Hi, great example! I have a question, i know the the layout of the teacher tiles could be reproduced using a list and itemrenderers and you would also be able to enjoy the benefits of virtulisation. With your method, if there were 2000 teachers would there be any performance issues? and if so how would overcome those? Also am i right in thinking by using itemrenderers you wouldnt be able to animate the movement of tiles as the itemrenderers wouldnt have any references to each other?
If the list had 2000 items, I would certainly think that using a list with virtualization would be the best solution. I would do everything possible to avoid creating 2000 of ListTile object because the performance would certainly be lacking. While this example was not written with virtualization in mind, I suspect you could come up with something close using virtualization. You are correct that the filtering animation would need to be modified or replaced since my demo has one data item per renderer, whereas, with virtualization, the data would be filtered out and the renderers would be reused, effectively filtering the tiles in the background.