Flex2のカスタムコントロールを作る

複数の画面で共通で使うものは部品化しておくと便利です。
今日は、Flex2でこのような部品を作成するサンプルを書いてみたいと思います。
サンプルのMXMLファイル(CustomControl.zip)

カスタムコントロールを作成する際は、Javaのパッケージや.NETの名前空間のように機能などでグループを 作成すると、使用する際にわかりやすくなります。
Flex2は、Javaのようにディレクトリ構成がそのままパッケージとなり、ファイル名がコントロール名となるようです。
今回のサンプルは、C:\Flex2という名前のフォルダに作成するものとして進めたいと思います。

まずC:\Flex2にcontrolsというフォルダを作り、使いまわす部品となるmxmlを以下のように記述し、controlsフォルダにExampleBox.mxmlという名前で保存します。

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox borderStyle="solid" 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="initBox()"
    width="300" height="300">

    <mx:Script>
    <![CDATA[
    
    private var boxTitle:String = "";
    
    private function initBox() : void
    {
        this.titleLabel.text = this.boxTitle;
    }
    
    public function set title(value:String) : void
    {
        this.boxTitle = value;
        
        if(this.titleLabel != null)
            this.titleLabel.text = value;
    }
    
    public function get title() : String
    {
        return this.boxTitle;
    }
    
    ]]>
    </mx:Script>
    
    <mx:Label id="titleLabel" />
</mx:VBox>

VBoxの中にLabelがあるだけの簡単なものです。
プロパティとして、ラベルに文字を設定する title というプロパティを作成してみました。
ActionScript3はプロパティもサポートしていて、set/getというキーワードを使って上記のようにプロパティを定義します。

このコントロールのプロパティは、標準のコントロールと同様にタグでプロパティを設定できるのですが、設定時には まだコントロールが初期化されていないようで、Labelのインスタンスがまだ生成されていません。
仕方がないので、一旦クラス変数に格納しておいて、initialize イベントでLabelの text プロパティにセットするようにしています。


次に、このコントロールを使用する側のmxmlファイルをC:\Flex2に作成します。
mxmlファイルは以下のように記述します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="controls.*"
    width="100%" height="100%"
    horizontalAlign="left">
    
    <mx:HBox>
        <custom:ExampleBox title="共通パーツ1" backgroundColor="#5555ff" />
        <custom:ExampleBox title="共通パーツ2" backgroundColor="#ff5555" />
    </mx:HBox>
    
</mx:Application>

先ほど作成したコントロールを使用するために重要なのは、ルートタグ（この例ではmx:Application）に、 xmlns:custom="controls.*"
を記述する点です。
これにより、controlsフォルダ内にあるコントロールを、customという名前空間で修飾したタグで標準のコントロールのように配置できます。
名前空間に指定している custom というのは任意のもので構いません。

あとは、
<custom:ExampleBox title="共通パーツ1" backgroundColor="#5555ff" />
のようにmxmlのファイル名をタグ名として記述して配置します。
コントロールに作成した title というプロパティも、他のプロパティと同様に属性として値を設定できます。

また、上の例ではExampleBoxには作成していないbackgroundColorに値を設定し、実際に背景色が指定の色に塗りつぶされますが、 これは、ExampleBoxのルートタグがVBoxであるため、ExampleBoxはVBoxの派生クラスとなっていて、ExampleBoxはVBoxが持つプロパティや スタイルなどを継承してるためです。
もちろん、ActionScript上でも

var ctrl:ExampleBox = new ExampleBox();
var box:VBox = ctrl;

のように、ExampleBox型のインスタンスをVBox型の変数に格納することが出来ます。

Flex2でドラッグ＆ドロップ

デスクトップアプリケーションでは当たり前のドラッグ＆ドロップですが、Webアプリケーションでは難しいものです。
しかし、最近ではWebアプリケーションでもデスクトップアプリケーションに近いユーザーインターフェイスが求められつつあり、 開発も大変ですよね。

今日は、Flex2でドラッグドロップを行う基本部分のサンプルを書いてみます。
ドラッグ＆ドロップ サンプルページ
サンプルのMXMLファイル

まず、ドラッグするオブジェクトと、そのオブジェクトをドロップするターゲットとなるオブジェクトの2つが必要となりますので、 それを作成します。

<mx:Canvas id="ddbox"
    mouseDown="mouseDownHandler(event)"
    mouseMove="mouseMoveHandler(event)"
    mouseUp="mouseUpHandler(event)"
    borderStyle="solid" backgroundColor="#ffffff" width="100" height="100" />

