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. }

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.


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.


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.


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 {}

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.


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.


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

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.


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.


Copyright © 2005, David Beale

  • Valid XHTML 1.0!
  • Valid CSS
  • Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0