サイテック株式会社 > 【連載】新人女子プログラマーの技術修行日記 - 第6回 Flex編①　Validatorのスタイル変更

かなり久しぶりに書きます。

今年も残すところあと、4か月。。。

派遣でサイテックにきたのが9月だから、あっという間に1年です(^^;)

日々楽しく仕事はできてますが、成長が伴っているのかどうか、そろそろ次のステータスを考えないといけない時期かなと思う今日この頃です。

それはさておき、

最近Flexを触り始めました☆

といってもまだ2か月程度しかやっていないので、技術修行日記に追加してポロポロ書いていけたらなと思ってます。

今回は始めた頃ちょっとつまづいた、validatorクラスのスタイル変更について。

とりあえずソースはこんな感じ。↓↓↓

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	width="500"
	height="300"
	showStatusBar="false"
	backgroundGradientAlphas="[1.0, 1.0]"
	backgroundGradientColors="[#FFFFFF, #E6E6E6]">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.validators.Validator;

			private function check_validator():void{
　　
　　　　　　　　　　　　　//　validateAllですべてチェックしてくれる
			    var err:Array = mx.validators.Validator.validateAll(validators_array);
			    if (err.length != 0 ) {

			        Alert.show("NG！");

			    } else {

			    	Alert.show("OK!");
			    }

			}

		]]>
	</mx:Script>

		<mx:Label x="115.5" y="86" text="数値入力" fontSize="16" fontWeight="bold"/>
		<mx:Label x="115.5" y="147" text="文字入力" fontSize="16" fontWeight="bold"/>
		<mx:TextInput x="202.5" y="84" id="number_text" fontSize="16"/>
		<mx:TextInput x="202.5" y="145" id="string_text" fontSize="16"/>
		<mx:Button x="223" y="222" label="OK" click="check_validator()" fillAlphas="[1.0, 1.0]" fillColors="[#008800, #008800]" color="#FDFDFD" fontSize="16" />

    <!-- バリデート対象を配列に -->
    <mx:Array id="validators_array">
        <mx:NumberValidator source="{number_text}" property="text"/>
        <mx:StringValidator source="{string_text}" property="text"/>
    </mx:Array>

</mx:WindowedApplication>

結果的にはここにちょっと追加するだけでできたんですが、なかなか調べてもわからなかったので書いときます。

デフォルトだとこんな感じ。↓↓↓

エラーヒントの背景色：赤(ボタンの色と合わない・・・。)

文字も小さくてかなり見にくい感じ。

で、上のソースにこれを追加する。↓↓↓

<mx:Style>
　　　/** バリデートのスタイル設定  **/
	.errorTip {
  	　　　font-size : 12 ;
  	　　　color : #ffffff;			<!-- ホワイト -->
	　　　borderColor: #008800; 		<!-- グリーン -->

	}


</mx:Style>
	

ついでにフォーカス色も変更したいので、

<mx:Script>をちょっと変えました。↓↓↓

	<mx:Script>
		<![CDATA[
			import mx.core.UIComponent;
			import mx.events.ValidationResultEvent;
			import mx.controls.Alert;
			import mx.validators.Validator;

			private function check_validator():void{

			    var err:Array = mx.validators.Validator.validateAll(validators_array);

			    var errorFields:Array = [];

			    for each (var e:ValidationResultEvent in err) {
			        errorFields.push(e.target.source);
			    }


			    for each (var c:UIComponent in [ number_text, string_text ]) {
			        var n:int = errorFields.indexOf(c);
			        if (n >= 0) {

                               // ボーダーを太く青くする
　　　　　　　　　　　　　　　　　　　c.setStyle("borderStyle", "solid");
　　　　　　　　　　　　　　　　　　　c.setStyle("borderThickness", 3);
　　　　　　　　　　　　　　　　　　　c.setStyle("errorColor", 0x0000FF);

			        } else {
			            c.setStyle("borderStyle", "inset");
			        }
			    }

			    if (err.length != 0 ) {

			        Alert.show("NG！");

			    } else {

			    	Alert.show("OK!");
			    }

			}

		]]>
	</mx:Script>

すると、こんな感じ↓↓↓

ボタンの色と合いました！フォーカスもはっきりしていい感じ★

アプリケーション内で、"framework.swc" ファイル内の "defaults.css" ファイルに定義されている"errorTip"をオーバーライドする方法で実装しました。

今回は以上です。