<mx:VBox id="ddtarget"
    dragEnter="dragEnterHandler(event)"
    dragDrop="dropHandler(event)"
    backgroundColor="#9999ff"
    borderStyle="solid" width="300" height="500" />

ここではCanvasとVBoxを使っていますが、mx.core.UIComponentの派生クラスであればOKです。
Canvasはドラッグされるオブジェクトで、mouseDown、mouseMove、mouseUpの各イベントハンドラを作成します。
VBoxはドロップされるターゲットで、dragEnterとdragDropイベントハンドラを作成します。
ここで、ドラッグされるターゲットとなるオブジェクトの方は、なぜかbackgroundColorを指定していないとdragEnterイベントが 正しく発生しないようですので、気をつけてください。

次に、まずドラッグの対象となるオブジェクトのmouseDown、mouseMove、mouseUpイベントハンドラを実装します。

import mx.events.*;
import mx.core.*;
import mx.managers.DragManager;
import mx.controls.*;
import mx.containers.*;

private var isMouseDown:Boolean = false;

private function mouseDownHandler(event:MouseEvent) : void
{
    isMouseDown = true;
}

public function mouseMoveHandler(event:MouseEvent) : void
{
    if (isMouseDown && !DragManager.isDragging)
    {
        var ds:DragSource = new DragSource();
        ds.addData(ddbox, "canvas");
        DragManager.doDrag(ddbox, ds, event);
    }
}

public function mouseUpHandler(event:MouseEvent) : void
{
    isMouseDown = false;
}

mouseDown、mouseUpイベントでは、マウスボタンを押しているかどうかをBooleanの変数にセットしているだけです。
mouseMoveイベントでは、マウスが押されていて、かつDragManagerのisDraggingがfalseの場合に処理を行います。

DragManagerは、mx.managers.DragManagerクラスで、ドラッグ＆ドロップ処理をする際の要となるクラスです。
ドラッグをスタートするときは、まず、mx.core.DragSourceクラスのインスタンスを作成し、addDataメソッドで ドラッグするオブジェクトと、そのオブジェクトを識別するための名前を指定して追加します。
その後、DragManagerクラスのdoDragメソッドを呼び出すと、ドラッグが開始されます。
ドラッグ中は、デフォルトでドラッグするオブジェクトと同じサイズの半透明の四角形が表示されます。

最後に、ドラッグされるターゲットオブジェクトのイベントハンドラを記述します。

private function dragEnterHandler(event:DragEvent):void
{
    if(event.dragSource.hasFormat("canvas")){
        DragManager.acceptDragDrop(IUIComponent(event.target));
    }
}

private function dropHandler(event:DragEvent):void
{
    var item:Box = new Box();
    
    item.width = 298;
    item.height = 30;
    
    item.setStyle("borderStyle", "solid");
    item.setStyle("backgroundColor", 0xff0000);
    
    item.addChild(label);
    
    ddtarget.addChild(item);
}

dragEnterイベントは、オブジェクトがドラッグされてターゲット内に入った時（まだドロップはされていません）に発生します。
この時、ターゲットではドラッグされているオブジェクトのドロップを許可するかどうかを判定します。
引数にわたってくるDragEvent型のインスタンスのdataSourceプロパティにより、ドラッグ開始時に作成したDragSourceを取得でき、 そのhasFormatメソッドによりそのDragSourceが保持しているオブジェクトを判定できます。
オブジェクトのドロップを許可する場合、DragManagerクラスのacceptDragDropメソッドを呼び出します。

dragDropイベントはユーザーがマウスを離した時に発生します。
この時に、ドロップ完了時の処理を記述して、ドラッグ＆ドロップ処理が完成です。

Yahoo User Interface Library - Yahoo.util.ColorAnimクラス -

先日は、Yahoo.util.Animクラスについて書きましたが、今日はYahoo.util.ColorAnimクラスについて書いてみます。
と言っても、ほとんど同じなんですが・・・。
サンプルは、引き続きこちらです。

Yahoo.util.ColorAnimクラスは、背景色・文字色・枠線の色などを滑らかに変化させる際に使用します。
Yahoo.util.Animクラスから派生していて、使い方も同じです。

var attributes = {
    backgroundColor : {from:'#ffffff', to:'#ff0000'},
    color : {from:'#000000', to:'#0000ff'}
};

