Thursday, April 16, 2009

Tree Icon Spinner (not using animated gif)

I've been disappointed that Flex doesn't natively support animated gifs. I especially wanted to use them inside Flex 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.
  • Flex Example Application
  • AdvancedDataGrid API
  • AdvancedDataGridGroupItemRenderer API
  • 21 comments:

    1. Wow, this is a great utility. Thank you.

      ReplyDelete
    2. 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 ?

      ReplyDelete
    3. 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

      ReplyDelete
    4. 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.

      ReplyDelete
    5. Thanks for the idea Eric. I've submitted four of my components to Tour de Flex. Why not eh?

      ReplyDelete
    6. Any idea why using your code would create a black circle (with a white center) regardless of what style I have on it?

      ReplyDelete
    7. Sorry, I answered my own question. I added some more coloring styles and it looks great now. Good work!!!

      ReplyDelete
    8. 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.

      ReplyDelete
    9. Hey Scott, the licensing is in the top of the files.

      ReplyDelete
    10. 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

      ReplyDelete
    11. thanks this is really helpful

      ReplyDelete
    12. 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.

      ReplyDelete
    13. 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.

      ReplyDelete
    14. 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.

      ReplyDelete
    15. 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.

      ReplyDelete
    16. 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 :)

      ReplyDelete
    17. Nice ones. There is also a whole generator application for CSS spinners and bars at http://cssload.net

      ReplyDelete
    18. Love this feature. Wish Adobe incorporated this feature into the controls. Power of Open Source

      ReplyDelete
    19. Thank you! You've done what Adobe should.

      ReplyDelete