Flex学習記08 - 入力フォーム

これまでのエントリ

フォームの作成

mx:Form と mx:FormItem でフィールドの枠を利用することができます。

とりあえずこれを使えば配置にあまり悩まないはずです。

作成の順序としては、

入力コンポーネントを配置
MXML内、mx:Application の creationComplete イベントで初期処理や、ボタンクリック時などのイベントハンドラを登録
イベントハンドラの中身を書く

となります。

src/form.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx               = "http://www.adobe.com/2006/mxml"
  xmlns                  = "*"
  width                  = "100%"
  height                 = "100%"
  paddingLeft            = "0"
  paddingRight           = "0"
  paddingTop             = "0"
  paddingBottom          = "0"
  horizontalScrollPolicy = "off"
  verticalScrollPolicy   = "off"
  backgroundColor        = "#ffffff"
  backgroundImage        = ""
  layout                 = "absolute"
  frameRate              = "60"
  viewSourceURL          = "src/form.mxml"
  creationComplete       = "creationCompleteHandler()"
  >
  <mx:Style>
    <![CDATA[
    ]]>
  </mx:Style>
  <mx:Script>
    <![CDATA[
      import mx.containers.FormItem;
      import mx.controls.*;
      private function creationCompleteHandler() : void {
        registBtn.addEventListener(MouseEvent.CLICK, registBtn_clickHandler);
        var formItem:FormItem = new FormItem();
        formItem.label = "動的に作るボタン";
        var button:Button = new Button();
        button.label = "これがそのボタン";
        formItem.addChild(button);
        form1.addChildAt(formItem, form1.numChildren - 1);
      }
    ]]>
  </mx:Script>
  <mx:VBox width="100%" height="100%" >
  <mx:Form id="form1" width="100%" defaultButton="{registBtn}">
    <mx:FormItem label="名前">
      <mx:TextInput id="iname" width="200" text="morningmist7" />
    </mx:FormItem>
    <mx:FormItem label="メールアドレス">
      <mx:TextInput id="mail" width="200" text="" />
    </mx:FormItem>
    <mx:FormItem label="生年月日">
      <mx:DateField id="birthday" width="120" />
    </mx:FormItem>
    <mx:FormItem label="年齢">
      <mx:TextInput id="age" width="100" />
    </mx:FormItem>
    <mx:FormItem label="性別">
      <mx:HBox width="100%">
      <mx:RadioButtonGroup id="radiogroup1" />
      <mx:RadioButton label="男" value="man" groupName="radiogroup1"/>
      <mx:RadioButton label="女" value="woman" groupName="radiogroup1"/>
      <!-- データバインディングはコード不要で静的な情報表示に便利 -->
      <mx:Label text="{radiogroup1.selectedValue}ですね"/> 
      </mx:HBox>
    </mx:FormItem>
    <mx:FormItem label="コメント">
      <mx:TextArea id="memo" width="200" height="50"/>
    </mx:FormItem>
    <mx:HBox paddingLeft="10" paddingTop="5" >
      <mx:CheckBox id="idDmChk" label="新製品情報などのお知らせを受け取ります" selected="true" />
    </mx:HBox>
    <mx:HBox>
      <mx:Button id="registBtn" label="登録" />
    </mx:HBox>
	</mx:Form>

  </mx:VBox>
</mx:Application>

表示結果

入力検証

入力検証についてはFlex独自の書き方があるので、慣れるまで時間がかかるかもしません。

標準のバリデータを利用する。
自作のバリデータを用意することもできる。
xxValidator を mx:Array で囲むことで配列化し、一括検証可能
- mx.validators.Validator.validateAllメソッド

下記にサンプルを記載します。これらは、mx:Application の直下に書きます。

StringValidator
EmailValidator
DateValidator
NumberValidator

を紹介していますが、それぞれ属性に特長があるので、リファレンスと睨めっこが必要になります。

  <mx:Array id="validatorArray">
    <mx:StringValidator id="inameV"
      source="{iname}" property="text"
      maxLength="10" 
      required="true"
    />
    <mx:EmailValidator id="mailV"
      source="{mail}" property="text"
      required="true"
    />
    <mx:DateValidator id="birthdayV" source="{birthday}" property="text" allowedFormatChars="/" 
      trigger="{registBtn}" triggerEvent="click" 
    /> 
    <mx:NumberValidator id="ageV" 
      source="{age}" property="text" 
      minValue="1" maxValue="99" domain="int"
      required="false"
    />
    <mx:StringValidator id="memoV"
      source="{memo}" property="text"
      maxLength="200" 
      required="false"
    />
  </mx:Array>

