03/01

Safari4がカバーフロー対応になったのを記念して、赤すぐnetをマッシュアップしたカバーフローを作ってみました。

カバーフローは、こちらにサンプルがいろいろあるので、参考にしました。これまでマッシュアップのページのレイアウトって、なるべくページ遷移せずに作ろうとして、どうしても、スペースや配置に悩まされていたのですが、こうしてカバーフローにしてみると、やはり、操作性がよいですね。今回は横に移動するシンプルなやつですが、リング状のものや縦のものもあるので、またやってみようかと思います。

written by k-matsu
この記事へのトラックバックURL

02/22

第3弾。

javascriptでの実装はよく見かけますが、薄い文字であらかじめ入力例などを表示しておき、フォーカスされると、入力文字が消える入力フィールド(TextInput)のFlexでの実装例です。ちょっと長くなりますが・・・

ExampleTextInput

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
package hoge
{
  import flash.events.Event;
  import flash.events.FocusEvent;
  import mx.controls.TextInput;
  import mx.events.FlexEvent;
  import mx.styles.CSSStyleDeclaration;
  import mx.styles.StyleManager;  
 
  public class ExampleTextInput extends TextInput
  {
    private var thisStyle:CSSStyleDeclaration
        = new CSSStyleDeclaration("SampleTextInputCSS");
 
    //ExampleText表示時のText Color
    private const EXAMPLE_TEXT_COLOR:int = 0x939393;
    //入力時のText Color
    private const NORMAL_TEXT_COLOR:int = 0x000000;
 
    //sampleText プロパティ
    [Inspectable(defaultValue="入力してください。")]
    private var __exampleText:String;
    public function get exampleText():String {
      return __exampleText;
    }
    public function set exampleText(str:String):void {
      this.__exampleText = str;
    }
 
    //data プロパティをオーバーライド
    public override function get data():Object {
      //sampleTextが表示されていたら空文字列を返す
      if (this.text == this.__exampleText ) {
        return "";
      }
      else {
        return this.text;
      }
    }
    //コンストラクタ
    public function ExampleTextInput()
    {
      super();
      this.addEventListener(FocusEvent.FOCUS_IN,onFocusIn);
      this.addEventListener(FocusEvent.FOCUS_OUT,onFocusOut);
      this.addEventListener(FlexEvent.INITIALIZE,onInit);
    }
 
    //初期化
    private function onInit(event:Event):void {
      //sampleTextを表示させて文字をグレー表示する
      this.text = this.__exampleText;
      thisStyle.setStyle("color", this.EXAMPLE_TEXT_COLOR);
      StyleManager.setStyleDeclaration(this.className,thisStyle,true);
    }
    //Focus In
    private function onFocusIn(event:Event):void {
      //Textを空文字にして色を通常の色に設定する
      if (this.text == this.__exampleText) {
        this.text = "";
        thisStyle.setStyle("color",this.NORMAL_TEXT_COLOR);
        StyleManager.setStyleDeclaration(this.className,thisStyle,true);
      }
    }
    //Focus Out
    private function onFocusOut(event:Event):void {
      //Textが空文字だったらExampleTextを設定してグレー表示にする
      if (this.text == "") {
        thisStyle.setStyle("color",this.EXAMPLE_TEXT_COLOR);
        StyleManager.setStyleDeclaration(this.className,thisStyle,true);
        this.text = this.__exampleText;
      }
    }
  }
}

このコントロールのインスタンスのtextプロパティをそのまま利用する場合、入力例が表示されている場合、入力例の文字列がtextプロパティで取得されてしまいます。それではちょっとまずいので、入力例が表示されている場合は、空文字列で返るのが望ましいですね。

したがって、data プロパティをオーバーライドし、dataプロパティを経由して値を取得することにします(31行目〜)。

MXML

<mx:Application

xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:ns1=”hoge.*”
layout=”horizontal” height=”427″ width=”446″>:
:
<ns1:ExampleTextInput width=”60″ id=”comment” exampleText=”コメントを入力してください” />
<mx:Button click=”Alert.show(comment.data.toString)” />

:
:

</mx:Application>

exampleText属性をExampleTextInputタグの中に記述すると、この文字列が入力例として表示されるようになります。
入力内容を参照する場合は、textプロパティではなく、dataプロパティを参照します。

written by k-matsu
この記事へのトラックバックURL

02/21

FlexのTextInputの拡張の第2弾、URLを入力させてその書式が正しくない場合はエラーとするTextInputの例です。

まず、URLの書式をValidateするVaridatorを作ります。Action Script には、正規表現用のValidatorであるmx.validators.RegExpValidatorがあるので、これを拡張します。

URLValidator

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
package hoge
{
  import mx.validators.RegExpValidator;
  import mx.validators.ValidationResult;
  public class URLValidator extends RegExpValidator
  {
     public function URLValidator()
     {
        super();
        this.expression =
          "^(https?|ftp)(://[a-zA-Z0-9-]+[.][a-zA-Z0-9-.].*)$";
        this.property = "text";
        this.required = false;
      }
 
     override protected function doValidation(value:Object):Array {
       var results:Array = super.doValidation(value);
       if ( results.length > 0 ) {
         var result:ValidationResult = results[0];
         result.errorMessage = "URLの形式が正しくありません。"
       }
       return results;
     }
  }
}

URLの正規表現はもう少し、よい方法もあると思いますが、だいたいこんな感じ。
20行目で、doValidationの戻り値の0番目のerrorMessageを書き換えています。これを書き換えなければ、「フィールドが無効です」というメッセージになります。

次に、このURLValidatorを実装した、URLTextInputを作成します。

URLTextInput

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package hoge
{
  import mx.controls.TextInput;
  import hoge.URLValidator;
  public class URLTextInput extends TextInput
  {
    private var urlValidator:URLValidator;
    public function URLTextInput()
    {
        super();
        urlValidator = new URLValidator();
        urlValidator.source = this;
        urlValidator.property = "text";
    }
  }
}

URLTextInput-Sample

written by k-matsu
この記事へのトラックバックURL

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>

written by k-matsu
この記事へのトラックバックURL