• Home |
• Accessibility |
• Log in

• Home
• Projects
• Blog
• Fun

Adding a pointer/hand cursor to Flex UI Controls using CSS and Skin Classes

July 17th, 2010

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

Posted in Flex | No Comments »

---

ResourceManager ColdFusion Library

March 21st, 2010

I have just added a ColdFusion library of mine to RIA Forge.

ResourceManager is an internationalisation library for Adobe ColdFusion which uses the resource bundle package style that Adobe Flex uses.

This makes for convenient localisation when working with both ColdFusion and Flex applications.

Posted in ColdFusion, ResourceManager | No Comments »

---

Flex based Land Rover US Certified Pre-Owned Inventory Search

March 3rd, 2010

We have just launched a site for Land Rover in the US, it is designed to be a rich user experience for finding a certified pre-owned Land Rover cars in the USA.

View it at Land Rover Certified Pre-Owned Inventory Search by selecting the Enter Flash Site option.

Non-US users; why not try 90210 for the Zip Code

It is power by Flex and ColdFusion technologies.

Posted in ColdFusion, Flex | No Comments »

---

Jaguar UK used car locator for the iPhone

February 26th, 2010

As an extension of our Used Vehicle Locator product, we have just launch an iPhone targeted mobile version for Jaguar UK.

View it at Jaguar Used Cars Mobile using a iPhone or iPod Touch for the best experience.

If you need a Postcode to use, try GU7 1BZ

It is powered by ColdFusion.

Posted in ColdFusion, Mobile | No Comments »

---

Flex Enumerator Class

January 25th, 2010

This is my take on creating an Enumerator class in Flex.

AS3 does not support Enumerators so a class with static constants is used as per the Java Enumerator class pattern.

This implementation is type safe and final. It also contains static helper functions; values() which returns an array of the Enumerator objects (useful for iterations) and getByValue() which allows for easy retrieval of a typed Enumerator object from its primitive value.

1.  
2. package
3. {
4. import flash.errors.IllegalOperationError;
5. import flash.utils.Dictionary;
6. import flash.utils.describeType;
7.  
8. /**

9. * Example Enumerator Representing different RGB Colors
10. */
11. public final class ColorEnum
12. {
13. /* PUBLIC */
14.  
15. public static var RED:ColorEnum = new ColorEnum('RED', PrivateEnforcer);
16. public static var GREEN:ColorEnum = new ColorEnum('GREEN', PrivateEnforcer);
17. public static var BLUE:ColorEnum = new ColorEnum('BLUE', PrivateEnforcer);
18.  
19.  
20. /**

21. * Constructor
22. */
23. public function ColorEnum(value:String, privateEnforcer:Class)
24. {
25. // Force private call only
26. if (privateEnforcer != PrivateEnforcer)
27. {
28. throw new IllegalOperationError("Invalid constructor access");
29. }
30.  
31. // Add Enum value
32. this._value = value;
33. }
34.  
35.  
36. /**

37. * Get all Enumerator Values
38. */
39. public static function values():Array
40. {
41. /* LOCALS */
42. var values:Array = new Array();
43. var value:ColorEnum = null;
44.  
45. if (ColorEnum._values == null)
46. ColorEnum.buildValues();
47.  
48. for each (value in ColorEnum._values)
49. values.push(value);
50.  
51. return values;
52. }
53.  
54.  
55. /**

56. * Get an Enumerator instance by its primative value
57. */
58. public static function getByValue(value:String):ColorEnum
59. {
60. if (ColorEnum._values == null)
61. ColorEnum.buildValues();
62.  
63. return ColorEnum._values[value] as ColorEnum;
64. }
65.  
66.  
67. /**

68. * override value
69. */
70. public function valueOf():Object
71. {
72. return this._value;
73. }
74.  
75.  
76. /**

77. * override toString
78. */
79. public function toString():String
80. {
81. return this._value;
82. }
83.  
84.  
85.  
86. /* PRIVATE */
87.  
88. private var _value:String = '';
89.  
90. private static var _values:Dictionary = null;
91.  
92.  
93. /**

94. * Build static dictionary of all Enum consts and values
95. */
96. private static function buildValues():void
97. {
98. /* LOCALS */
99. var metaData:XML = describeType(VehicleTypeEnum);
100. var node:XML = null;
101.  
102. // Create values Dictionary
103. ColorEnum._values = new Dictionary();
104.  
105. // Add Each Enum const and value
106. for each (node in metaData.children())
107. {
108. if (node.name() == 'variable' && node.@type == metaData.@name)
109. ColorEnum._values[ColorEnum[node.@name].toString()] = ColorEnum[node.@name];
110. }
111.  
112. }
113. }
114. }
115.  
116. class PrivateEnforcer {}
117. Download this code: ColorEnum.as.txt

