Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

サンプルで理解するFlexアプリケーションの作り方~Java開発者のためのFlex 4入門

1から分かるJava開発者のためのFlex 4入門(後編)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/08/24 14:00

ダウンロード サンプルソース (1.3 MB)

目次

入力フォームの作成

 ここからはサンプルソース内の実際のコードを中心にして、アプリケーションの組み立て方を紹介していきます。

 まずは、入力フォームのソースを見ていきましょう。これは、<parts:InputForm>コンポーネントを定義した「parts/InputForm.mxml」ファイルで定義しています。

サンプルアプリケーションの入力フォーム:ラベルの隣に入力フィールドが並ぶ
入力フォーム

 よく目にする「ラベル」と「入力フィールド」が、垂直に並んだデザインです。Flexでは、これを実現するために、<mx:Form>タグが用意されています。<mx:From>タグの内側に<mx:FormItem>タグを記述することで、ラベルと入力フィールドを整然と並べることができます。

「InputForm.mxml」内の<mx:Form>利用部分
<mx:Form id="nyusyukkinForm">
	<mx:FormItem label="日付" width="100%">
		<mx:DateField id="dateF" width="100%" />
	</mx:FormItem>
	<mx:FormItem label="事柄" width="100%">
		<s:TextInput id="kotogaraText" width="100%"/>
	</mx:FormItem>
	....
	<mx:FormItem label="出金" width="100%">
		<s:TextInput id="syukkinText" width="100%"/>
	</mx:FormItem>
</mx:Form>

入力データの検証ができるValidatorタグ

 ユーザーから入力されたデータを何の検証もせずにそのまま保存することは、非常に危険です。言うまでもありませんが、誤作動を引き起こし、セキュリティ上の問題にもなります。JavaのフレームワークStrutsにValidator機能があるように、Flexにも入力データを検証するためのコンポーネントが用意されています。それが、<mx:StringValidator>などのValidatorタグです。

入力に誤りがあったフォームが赤い枠で囲まれ、メッセージを表示する
入力の誤りがあったフォームが赤い枠で囲まれ、メッセージを表示する

 StrutsのValidatorでは、入力ルールをXMLファイルに記述していきますが、Flexでは、MXMLの中に直接記述することができます。
今回利用したのは、入力されたデータが、「日付かどうかを検証する<mx:DateValidator>」「文字列の検証をする<mx:StringValidator>」「数値を検証する<mx:NumberValidator>」の3つです。それぞれ、文字列の長さや数値の範囲を指定できます。Validatorの定義部分は次のとおりです。

「InputForm.mxml」内のValidatorの定義部分
<fx:Declarations>
	<fx:Array id="formValidators">
		<mx:DateValidator source="{dateF}" property="text" />
		<mx:StringValidator source="{kotogaraText}" property="text"
							minLength="1" maxLength="40"/>
		<mx:NumberValidator source="{nyukinText}" property="text"
							minValue="0" />
		<mx:NumberValidator source="{syukkinText}" property="text" 
							minValue="0"/>
	</fx:Array>
</fx:Declarations>

 sourceプロパティに入力フィールドのコンポーネントを指定し、propertyにどのプロパティを検証するのかを指定します。例えば、「nyukinText.text」を検証したい場合には、source"nyukinText"を、property"text"を指定します。このとき、Validatorのような非ビジュアルコンポーネントは、<fx:Declarations>タグの内側に記述することになっています。

 また、これらのValidatorを<fx:Array>タグで囲っていますが、このように記述しておくことで、値が妥当かどうかを簡単なコードで検証できるようになります。以下が、入力されたデータかどうかを検証している部分です。

// 入力されたデータが妥当かどうか検証する
var res:Array = Validator.validateAll(formValidators);
if (res.length > 0) {
	Alert.show("不正なデータがあります。内容を確認してください。");
	return;
}

 Validator.validateAll()メソッドにValidatorの一覧が入った配列を指定すると、そのすべてを検証して、失敗したものを配列として返します。もし、不正なデータがあればエラーメッセージを表示します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • クジラ飛行机(クジラヒコウヅクエ)

    ソフト企画「くじらはんど」にて、多数のフリーソフトを公開しています。日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」、日本語Wiki記法が特徴の「KonaWiki」などを公開しています。

バックナンバー

連載:1から分かるJava開発者のためのFlex 4入門
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5