var anim = new YAHOO.util.ColorAnim('id', attributes, 0.5);

anim.animate();

違う点は、指定する属性が色に関するものになり、値も16進数での指定となります。

Yahoo User Interface Library - Yahoo.util.Animクラス -

先日、Yahoo User Interface Libraryの単純なエフェクトサンプルを作成してみましたが、今日はクラスの使い方を簡単に書いておきます。

最低限必要なファイルは、yahoo.js、event.js、dom.js、animation.js ですので、まずこれらをインクルードして下さい。

アニメーションに関するクラスは animation.js 定義されていて用途によって幾つかのクラスがあるのですが、基本となるのはYahoo.util.Animクラスです。
Yahoo.util.Anim クラスを使うと、要素の大きさ・位置などCSSで数値として指定できる属性を、指定した時間で徐々に変化させアニメーション することが出来ます。
まず、コンストラクタで、

var attributes = {
    width:{from:10, to:100},
    height:{from:10, to:100},
};

var anim = new Yahoo.util.Anim('id', attributes, 0.5, YAHOO.util.Easing.backOut);

のように指定します。
最初の引数は、変化させる要素のインスタンスまたはIDです。

変化させる属性と値は、attributes のようにオブジェクトで第2引数に指定します。
上の例では、幅と高さが10pxから100pxへ変化します。
fromは必須ではなく、指定しなければ現在の値が適用されます。
toの代わりにby:100とすると、大きさが100pxずつアニメーションのたびに大きくなります。
他に指定できる属性としては、私が試してみたものでは、top、left、borderWidth、fontSizeが可能でした。
DHTMLでスタイルを数値で指定できるものならOKではないでしょうか。
また、ブラウザによって指定方法が異なる透過度は、
opacity : { from : 1.0, to : 0 }
と指定することで、透過をサポートしているブラウザなら動作します。（数値は0から1.0の範囲）

第3引数はアニメーションの開始から終了までの時間で、秒単位で指定します。
この引数はオプションで、指定しなければデフォルトの1秒が適用されます。

第4引数はEasingというもので、例えば物にぶつかってバウンドするように、動きに少し変化をつけることが出来ます。
これもオプションで、指定しなければ変化はつきません。


アニメーションの定義はこれでOKですので、次はアニメーションの実行です。
実行は以下のように

anim.animate();

と、animateメソッドを呼び出すだけです。

ただ、例えば、要素の幅と高さをゼロにした後に要素を非表示にするなど、アニメーションの終了時に何か処理をしたい場合もあると思います。
そのような場合に、

anim.animate();
document.getElementById('id').style.visibility = 'hidden';

としても、思い通りの動きにはなりません。
animateメソッドは、内部ではタイマーを使ってアニメーションを実行しており、アニメーションの終了を 待たずに次の行が実行されてしまうためです。

したがって、終了時に何か処理をしたい場合は、以下のようにonCompleteのsubscribeメソッドを使って終了時の関数を指定する必要があります。

var animCompleted = function(){
    document.getElementById('id').style.visibility = 'hidden';
};
anim.onComplete.subscribe(animCompleted);

anim.animate();

また、サイズを小さくする場合はスタイルで overflow : hidden を指定しておかないと中身より小さくならないため 思い通りの動きになりませんので、注意してください。

Yahoo User Interface Libraryのエフェクトサンプル

先日はFlex2のエフェクトについて書きましたが、DHTMLでも動きのあるページを作ることは出来ます。
そのようなページの作成を補助してくれるJavaScriptライブラリは幾つかありますが、Yahoo User Interface Libraryを使った サンプルを少しご紹介したいと思います。

まずは、こちらからYahoo UI Libraryをダウンロードします。
ダウンロードしたファイルを解凍すると、examples、docs、buildというフォルダがあり、buildフォルダ以下にjsファイルがありますので、 これらを目的に応じてインクルードして使用します。
なお、yahoo フォルダの yahoo.js は常にインクルードしておきます。

エフェクトは、animation フォルダの中の animation.js 内のクラスを主に使用します。
どのようなことが出来るかはサンプルページを実際に見ていただいた方が早いと思いますので、興味のある方はサンプルページを見てみてください。
Yahoo User Interface Libraryのエフェクトサンプル

明日以降、クラスの使い方などを簡単に書いてみたいと思います。

Flex2のエフェクト

