Since the ComboBox doesn’t come with an out-of-the-box error state / skin without using an error string, you can grab the sample code below to give your comboBox an error skin. The example implements the interface IValidatable which for the most part is a stub interface that should be considered itterable by the application so you can easily request that any IValidatable component shows its error state ( showError() ). The point of doing this instead of using set errorString is that in certain instances you may not actually want to use an error string, or in the case of a comboBox you may want to have its parent container show the error string.
Another case to use this method of validation would be if you have a parent container with multiple controls inside of it, the parent container is responsible for messaging the error to the user but each control should display an errored state regardless of displaying an error string.
main.css
CustomComboBox { up-skin : Embed(source="/assets/images/combobox_skin_up.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82"); over-skin : Embed(source="/assets/images/combobox_skin_over.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82"); down-skin : Embed(source="/assets/images/combobox_skin_down.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82"); disabled-skin : Embed(source="/assets/images/combobox_skin_disabled.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82"); errorUpSkin : Embed(source="/assets/images/combobox_skin_errorUp.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82"); errorOverSkin : Embed(source="/assets/images/combobox_skin_errorOver.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82"); errorDownSkin : Embed(source="/assets/images/combobox_skin_errorDown.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82"); color : #0A3C6C; text-roll-over-color : #072A4C; text-selected-color : #072A4C; disabled-color : #404E58; dropDownStyleName : comboBoxDropDowns; } .comboBoxDropDowns { color : #0A3C6C; text-roll-over-color : #072A4C; text-selected-color : #FFFFFF; background-color : #f6f6f6; border-thickness : 1; border-color : #f6f6f6; roll-over-color : #C3CED6; selection-color : #0A3C6C; dropShadowEnabled : false; corner-radius : 0; }
CustomCombBox
package com.lejnieks.poc.ui.controls { import mx.controls.ComboBox; import mx.events.ValidationResultEvent; public class CustomComboBox extends ComboBox implements IValidatable { private var originalUpSkin:Object; private var originalOverSkin:Object; private var originalDownSkin:Object; private var _showError:Boolean = false; override protected function createChildren():void { super.createChildren(); originalUpSkin = getStyle("upSkin"); originalOverSkin = getStyle("overSkin"); originalDownSkin = getStyle("downSkin"); setBackgroundSkin(); } public function set showError( value:Boolean ):void { _showError = value; invalidateProperties(); } public function get showError():Boolean { return _showError; } override protected function commitProperties():void { super.commitProperties(); if (_showError) { setBackgroundErrorSkin(); } else { if(errorString && errorString.length != 0) { errorString = ''; } setBackgroundSkin(); } } private function setBackgroundSkin():void { setStyle("upSkin", originalUpSkin); setStyle("overSkin", originalOverSkin); setStyle("downSkin", originalDownSkin); } private function setBackgroundErrorSkin():void { setStyle("upSkin", getStyle("errorUpSkin") ); setStyle("overSkin", getStyle("errorOverSkin") ); setStyle("downSkin", getStyle("errorDownSkin") ); } } }
IValidatable
package com.lejnieks.poc.ui.controls { /** * The interface that components implement to * support validation of fields. This component * bypasses the need to use Validators. * Custom ui components implement this interface * therefore all custom ui component in the application can be * iterated through during a validation process * and set to show its error state or clear its error state. */ public interface IValidatable { /** * Every <cod>IValidatable</code> component will have a proper error * skin. Setting <code>showError</code> to true will invoke this setter * and flag the component to display the error skin on the next * <cod>commitPropeties</code>. * * <p>Calling <code>showError</code> is similar to setting <code>errorString</code> * except that some components may not need to display an error string but still show * its error skin.</p> * <p>IValidatable components in the application can display error skins regardless of setting an * errorString. This is important to note for child components whose parent containers * will set or show an error string or who wont show an error message at all but simply * display a skin or icon for its errored state</p> * */ function get showError():Boolean; function set showError(value:Boolean):void; } }
