Custom cursors in cfform
11 comments Posted by: Laura
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:
mx.managers.CursorManager.setBusyCursor();
and then we set it back to normal when we receive the data:
mx.managers.CursorManager.removeAllCursors();
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:
<cfinput type="Image" name="clock" src="images/clock.png" visible="false" height="0" width="0">
And the function to set cursor call:
mx.managers.CursorManager.setCursor( clock.icon,mx.managers.CursorManager.LOWPRIORITY,-9,-9);
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
11 Comments so far
Write yoursIt seems like it should be easy enough in Flash forms, but I haven't found a way yet (I've RTM: Flex documentation, Flash Help, CF documentation on Flash form styles).
Thanks for the great service you guys provide to the CF developer community!
In Flex you can do it like this..
http://www.prismix.com/blog/2005/11/how_do_i_display_a_hand_cursor.cfm
Is there a similiar solution for CFForm?
You would do something like this:
<cfform name="myform" format="Flash" onload="formOnLoad()">
<cfformitem type="script">
public function formOnLoad(){
var listener:Object = {};
listener.mouseOver = function(event):Void {
event.target.onRelease = null;
event.target.useHandCursor = true;
}
mybox.addEventListener('mouseOver',listener);
}
</cfformitem>
<cfformgroup type="hbox" id="mybox">
..contents of the box
</cfformgroup>
</cfform>
There might be a simpler way, but it works.
Thanks I will try that out in a second.
That is because of this line:
event.target.onRelease = null;
You could do something on click, but it will apply to the whole component as in:
event.target.onRelease=_root.getURL('http://localhost');
if you apply the code to a button instead to a container, you could do:
event.target.onRelease= function(){
//whatever you button was supposed to do or a call to a function as in
_root.myButtonClickFunction();
};
http://www.yaodownload.com/desktop-enhancements/cursors/danicurs/
Concerning the preloader himself, is it possible to determine an x/y position ?
Regards,
Concerning the preloader himself, is it possible to determine an x/y position ?
Regards,