Flashの魅力といえば、やはり動きのあるページだと思います。
ただ、私のようなプログラマーにはなかなか難しかったのですが、Flex2では動きもプログラムでコントロールしやすくなっています。
以下は、mx.effects パッケージに用意されているエフェクトのいくつかを簡単に使ってみるサンプルです。
サンプルページ
example.mxml

• Resize
  スムーズにサイズを変更するエフェクトです。
  targetにエフェクトを適用する対象を指定します。
  durationにエフェクトの要する時間をミリ秒単位で指定します。
  widthFromに初期幅を、heightToに初期の高さを指定します。指定しなければ、現在の幅・高さになるようです。
  widthToに最終的な幅を、heightToに最終的な高さを指定します。
  

  <mx:Resize id="openEffect" duration="1000" target="{panel}" heightTo="300"  />

• Fade
  フェードイン・フェードアウトのエフェクトです。
  targetにエフェクトを適用する対象を指定します。
  durationにエフェクトの要する時間をミリ秒単位で指定します。
  alphaFromに初期透過度を、alphaToに最終的な透過度を指定します。（1.0で不透明、0.0で透明）
  対象が文字を含む場合、なぜか文字だけ透過されないようです。
  

  <mx:Fade id="fadeOutEffect" target="{panel}" duration="500"
      alphaFrom="1.0" alphaTo="0.0" />

• Blur
  残像のエフェクトです。
  targetにエフェクトを適用する対象を指定します。
  durationにエフェクトの要する時間をミリ秒単位で指定します。
  blurXFromに初期のぶれ幅を、BlurYFromに初期のぶれ高を指定します。
  blurXToに最終的なぶれ幅を、BlurYToに最終的なぶれ高を指定します。
  

  <mx:Blur id="blurEffect" target="{panel}" duration="2000"
      blurXFrom="10.0" blurXTo="0.0" blurYFrom="10.0" blurYTo="0.0" />

• Move
  スムーズに移動するエフェクトです。
  targetにエフェクトを適用する対象を指定します。
  durationにエフェクトの要する時間をミリ秒単位で指定します。
  xFromに初期X座標、yFromに初期Y座標を指定します。指定しなかった場合は、現在の座標が適用されます。
  xToに移動先のX座標、yToに移動先のY座標を指定します。
  

  <mx:Move id="moveEffect" target="{panel}" xTo="500" />

また、各エフェクトにはeasingFunctionというプロパティがあり、mx.effects.easingパッケージのクラスを使って値を適用すると さらに細かな動きを加えることが出来ます。
これについては、また後日サンプルを作成してみたいと思います。

ASP.NETでページの多言語化 Part2

先日はリソース名と登録名を指定して多言語化するサンプルを書きましたが、コントロールのプロパティに設定することを前提に リソースの名前を設定しておくことで暗黙的に行う方法を書いてみます。

リソースに関しては同じものを使用するのですが、"Name.Property"という規則にしたがって名前をつけておきます。
例えば、Label のTextプロパティに反映したい場合は、"Label1.Text" という名前（Label1の部分は何でも構いません）にしておくと、

<asp:Label Id="Label1" runat="server" meta:resourcekey="Label1" />

と記述して先日のサンプルと同様の結果を得ることが出来ます。
meta:resourcekey に指定する値は、"Name.Property" のNameの部分のみで、Propertyの部分に記述したプロパティに値が反映されるという仕組みです。
ですので、仮に開発の途中で言語によってCSSのクラス名を変えなくてはならなくなった場合でも、Label1.CssClassという名前でリソースを追加するだけで済む、 というメリットがあります。

リソースの値をコードで取得しなければならない場合もありますが、もちろんそれも可能で、ローカルリソースの場合はGetLocalResourceObjectメソッドを、 グローバルリソースの場合はGetGlobalResourceObjectメソッドを使用します。

string text1 = GetLocalResourceObject("Label1.Text").ToString();
string text2 = GetGlobalResourceObject("WebResources", "Label1.CssClass").ToString();

また、ブラウザの設定に関わらずユーザーが言語を選択できるようにしておく必要がありますが、そのような場合はPageクラスのInitializeCultureメソッドを オーバーライドして選択されたカルチャをページに反映させます。

protected override void InitializeCulture()
{
    this.Culture = "en-us";
    this.UICulture = "en-us";

    base.InitializeCulture();
}

最後に、先日のサンプルではPageディレクティブにUICulture="auto" Culture="auto" と書きましたが、全てのページこれを記述するのは面倒だという場合は、 Web.congifファイルに、

<configuration>
    ............
    <system.web>
        ................
        <globalization uiCulture="auto" culture="auto" />
    </system.web>
</configuration>

のように記述すればOKです。

ASP.NETでページの多言語化

開発するアプリケーションが多言語に対応しなれければならないこと、結構あるんじゃないでしょうか。
ブラウザの言語設定を英語に設定して、例えば、IEならMSN、FirefoxならGoogle にアクセスしてみると、自動的に英語のページが表示されます。
（ブラウザの言語設定は、IEの場合はインターネットオプション→全般タブ→言語、Firefoxの場合はオプション→詳細の一般タブ→言語設定からそれぞれ出来ます。）

ASP.NET(.NET Framework)は、このような多言語に対応する仕組みを備えています。
日本語だけでよいなら、ページに直接文字を書き込んだりすることも多いと思いますが、多言語化する場合はリソースを使用します。
ASP.NET 2.0 からは、App_CodeやApp_Dataなどシステムが使用する特殊なフォルダがありますが、同じ種類のフォルダとして App_GlobalResources と App_LocalResources があります。
ここにリソースファイル（.resxファイル）を作成し aspx ファイルに細工をすることで、特別なコードを書かなくとも割りと簡単に対応できるようになります。

まず、テスト用にDefault.aspxというページを作成します。
（Visual StudioでASP.NETのプロジェクトを作成すると初期ページとしてDefault.aspxというページがあると思います。）
次に、App_LocalResourcesフォルダを作成します。
この中に、ページと同じ名前のリソースファイル、この場合はDefault.aspx.resxを作成します。

このファイルにページに表示する単語や文章を登録していくのですが、このファイルは既定のリソースファイルとなりクライアントの言語設定に 一致するリソースファイルが見つからない場合に使用されます。
既定で日本語を表示したい場合は日本語を登録します。

単語を登録する場合は名前と値のペアで登録します。
ここでは、"Language"という名前、"日本語"という値を登録してみます。
さらに、もう1つ、Default.aspx.en-us.resx というファイルをApp_LocalResourcesに作成し、"Language"という名前、"English"という値を 同様に登録しておきます。
ファイル名の en-us 英語（米国）を意味し、クライアントのブラウザが英語の設定ならこちらのリソースが使われます。

次にDefault.aspxを開いて、

<asp:Label ID="Label1" Text="<%$ Resources:Language %>" runat="server" />

と書きます。
リソースファイルの指定の値を取り出すには、<%$ Resources:ResourceFile,Name %>と記述します。
ResourceFileにはリソースファイル名を指定するのですが必須ではなく、指定しなかった場合は、今回のようにページと同じ名前のローカルリソースが ある場合はそれが使われます。
最後に、Pageディレクティブに UICulture="auto" を追加します。
auto にしておくと、クライアントのブラウザの設定に応じて自動的にリソースが選ばれます。
このページをブラウザの言語設定を日本語及び英語に設定してそれぞれ見てみると、適切に言語が選択されているのが確認できると思います。

ただ、言語が変わって影響を受けるのは単純に言葉だけではありません。
例えば日付を表示する場合、日本語では yyyy/mm/dd という書式が一般的ですが、英語の場合は mm/dd/yyyy という書式になります。
これらについても、自動的に処理するために Default.aspxの Page ディレクティブに Culture="auto" も追加して、

<asp:Label ID="Label2" runat="server"><%= DateTime.Now %></asp:Label>

と書き加えてみてください。
日本語と英語の両方で見比べてみると、ちゃんと処理されているのが確認できると思います。

このように、特別にコードを書くことなく対応することが出来ます。
ただ、ページとリソースがペアになっているので、リソースファイルが大量に出来てしまうことになります。
まあ、多言語となると単語の管理が大変なのはある程度は仕方ないとは思いますが。

今回は、Text=<%$ Resources:Language %> という記述方法で単語を設定しましたが、もう1つ指定方法があります。
これについては、また後日書きたいと思います。

また、ローカルリソースはそのページ内でしか使用できませんので、例えばエラーメッセージなど複数のページで 使いまわしたいものを登録するのには向いていません。
そういった場合のためにグローバルリソースというものがあります。
使い方はローカルリソースと同じですので、それについても一緒に次回簡単に書いてみたいと思います。

AjaxでJSONを利用する

このところFlex2のネタばかりでしたので、久しぶりにJavaScriptのネタです。
AjaxでJSONを利用するサンプル