Posted in Flex | 1 Comment »

---

Flex based Jaguar Certified Pre-Owned Inventory Search

December 27th, 2009

For those of you in the US who have had to use UK Postcodes to try out our Used Vehicle Locators, struggle no more! We have just launched a site for Jaguar in the US.

It is designed to be a rich user experience for finding a certified pre-owned Jaguar car in the USA.

View it at Jaguar Certified Pre-Owned Inventory Search by selecting the Enter Flash Site option.

Non-US users; why not try 90210 for the Zip Code

It is power by Flex and ColdFusion technologies.

Posted in ColdFusion, Flex | No Comments »

---

Flex based Kia Used Car Locator

November 8th, 2009

Our flex based used car locator application continues to shift like hot cakes.

The latest one is for Kia UK and is meant to be a rich user experience for finding an approved user car.

View it at Kia used cars by selecting the Enter Used Vehicle Locator option.

It is power by Flex and ColdFusion technologies.

Posted in ColdFusion, Flex | 2 Comments »

---

Creating a local proxy for ColdFusion development

October 13th, 2009

If you have to develop behind a proxy server, you may have encountered the following problem;

The ColdFusion (JRUN) JVM settings allow one to specify a proxy server, allowing your local ColdFusion to connect to external public URLs. However there is no proxy by-pass options, so when configured your ColdFusion cannot connect to local URLs which are not resolved by the proxy server, i.e. local development servers.

The following solution uses Apache to create a local proxy server for your local ColdFusion to use;

Apache Setup

1. Enable mod_proxy for Apache by un-commenting the following modules to load in your httpd.conf file. If you do not have the mod_proxy module, then you will need to install it.

   LoadModule proxy_module modules/mod_proxy.so
   LoadModule proxy_http_module modules/mod_proxy_http.so  (required for cfhttp)

2. Add the following virtual host configuration to your local httpd-vhosts.conf file

   # Local Proxy for ColdFusion
   Listen 8080
   <VirtualHost *:8080>
       DocumentRoot D:\InetPub\wwwroot
       ServerName localhost
   
       ProxyRequests On
       ProxyVia On
   
       ProxyRemote * http://your-proxy-server:8080
   
       NoProxy .local 192.168
   
   </VirtualHost>

3. Restart Apache

ColdFusion Setup

1. Edit ColdFusion (cfusion) JVM settings in your local JRun4 admin (or CF Admin for non JRun install) to add the following proxy setting

   -DproxySet=true -Dhttp.proxyHost=localhost -Dhttp.proxyPort=8080

2. Restart cfusion instance

Posted in ColdFusion, Network | 2 Comments »

---

Flex based Land Rover used car locator

July 10th, 2009

We launched yet another flex application a few days ago.

It is a user car locator for Land Rover UK and is meant to be a rich user experience for finding an approved user car.

View it at Land Rover used cars by selecting the Rich Experience option.

It is power by Flex and ColdFusion technologies.

Posted in ColdFusion, Flex | 2 Comments »

---

Flex based Mazda used car locator

May 17th, 2009

We launched another flex application a few days ago.

It is a user car locator for Mazda UK and is meant to be a rich user experience for finding an approved user car.

View it at Mazda used cars by selecting the Rich Experience option.

It is power by Flex and ColdFusion technologies.

Posted in ColdFusion, Flex | 3 Comments »

---

• 
• 
•