日 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";
}
}
} |

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