Ajaxでデータを受信する際、構造化されたデータが欲しい場合は多いです。
Ajaxの"x"はXMLのXなので、XMLデータを使うのが王道なのかもしれません。
実際、XMLデータは色々な環境で利用できますし、構造を定義しやすいのですが、JavaScript標準の機能のみで処理するのはとても面倒です。
このような場合、JSONというフォーマットが便利です。
JavaScriptでは、オブジェクトを生成する際に、

var data = 
{
    title : 'Title',
    url : 'URL'
};

のように記述することが出来ます。
この title や url は data のプロパティとなり、data.title や data["title"] のようにアクセスできます。
上記のサンプルの { から } までの部分の記述をJSONと呼び、JavaScriptではこの形式のデータをテキストとして受信した後、eval関数を使って 動的にオブジェクトを生成することが出来ます。

実際にAjaxで受信したJSONデータからオブジェクトを生成するサンプルは以下のようになります。
Ajaxの通信にはprototype.jsを利用しています。

var url = 'json.txt';
var opts = {
    method : 'get',
    onComplete : showData
};

new Ajax.Request(url, opts);


function showData(r)
{
    var data = eval('(' + r.responseText + ')');
    alert(data.title);
}

とても簡単ですね。
JSON を eval に渡す際には ( ) で囲む必要があります。

XMLほど汎用的でなくてよいと割り切るなら、JSONも検討してみてはいかがでしょうか。
ただし、JavaScriptとしてそのまま実行されてしまいますので、注意は必要です。

Flex2の入力値チェック

入力フォームの値をチェックする作業は必ず必要となるものですが、Flex2では入力値チェックを行うコンポーネントが mx.validatorsパッケージに用意されています。
今日は、その中から金額・日付・メールアドレスのチェックを行うサンプルを載せておきたと思います。
コントロール サンプルページ
example.mxml

各 Validator のサンプルの前に、まず Validator の主に使う共通項目として、source、property、trigger、triggerEvent、required、valid、invalid といったプロパティがありますので、これらの役割について簡単に書いておきます。

source ： TextInputなど入力値をチェックするコントロールのIDを指定します。
property ： source で指定したコントロールの値を取得するプロパティ（textなど）を指定します。
trigger ： チェックが実行されるきっかけとなるコントロール（Buttonなど）を指定します。
triggerEvent ： triggerに指定したコントロールのイベント（clickなど）を指定し、そのイベントでチェックが実行されます。
required ： sourceで指定したコントロールが入力必須かどうかをBooleanで指定します。
valid ： チェックが行われ、入力値が正当なものと判定された場合の処理を記述します。
invalid ： チェックが行われ、入力値が不正なものと判定された場合の処理を記述します。

では、以下サンプルです。

• CurrencyValidator
  金額の値をチェックする際に使用します。
  currencySymbol プロパティに、\や$などの通貨記号を指定します。
  3桁ごとに区切りのカンマが含まれていてもパスするようです。
  

  <mx:CurrencyValidator source="{currencyInput}" 
      property="text" currencySymbol="\" trigger="{currencyButton}"
      triggerEvent="click" valid="{Alert.show('OK');}" />

• DateValidator
  日付の値をチェックする際に使用します。
  inputFormat プロパティに、yyyy/mm/ddなどの入力フォーマットを指定します。
  / の代わりに - が入力されていてもパスするようです。
  

  <mx:DateValidator inputFormat="yyyy/mm/dd" source="{dateInput}" property="text"
      trigger="{dateButton}" triggerEvent="click" valid="{Alert.show('OK');}" />

• EmailValidator
  メールアドレスの値をチェックする際に使用します。
  

  <mx:EmailValidator source="{mailInput}" property="text"
      trigger="{mailButton}" triggerEvent="click" valid="{Alert.show('OK');}" />

この他には、クレジットカードの値をチェックする CreditCardValidator 、数値であるかをチェックする NumberValidator 、 電話番号をチェックする PhoneNumberValidator 、独自の正規表現を指定できる RegExpValidator など結構多彩に用意されています。
各 Validator 固有のプロパティはあるものの、使い方は上記のサンプルと同じような感覚で使用できると思いますので、チェックしてみてはいかがでしょうか。

なお、サンプルページで表示されるメッセージは英語ですが、日本語版のSDKではちゃんと日本語になると思います。
また、オリジナルのメッセージを指定することも出来ます。