Populating any Flex component with data is easy. But don’t stop there. Give it some polish by adding transitions when the data changes. Here’s a rather crude explorer where you can change the data and the transition method.
Note: one visitor reported that when selecting rotateInHorizontal or Vertical that it crashed his browser. I’m on a PC and had no issues with Chrome, FF, or IE. If you’re on a sub-PC ( Mac ) then you might want to proceed with caution. Or better yet upgrade to a PC. :)
| view source |
It is simple to add a transition. Just do the following:
1 – Declare a transition inside <fx:Declarations> of your <s:ItemRenderer />
<s:Fade id="fadeBtnIn" target="{ btn }"
duration="{ 500 + ( this.itemIndex * 250 ) }"
alphaFrom="0" alphaTo="1" />
I think it looks a little boring to have every element transition at the same time. To fix that I’m adjusting the duration of each element depending on its itemIndex.
2 – Initiate the transition. You have to do this twice. Once for creationComplete and then every time the data changes with dataChange.
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" creationComplete="init()" dataChange="onDataChange();">
That’s pretty much all it takes.
Problems to look out for
I noticed a few things while putting this together. First, you’ll want to watch for what you’re <DataGroup> is embeded in and how it’s positioned. I originally had the vertical DataGroup aligned by horizontalAlign=”0″. That didn’t go over very well. The framework tries to position it horizontally when elements are transitioning. It’s not a pretty sight. :)
Perhaps I did something wrong and don’t see it but moveInBottom doesn’t seem to work very well for either DataGroup. The last element in the group just sort of giggles around. And with movieInTop the vertical group looks a little off. The top item goes all the way to the bottom and then back up again. Not sure what’s up with that.
My browser crashed twice. please check the code. When i select rotateinvertically browser crashes.
I'm going to make a wild guess and say that you are on a Mac. I'm on a PC and I tested in Chrome, FF and IE with no problems.
A few things:
1. I wasn't able to get your source code to compile as the MCP class is missing.
2. I was unable to reproduce the crash on a Mac with Firefox and Flash Player 10.1
3. Be careful when writing ItemRenderers that have logic on the creationComplete event. This will work great for a non-virtual layout, but will likely not act as you expect when useVirtualLayout=”true” on the layout or if the ItemRenderer is used in a List (virtual layout is on by default). You should be able to key off of only dataChange since it gets fired just before creationComplete gets fired as well as any time the data changes (it also gets fired many more times in a virtual layout like when an item comes in and out of view).
4. The reason why the last item jiggles a little bit in the moveInBottom is a little bit tricky, but I believe working as expected. You can see what is going on by putting a background Rect into the renderer. The size of all of the renderers are contributing to the size of the DataGroup. You might want to try experimenting with applyChangesPostLayout=”true” on the Move effect.
5. You could also tweak the startDelay of an effect to control when it starts rather than giving every item a different duration.
@Steven: thanks for all the input. Sorry about skipping the MCP class. I just updated the source to include it.
This is a pretty horrible example to use for viewing source code because no-one would ever build and app like this – I hope. :)
Thanks for the info on creationComplete/dataChange. At first I was just looking at dataChange but I noticed that something wasn't working correctly and it did when I started hitting it with creationComplete.
Good point about the startDelay. I thought about using that instead of duration. But I didn't want to further complicate the code. Perhaps I should have gone with that instead. That's probably what I would use if I were actually using this in an application – or maybe a little bit of both.
And very true about useVirtualLayout='true'. That just throws a wrench into everything. :)