カスタムエラーメッセージのスタイル

2386 ワード

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="errorTip_borderColor_test_2"
				xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				verticalAlign="middle"
				backgroundColor="white">
	
	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			private function comboBox_valueCommit(evt:FlexEvent):void {
				if (comboBox.selectedIndex > -1) {
					var value:String = comboBox.selectedItem.data;
					var cssObj:CSSStyleDeclaration;
					cssObj = StyleManager.getStyleDeclaration(".errorTip");
					cssObj.setStyle("borderColor", value);
					textInput.setStyle("errorColor", value);
					textInput.errorString = errStr;
				} else {
					textInput.errorString = "";
				}
			}
			
			private function button_click(evt:MouseEvent):void {
				comboBox.selectedIndex = -1;
			}
		]]>
	</mx:Script>
	
	<mx:Array id="arr">
		<mx:Object label="Red"    data="red" />
		<mx:Object label="Orange" data="haloOrange" />
		<mx:Object label="Yellow" data="yellow" />
		<mx:Object label="Green"  data="haloGreen" />
		<mx:Object label="Blue"   data="haloBlue" />
	</mx:Array>
	
	<mx:String id="errStr">Oh noes, an errata!</mx:String>
	
	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="errorColor:">
				<mx:ComboBox id="comboBox"
							 dataProvider="{arr}"
							 prompt="Please select a color:"
							 valueCommit="comboBox_valueCommit(event);" />
			</mx:FormItem>
		</mx:Form>
		<mx:Spacer width="100%" />
		<mx:Button label="Deselect ComboBox"
				   click="button_click(event);" />
	</mx:ApplicationControlBar>
	
	<mx:TextInput id="textInput" />
	
</mx:Application>