Autorefresher Component

If you have been working on applications which serve highly dynamic data on the screen, you are most likely to have had to rely on the “polling” mechanism to get updated data from the back-end. We had similar requirement in our project and we created a tiny component using Flex’s Timer Class to fire a specific method at set frequencies.

And as usual, we didn’t to go around writing code all across the application to do this. The component we created can take in a function as an attribute. This function could be anything. It could be one that fires an SQL query and updates an ArrayCollection, or it could be one that sends out a Feed request or whatever!๐Ÿ™‚ It’s pretty easy to use the AutoRefresher. All you have to do is add the AutoRefresher to your view –

<flexed:AutoRefresher id="exampleAutoRefresh" delay="5000" refreshFunction="FunctionToBeFiredPeriodically" />

The view then, refreshes every x milliseconds specified for delay. The default is 15000 milliseconds or 15 seconds. In the init method of your view, before starting the autorefresher, set the owner of the refresher to the parent like this-

exampleAutoRefresh.owner = this;
exampleAutoRefresh.start();

Setting the owner is to make sure that our refresher stops and starts based on the views visibility. In most cases, Polling mechanism ends up being really costly on the back-end. Especially if you are dealing with multi-tiered architecture and trying to talk to a web server, database server etc over the network. And its very much possible, that multiple views in your application might be required to autorefresh periodically. If you are polling in all the screens whether they are required or not, you are most likely to end up crashing the back-end infrastructure. In order to address this problem and minimize the load on the back-end, we built in a mechanism into the refresher by which it stops if the view is visible and starts automatically when the view is visible. This is why we are setting the owner in the init method. So, if you have autorefresher running on view A and B; and the user is viewing view B, then only view B is refreshing and when the user moves to view A; view B stops refreshing and view A starts.

Special thanks to Easwar for making this idea work! This component might come in handy for many๐Ÿ™‚ . It sure saved a lot of effort for us๐Ÿ˜‰ . Check it out.

Note: The demo is very basic. All it does is gets the time every 3 seconds and updates the label in the view.

[ Demo | Source | ASDocs ]

27 Responses to Autorefresher Component

  1. I like your copyright notice:

    // Further it is worth to mention that no animals have been
    // harmed during the development. No trees have been cut
    // down. Womens rights have been treated with full respect.
    // Mankind’s safety has been ensured at every step.
    ๐Ÿ™‚

  2. Stefan Schmalhaus says:

    This comes in very handy. Thanks for sharing!

  3. Piotr says:

    yes, very handy. But it does’t really work when i use a filterfunction on my array. It resets my array๐Ÿ˜ฆ can it be fixed?

  4. Nolan Dubeau says:

    Is there an advantage to polling rather than using FDS to push the data to connected clients?

  5. udayms says:

    None that I can see of…. Of course there may be use cases of not wanting the updated data all the time. Changing frequency of updating and the user wanting to choose the frequency everytime he loads the screen…. but even all of these should be handled by push….

    This component is useful for people who dont use FDS or any other technology that supports PUSH on the backend. For example, if you are just talking to a 3rd party web service.. like RSS feed…. and you want to ensure that list of feeds is updated frequently. The server sides do not PUSH…. you have to PULL from them every x seconds or so….

  6. Chrisinmainz says:

    Can I use this to auto refresh my youtube videos? Your program sounds fascinating, but a good portion of the technical lingo flies right over my head…
    MFG
    Chris

  7. Ashvin says:

    Hello,

    saw this demo, looks really good.

    Am trying the sourcecode you gave, but it does not work. It gives error “Type was not found or was not a compile-time constant:AutoRefresher”

    Any idea how to make it work and remove this error?

    Many thanks

  8. Kishore says:

    I believe there is a small mistake in the following sentence.
    it should be ‘inVisible’ instead of ‘Visible.’

    ……we built in a mechanism into the refresher by which it stops if the view is ‘visible’ and ……

  9. Juris says:

    Hi!
    I have implemented this great component in one of my projects!
    Thank You very much for this๐Ÿ™‚
    Althought i had some problems, seems that property repeatCount doesn’ t work aswell the function stop() does not make any sense, the timer continues to run :((( Any suggestions?
    Kind Regards,
    Juris

  10. Tran says:

    Thanks man, I am looking for this component. It helps me a lot of creating code, we should make a network of flex developer to improve productivity.

  11. ajax says:

    thanks a tonn guys! this surely works,
    apart from this, do you have a code that can be invoked thru a Push from Server?
    Say when UserA updates database, some UserB, logged in to same database will be notified, asynchronously?
    thanks, mail me at

    ajayrc@gmail.com

  12. grot says:

    Thank you very much. This was a great help.

  13. Vengateswaran says:

    Hi,

    This component was really helpful. Appreciate you sharing it.

    Thanks & Regards
    venky

  14. shellen says:

    Hi,
    Its really great tutorial. However, how do you ensure that when only the database is updated then the label itself will update?

  15. Pingback: COMPONENTS AND WIDGETS « Panduramesh’s Weblog

  16. Flug says:

    Had some problems as well, but Kishores suggestion worked. Thanks for this handy awesome one, it saves so much time.

  17. Pingback: Components & widgets « welcome nandhu

  18. Pingback: COMPONENTS AND WIDGETS « Adiflex’s Blog

  19. leo says:

    hi, may u send me the demo source code to my mail @ leo_soo@yahoo.com because i fail to access the link.
    thank in advance.๐Ÿ™‚

  20. Babin says:

    Hi,
    Thanks for the help. Actually I tried the same in my application. But, I am getting some error at the runtime.

    It would be grateful if you give sample mxml code with the auto refresh component

    It will be helpful for me to understand about this component.

    Also, where should I add this following code?

    exampleAutoRefresh.owner = this;
    exampleAutoRefresh.start();

    Please help me..

    Folks, who implemented this successfully can also help me.

    Thanx,
    Babinlal. K

  21. udayms says:

    add that code into a function and call that function on creationComplete event of the mxml.

  22. Not that I’m impressed a lot, but this is more than I expected for when I found a link on Furl telling that the info here is quite decent. Thanks.

  23. oma says:

    I have a little problem with AutoRefresher.
    When my view is closed (it is a popup), the refresher is still alive and it is not stopped. It continues to call the refresh function indefinitely.

  24. Prem says:

    Hi,

    It seems to be a nice component. Can you please send me the source code? URLs links given above is not working.
    Thanks much!

    -Prem

  25. Prabhu.S says:

    Hi,

    It seems gud and meets my requirement. The above URL links is not working. Could you please send me the source code? it will be helpful for me.. Thanks in Advance!

    – Prabhu.S

  26. Secathor says:

    Hi, thanks a lot for this perfectly working component !!!

    find it on google code : http://code.google.com/p/flexedtoolkit/wiki/AutoRefresher

  27. xpthyakqw blcmpvvkai wkzdrnz mfxpciuck

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: