Custom cursors in cfform

When a flash form loads, it shows a preloader. After that, while the data that populates the form gets retrieved, a small icon with an animated clock is shown to indicate that something else is coming. I think it is very important to show progress to the user, and that is why I like the new Flash I/O for uploading files because we can show exactly what’s going on.

But what happens when we are retrieving data with Flash Remoting? We can show a small animation like we do in the MXNA Reader, or we can change the icon of the cursor just like Flash forms do by default. Showing an animation might a little difficult to implement and it may not always fit our application, but there is a very easy way to change the cursor while we retrieve the data.

We have too options, one is to use the default “busy “ cursor:

We set the cursor, for example, when we initiate the call:

and then we set it back to normal when we receive the data:

If we only need to show progress, a clock is a good idea, and given that flash forms already show it, we might as well stick with the default busy cursor for consistency.

There might cases though, where we need a custom cursor. In such case, we need to use our second option, using two key elements:

A hidden cfinput type image:

And the function to set cursor call:

The last two parameters (xOffset and yOffset) will depend on the size of your icon. You can omit them and they will default to 0.

We can use png, jpg, gif, svg or, for an animated cursor, a swf.

A live example
Download the source