By default, Flex controls which can be "clicked" on by a user do not change the mouse cursor to the hand or pointer cursor when you "mouse over" them. This is a bit annoying as users now rely on this visual feedback as it is the default behaviour of HTML links on web pages.

It is simple to make a Flex control opperate like this, by setting its useHandCursor and buttonMode properties to true. However, this is not very convenient to do for every component in an application, leading some to extend each component in order to add this behaviour as default.

As this is also far from a perfect solution, my team wondered if we could use skinning to add this behaviour - after all it is presentational. Although there is no direct way to do this through a skin class, it turns out that one can access the component the skin is applied to, thought the parent property. So as the following ButtonSkin class shows, you can indeed use a Skin, applied to each Button using CSS, to set the use of a hand cursor.

1. /**

2. *
3. * Copywrite (c) 2010, David Beale
4. *
5. */
6. package com.bealearts.skin.component
7. {
8. import mx.controls.Button;
9. import mx.skins.halo.ButtonSkin;
10.  
11. ;
12.  
13.  
14. /**

15. * Skin which adds a mouse-over hand cursor to a Button component
16. */
17. public class ButtonSkin extends mx.skins.halo.ButtonSkin
18. {
19. /* PUBLIC */
20.  
21. /**

22. * Constructor
23. */
24. public function ButtonSkin()
25. {
26. super();
27. }
28.  
29.  
30. /* PROTECTED */
31.  
32. /**

33. * Override to set hand cursor property of the parent component
34. */
35. override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
36. {
37. /* LOCALS */
38. var button:Button = null;
39.  
40. super.updateDisplayList(unscaledWidth, unscaledHeight);
41.  
42.  
43. // Get component
44. if (this.parent)
45. {
46. // Get component - note not every component will be a direct parent of a skin
47. button = Button(this.parent);
48.  
49. // Set Button mode
50. if (!button.buttonMode)
51. button.buttonMode = true;
52.  
53. // Set Hand cursor
54. if (!button.useHandCursor)
55. button.useHandCursor = true;
56. }
57. }
58.  
59.  
60. /* PRIVATE */
61. }
62. }
63. Download this code: ButtonSkin.as_.txt