フォームとバリデーターをマージ

サンプルの最終版になります。

src/form.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx               = "http://www.adobe.com/2006/mxml"
  xmlns                  = "*"
  width                  = "100%"
  height                 = "100%"
  paddingLeft            = "0"
  paddingRight           = "0"
  paddingTop             = "0"
  paddingBottom          = "0"
  horizontalScrollPolicy = "off"
  verticalScrollPolicy   = "off"
  backgroundColor        = "#ffffff"
  backgroundImage        = ""
  layout                 = "absolute"
  frameRate              = "60"
  viewSourceURL          = "src/form.mxml"
  creationComplete       = "creationCompleteHandler()"
  >
  <mx:Style>
    <![CDATA[
    ]]>
  </mx:Style>
  <mx:Script>
    <![CDATA[
      import mx.containers.FormItem;
      import mx.controls.*;
      private function creationCompleteHandler() : void {
        registBtn.addEventListener(MouseEvent.CLICK, registBtn_clickHandler);
        
        var formItem:FormItem = new FormItem();
        formItem.label = "動的に作るボタン";
        var button:Button = new Button();
        button.label = "これがそのボタン";
        formItem.addChild(button);
        form1.addChildAt(formItem, form1.numChildren - 1);
        //formItem.addChildAt(button,1);
        
      }
      private function registBtn_clickHandler(event:MouseEvent) : void {
        //検証エラーの有無をチェック
        if(mx.validators.Validator.validateAll(validatorArray).length > 0) {
          return; 
        }
        mx.controls.Alert.show("OK [Name : " + iname.text + " / Mail : " + mail.text + "]"); 
      }
    ]]>
  </mx:Script>
  <mx:VBox width="100%" height="100%" >
  <mx:Form id="form1" width="100%" defaultButton="{registBtn}">
    <mx:FormItem label="名前">
      <mx:TextInput id="iname" width="200" text="morningmist7" />
    </mx:FormItem>
    <mx:FormItem label="メールアドレス">
      <mx:TextInput id="mail" width="200" text="" />
    </mx:FormItem>
    <mx:FormItem label="生年月日">
      <mx:DateField id="birthday" width="120" />
    </mx:FormItem>
    <mx:FormItem label="年齢">
      <mx:TextInput id="age" width="100" />
    </mx:FormItem>
    <mx:FormItem label="性別">
      <mx:HBox width="100%">
      <mx:RadioButtonGroup id="radiogroup1" />
      <mx:RadioButton label="男" value="man" groupName="radiogroup1"/>
      <mx:RadioButton label="女" value="woman" groupName="radiogroup1"/>
      <!-- データバインディングはコード不要で静的な情報表示に便利 -->
      <mx:Label text="{radiogroup1.selectedValue}ですね"/> 
      </mx:HBox>
    </mx:FormItem>
    <mx:FormItem label="コメント">
      <mx:TextArea id="memo" width="200" height="50"/>
    </mx:FormItem>
    <mx:HBox paddingLeft="10" paddingTop="5" >
      <mx:CheckBox id="idDmChk" label="新製品情報などのお知らせを受け取ります" selected="true" />
    </mx:HBox>
    <mx:HBox>
      <mx:Button id="registBtn" label="登録" />
    </mx:HBox>
	</mx:Form>

  </mx:VBox>
  <!-- validator -->
  <mx:Array id="validatorArray">
    <mx:StringValidator id="inameV"
      source="{iname}" property="text"
      maxLength="10" 
      required="true"
    />
    <mx:EmailValidator id="mailV"
      source="{mail}" property="text"
      required="true"
    />
    <mx:DateValidator id="birthdayV" source="{birthday}" property="text" allowedFormatChars="/" 
      trigger="{registBtn}" triggerEvent="click" 
    /> 
    <mx:NumberValidator id="ageV" 
      source="{age}" property="text" 
      minValue="1" maxValue="99" domain="int"
      required="false"
    />
    <mx:StringValidator id="memoV"
      source="{memo}" property="text"
      maxLength="200" 
      required="false"
    />
  </mx:Array>
  <!-- /validator -->
</mx:Application>