CheckBox
{
	icon			:	ClassReference("com.lejnieks.poc.ui.skins.CheckboxBorderSkin");
	error-color		:	#FF0000;
	fillColors		: 	#fdfdfd, #e2e3e3, #e6f5ff, #e6f5ff;
	borderColor		: 	#374149;
	outerBorderColor	:	#77848D;
	themeColor		: 	#77848d;
	icon-color		:	#2A2A2A;
	disabled-icon-color	:	#7A7A7A;
	color			: 	#DEEEF9;
	textSelectedColor	: 	#DEEEF9;
	textRollOverColor	: 	#DEEEF9;
	fontFamily		: 	Tahoma;
	fontSize		: 	10;
	fontWeight		: 	normal;
}

package com.lejnieks.poc.ui.skins
{
	import com.lejnieks.poc.ui.controls.IValidatable;
 
	import mx.controls.CheckBox;
	import mx.skins.halo.CheckBoxIcon;
 
	public class CheckboxBorderSkin extends CheckBoxIcon implements IValidatable
	{
		private var _showError:Boolean = false;
 
		public function get showError():Boolean
		{
			return _showError;
		}
 
		public function set showError(value:Boolean):void
		{
			_showError = value;
			invalidateProperties();
		}
 
		override protected function updateDisplayList(w:Number, h:Number):void
		{
			super.updateDisplayList(w, h);
 
			var bDrawCheck:Boolean 		= 	false;
			var fillAlphas:Array		= 	[1, 1];
			var highlightAlphas:Array 	= 	[1, 1];
			var checkColor:uint 		= 	getStyle("iconColor");
			var borderColor:uint		= 	getStyle("borderColor");
			var outerBorderColor:uint	=	getStyle("outerBorderColor");
			var fillColors:Array 		= 	getStyle("fillColors");
			var isErrorState:Boolean	=	false;
 
			if( !_showError )
			{
				if(parent is CheckBox && CheckBox(parent).errorString.length > 1 &&  CheckBox(parent).errorString != "" && CheckBox(parent).errorString != null  )
				{
					isErrorState = true;
				}
			}
 
			graphics.clear();
 
			switch( name )
			{
				case "upIcon":
					if(isErrorState || _showError)
					{
						drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					}
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1 );
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "overIcon":
					drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1 );
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
 
				case "downIcon":
					drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[2], fillColors[3] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "disabledIcon":
					drawRoundRect( 0, 0, w, h, 0, borderColor, 0.5);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], [0.5, 0.5], verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "selectedUpIcon":
					bDrawCheck = true;
					if(isErrorState || _showError)
					{
						drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					}
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "selectedOverIcon":
					bDrawCheck = true;
					drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
 
				case "selectedDownIcon":
					bDrawCheck = true;
					drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1 );
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[2], fillColors[3] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "selectedDisabledIcon":
					bDrawCheck = true;
					checkColor = getStyle("disabledIconColor");
					drawRoundRect( 0, 0, w, h, 0, borderColor, 0.5);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], [0.5, 0.5], verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
			}
 
			if (bDrawCheck)
			{
				graphics.beginFill(checkColor);
				graphics.moveTo(3, 5);
				graphics.lineTo(5, 10);
				graphics.lineTo(7, 10);
				graphics.lineTo(12, 2);
				graphics.lineTo(13, 1);
				graphics.lineTo(11, 1);
				graphics.lineTo(6.5, 7);
				graphics.lineTo(5, 5);
				graphics.lineTo(3, 5);
				graphics.endFill();
			}
		}
	}
}

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

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

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") );
		}
	}
}

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

package com.lejnieks.poc.ui.components.menu
{
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.geom.Point;
 
	import mx.controls.Menu;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.controls.menuClasses.IMenuItemRenderer;
	import mx.core.Application;
	import mx.core.ScrollPolicy;
	import mx.core.mx_internal;
	import mx.managers.PopUpManager;
 
	use namespace mx_internal;
 
	public class CustomMenu extends Menu
	{
		private var xpos:Object = 0;
		private var ypos:Object = 0;
 
		private const END_OF_SCREEN_MENU_PADDING:Number = 5;
 
		public function CustomMenu()
		{
			super();
		}
 
		public static function createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean=true):CustomMenu
		{
			var menu:CustomMenu = new CustomMenu();
				menu.tabEnabled = false;
				menu.owner = DisplayObjectContainer(Application.application);
				menu.showRoot = showRoot;
 
			popUpMenu(menu, parent, mdp);
 
			return menu;
		}
 
		override mx_internal function openSubMenu(row:IListItemRenderer):void
		{
			supposedToLoseFocus = true;
 
			var r:Menu = getRootMenu();
			var menu:Menu;
 
			if (!IMenuItemRenderer(row).menu)
			{
				menu = new TIPSMenu();
				menu.parentMenu = this;
				menu.owner = this;
				menu.showRoot = showRoot;
				menu.dataDescriptor = r.dataDescriptor;
				menu.styleName = r;
				menu.labelField = r.labelField;
				menu.labelFunction = r.labelFunction;
				menu.iconField = r.iconField;
				menu.iconFunction = r.iconFunction;
				menu.itemRenderer = r.itemRenderer;
				menu.rowHeight = r.rowHeight;
				menu.scaleY = r.scaleY;
				menu.scaleX = r.scaleX;
 
				if (row.data &&
					_dataDescriptor.isBranch(row.data) &&
					_dataDescriptor.hasChildren(row.data))
				{
					menu.dataProvider = _dataDescriptor.getChildren(row.data);
				}
 
				menu.sourceMenuBar = sourceMenuBar;
				menu.sourceMenuBarItem = sourceMenuBarItem;
 
				IMenuItemRenderer(row).menu = menu;
				PopUpManager.addPopUp(menu, r, false);
			}
			else
			{
				menu = IMenuItemRenderer(row).menu;
			}
 
			super.openSubMenu(row);
		}
 
		override public function show(x:Object=null, y:Object=null):void
		{
			this.xpos = x;
			this.ypos = y;
 
			var absoluteHeightOfSubMenu:Number = this.height + this.ypos;
			var appHeight:Number = Application.application.height;
 
			if( absoluteHeightOfSubMenu > appHeight )
			{
				this.ypos = Number(this.ypos) - (absoluteHeightOfSubMenu - appHeight) - END_OF_SCREEN_MENU_PADDING;
			}
 
			super.show(x, this.ypos);
		}
	}
}

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
	<mx:Metadata>
    [ResourceBundle("labels")]
	</mx:Metadata>
 
	<mx:Script>
		<![CDATA[
			import mx.formatters.DateFormatter;
			import mx.resources.ResourceManager;
 
			[Bindable] private var _username:String;
			[Bindable] private var _date:String;
 
			private function setUsername( event:MouseEvent ):void
			{
				var tmpDate:Date	=	new Date();
 
				_username	= 	usernameInput.text;
				_date		=	tmpDate.getMonth() + "/" + tmpDate.getDay() + "/" + tmpDate.getFullYear();
			}
 
		]]>
	</mx:Script>
 
	<mx:TextInput id="usernameInput" />
	<mx:Button label="Set Username" click="setUsername(event)" />
	<mx:Label text="{resourceManager.getString('labels', 'welcomeMessage', [_username, _date])}" />
 
