メディアテクノロジーラボ訪問 FlexでURLフォーマットのTextInputを使用する
02/20

ちょっと、新しいプロジェクトで、Flexをかじり始めたので、ちょっとしたコードを。

とりあえず、入力フォームを作り始めたのですが、通貨フォーマットのTextInputが欲しいな、と。日本円の表記を前提に、千円単位で「,」を挿入、数値以外は入力不可(エラー表示される)という仕様で・・・。

mx.controls.TextInput の派生クラスを作ればOKですね。

CurrencyTextInput

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package hoge{
  import flash.events.Event;
  import flash.events.FocusEvent;
  import mx.controls.TextInput;
  import mx.events.ValidationResultEvent;
  import mx.formatters.NumberFormatter;
  import mx.validators.NumberValidator;
 
  public class CurrencyTextInput extends TextInput
  {
      private var numberFormatter:NumberFormatter;
      private var numberVaridator:NumberValidator;
 
      public function CurrencyTextInput()
      {
          super();
 
          //NumberFormatterの設定
          numberFormatter = new NumberFormatter();
          numberFormatter.precision =
            resourceManager.getInt('FormattingValues',
              'CURRENCY_PRECISION');
          numberFormatter.thousandsSeparatorTo = ",";
 
          //NumberValidatorの実装
          numberVaridator = new NumberValidator();
          numberVaridator.source = this;
          numberVaridator.allowNegative = true;
          numberVaridator.property = "text";
          numberVaridator.domain = "int";
 
          //Fucus Out時にformat関数を呼び出し
          this.addEventListener(FocusEvent.FOCUS_OUT,format);
      }
 
      private function format(event:Event):void{
 
          var vResult:ValidationResultEvent = numberVaridator.validate();
 
          //Varid時のみフォーマットする
          if (vResult.type==ValidationResultEvent.VALID) {
              //カンマを除去してNumberにする
              var temp:Number=Number(this.text.replace(",",""));    
              this.text= numberFormatter.format(temp);
          }
      }
  }
}

MXML

<mx:Application

xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:ns1=”hoge.*”
layout=”horizontal” height=”427″ width=”446″>:
:
<ns1:CurrencyTextInput width=”60″ id=”price” />
:
:

</mx:Application>

この記事へのトラックバックURL:

コメントを書く

このエントリーを含むはてなブックマーク