Trees when I'm loading the children dynamically. So instead of trying to get animated gifs to work (see this example if you are interested) I created a relatively simple Spinner class that draws a circular spinner using just Flex Graphics. The spinner is animated using a Timer. If you set the startImmediately property to true then the animation starts when the spinner component is added to a parent component. And it is always stopped when it gets removed from its parent. There are also the start(), stop() and running functions to control the spinner manually.
The spinners have a few styles that you can set to customize the appearance:
<ui:Spinner Properties delay="100" startImmediately="false" Styles backgroundAlpha="1" backgroundColor="NaN" spinnerColor="#829AD1" spinnerHighlightColor="#001A8E" spinnerThickness="3" spinnerLineThickness="2" spinnerType="gradientcircle"/>
I've created an example of the four types of spinners in four Trees. Each tree node loads its children after a 2 second delay during which time the spinner is shown, so try expanding each tree (right click to view source):
Let me know if you like them!
Also, make sure you do call stop() on the spinner when you don't need it anymore... otherwise you might notice your Flex app starts to run very slowly like mine did...
** September 28th 2009 Updated **
I've added another example application showing how to show the spinner inside an AdvancedDataGrid control.
21 comments:
Wow, this is a great utility. Thank you.
Hi this post is very useful.. But I tried to implement this with AdvancedDatagrid without success. (I'm using hierachical data and lazy loading in the grid) LoadingTreeItemRenderer does not call method "commitProperties()".
Any suggestions in moving this functionality for AdvancedDatagrid ?
Hi mlr,
Sorry it took so long to get back to you, real work got in the way!
I've added a new example (see the Sept 28th update note above) that shows how to get it working with an AdvancedDataGrid control. I made my own custom HierarchicalData class and my own ADGLoadingTreeItemRenderer class that is very similar to the old one. The commitProperties() function does get called for me.
Cheers,
Chris
Awesome work! Very impressed. You should submit your work to tour de flex because this is way better than all of the tree control examples they have listed.
Thanks for the idea Eric. I've submitted four of my components to Tour de Flex. Why not eh?
Any idea why using your code would create a black circle (with a white center) regardless of what style I have on it?
Sorry, I answered my own question. I added some more coloring styles and it looks great now. Good work!!!
Can you comment on the licensing this code is released with? We'd like to use it but without an implicit license in the code we can not.
Hey Scott, the licensing is in the top of the files.
Hi Scott,
I've decided to release all my work under the Creative Commons License (see the box on the right hand side of my blog).
Chris
thanks this is really helpful
Great work Chris.
The link to the example application showing the spinner inside an AdvancedDataGrid control, is dead.
Can you please correct it, or add this example to this blogg.
Thank you in advance.
Thanks for letting me know royp, it's fixed now.
The correct URL for the AdvancedDataGrid example is http://keg.cs.uvic.ca/flexdevtips/spinner/ADGSpinnerTest.html.
Thanks for the quick reply, but the code seems to be missing from the example. Did not find any "View Source" in the right-click menu.
Okay, I've added the View Source for the Advanced Data Grid example, thanks for letting me know.
Hey Chris
I realize I am commenting at a very old post. But I need your help. If you can please tell how would i implement this example using RemoteObject, where clicking each folder would return its sub-folders from the server. Thanks.
Got it. I guess it was a hasty question. I did the following:
call a remote object from getChildren method in dataDescriptor and in resultHander make node.children.source = {sub-folders from server};
Really nice blog. Thank you for sharing your knowledge :)
Glad you figured it out!
Nice ones. There is also a whole generator application for CSS spinners and bars at http://cssload.net
Love this feature. Wish Adobe incorporated this feature into the controls. Power of Open Source
Thank you! You've done what Adobe should.
Post a Comment