</mx:Application>

welcomeMessage	=	Welcome {0} Today is {1}

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	initialize="onInitialize()"
	creationComplete="onCreationComplete()">
 
	<mx:Script>
		<![CDATA[
 
			// What we expect here is a trace output of
			// Call 1 Call 3 Call 2, not Call 1 Call 2 Call 3
			// this proves callLater dispatches a call directly
			// 1 millisecond after the code black is done, that
			// contains the callLater,
			// not after all code blacks are done.
			private function onInitialize():void
			{
				trace("call 1");
				callLater(trace3);
			}
 
			private function onCreationComplete():void
			{
				trace("call 2");
			}
 
			private function trace3():void
			{
				trace("call 3");
			}
		]]>
	</mx:Script>
</mx:Application>

package com.lejnieks.poc.model.enums
{
	import flash.utils.describeType;
 
	public class USAStates
	{
		public static const ALABAMA:String = "Alabama";
		public static const ALASKA:String = "Alaska";
		public static const ARIZONA:String = "Arizona";
		public static const ARKANSAS:String = "Arkansas";
		public static const CALIFORNIA:String = "California";
		public static const COLORADO:String = "Colorado";
		public static const CONNECTICUT:String = "Connecticut";
		public static const DELAWARE:String = "Delaware";
		public static const DISTRICT_OF_COLUMBIA:String = "District Of Columbia";
		public static const FLORIDA:String = "Florida";
		public static const GEORGIA:String = "Georgia";
		public static const HAWAII:String = "Hawaii";
		public static const IDAHO:String = "Idaho";
		public static const ILLINOIS:String = "Illinois";
		public static const INDIANA:String = "Indiana";
		public static const IOWA:String = "Iowa";
		public static const KANSAS:String = "Kansas";
		public static const KENTUCKY:String = "Kentucky";
		public static const LOUISIANA:String = "Louisiana";
		public static const MAINE:String = "Maine";
		public static const MARYLAND:String = "Maryland";
		public static const MASSACHUSETTS:String = "Massachusetts";
		public static const MICHIGAN:String = "Michigan";
		public static const MINNESOTA:String = "Minnesota";
		public static const MISSISSIPPI:String = "Mississippi";
		public static const MISSOURI:String = "Missouri";
		public static const MONTANA:String = "Montana";
		public static const NEBRASKA:String = "Nebraska";
		public static const NEVADA:String = "Nevada";
		public static const NEW_HAMPSHIRE:String = "New Hampshire";
		public static const NEW_JERSEY:String = "New Jersey";
		public static const NEW_MEXICO:String = "New Mexico";
		public static const NEW_YORK:String = "New York";
		public static const NORTH_CAROLINA:String = "North Carolina";
		public static const NORTH_DAKOTA:String = "North Dakota";
		public static const OHIO:String = "Ohio";
		public static const OKLAHOMA:String = "Oklahoma";
		public static const OREGON:String = "Oregon";
		public static const PENNSYLVANIA:String = "Pennsylvania";
		public static const RHODE_ISLAND:String = "Rhode Island";
		public static const SOUTH_CAROLINA:String = "South Carolina";
		public static const SOUTH_DAKOTA:String = "South Dakota";
		public static const TENNESSEE:String = "Tennessee";
		public static const TEXAS:String = "Texas";
		public static const UTAH:String = "Utah";
		public static const VERMONT:String = "Vermont";
		public static const VIRGINIA:String = "Virginia";
		public static const WASHINGTON:String = "Washington";
		public static const WEST_VIRGINIA:String = "West Virginia";
		public static const WISCONSIN:String = "Wisconsin";
		public static const WYOMING:String = "Wyoming";
 
		public function USAStates() {}
 
		public static function toArray():Array
		{
			var states:Array = new Array();
			var classInfo:XML = describeType(USAStates);
			for each (var v:XML in classInfo..constant)
			{
				var name:String = String(v.@name);
			    	var value:String = USAStates[name];
			    	states.push(value);
			}
			states.sort();
			return states;
		}
 
	}
}

<mx:ComboBox id="state" width="250" dataProvider="{USAStates.toArray()}" />