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:

    SCI said...

    Wow, this is a great utility. Thank you.

    mlr said...

    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 ?

    Chris Callendar said...

    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

    eric b said...

    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.

    Chris Callendar said...

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

    bh5k said...

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

    bh5k said...

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

    Scott said...

    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.

    bh5k said...

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

    Chris Callendar said...

    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

    Anonymous said...

    thanks this is really helpful

    royp said...

    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.

    Chris Callendar said...

    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.

    royp said...

    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.

    Chris Callendar said...

    Okay, I've added the View Source for the Advanced Data Grid example, thanks for letting me know.

    Ahmed Malik said...

    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.

    Ahmed Malik said...

    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 :)

    Chris Callendar said...

    Glad you figured it out!

    CSS animations for loading said...

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

    Anonymous said...

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

    Anonymous said...

    Thank you! You've done what Adobe should.