はじめてのFlex その6

前回のプログラムに入力欄の説明と入力チェックを入れてみます。

HelloWorld.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<local:HelloWorldLogic/>
	<mx:VBox>
		<mx:FormItem label="メッセージ" required="true">
			<mx:TextInput text="Hello World!" id="message"/>
		</mx:FormItem>
		<mx:Button label="click me!" id="clickMe"/>
	</mx:VBox>

	<mx:StringValidator id="messageValidator" required="true" source="{message}" property="text" requiredFieldError="メッセージを入れてください。"/>
</mx:Application>

mx:TextInputをmx:FormItemで囲み、入力欄の説明を書いています。
required="true"と書くと赤い*印が表示されますが、入力チェックとは連動しません。

入力チェックはmx:StringValidatorで行います。今回は必須のチェックだけ行っています。ちなみにValidatorクラスは他にもいくつかありますが、米国内だけでしか通用しない実装が多く、また当然ながらデータベース側と検証できないため、実際に使えるのはmx:DateValidator・mx:EmailValidator・NumberValidator・mx:StringValidatorの4つくらいです。

HelloWorldLogic.as(変更箇所のみ)

		private function onClick(event:MouseEvent):void {
			if (view.message.errorString != "") {
				return;
			}
			Alert.show(view.message.text);
		}

ロジック側は入力欄が正しい（＝エラーメッセージが無い）場合のみメッセージを表示しています。

これを実行すると、入力欄が空の場合にメッセージが表示されます。