バリデータとフォーマッタで“使える”Flexアプリを作ろう：現場で使えるFlex実践テクニック（5）（2/2 ページ）

» 2007年11月21日 00時00分公開

[成瀬勉，クラスメソッド株式会社]

文字列表現を柔軟に指定できるフォーマッタ

　アプリケーションにおいて、画面上に表示されるデータの表現はユーザーが見て分かりやすくなければなりません。また、状況や目的に応じて表現を変える必要があります。そのために必要なフォーマッタとは、あるデータに対する文字列表現を柔軟に指定できるようにした機構です。

■ Flexにおける日付けの表示

　例えば、日付けというデータを考えてみましょう。Flexにおける日付けはデータ上、Date型として扱います。これをFlexのデフォルトの文字列表現にすると、以下のようになります。

サンプル4　

FormatterSample1.mxml

<?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

          layout="vertical"
        >

        

            <mx:Script>

              <![CDATA[

                    [Bindable]

                      //実行時の日付

                        private var currentDate:Date = new Date(); 

                  

                      ]]>

                        </mx:Script>

                      

                          <mx:Label text="{currentDate}" />

                        

          </mx:Application>

　ここで、データ上はDate型で扱いつつ、画面上の表示は、例えば「2007/11/11 (日) 18:01」にしたいと思ったときにフォーマッタを利用できます。

■ 日付けのフォーマッタ：DateFormatter

　フォーマッタはあるデータの文字列表現への変換方法を定義します。日付けであれば、DateFormatterというフォーマッタが標準で用意されています。

FormatterSample2.mxml

<?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

           layout="vertical" >

            <mx:Script>

              <![CDATA[

                    [Bindable]

                      private var currentDate:Date = new Date();

                

                    ]]>

                      </mx:Script>

                    

                        <mx:DateFormatter id="dateFormatter" 

                              formatString="YYYY/MM/DD (EEE) JJ:NN" />

                        

                            <mx:Label text="{dateFormatter.format(currentDate)}" />

                          

                          </mx:Application>

　「2007/11/11 (日) 18:01」という形式で表示するために、formatStringにYYYY/MM/DD (EEE) JJ:NNという値を設定しています。Y、M、D、E、J、NといったアルファベットはDateFormatterで定義された変換方法に基づいて記述することで、Date型から年や日などの情報に置き換わります。

サンプル5　

　実際に変換を行うには、DateFormatterのformatメソッドにDateの値を渡すと、変換後の文字列を受け取ることができます。DateFormatterの書式についての詳細は「Adobe Flex 2 ヘルプ DateFormatter クラスの使用 Flex 2.01」を参照してください。

■ 金額のフォーマッタ：CurrencyFormatter

　日付以外にも金額や電話番号などを表現するのに適したフォーマッタが用意されています。金額であれば、CurrencyFormatterを用いて、「\」や「＄」などの単位表示や、カンマ区切りの有無などの設定ができます。

サンプル6　

FormatterSample3.mxml

<?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

          layout="vertical">

        

            <mx:CurrencyFormatter id="currencyFormatter"

                  currencySymbol="￥" 

                />

              

                  <mx:TextInput id="input" />

                    <mx:Label text="{currencyFormatter.format(input.text)}" />

                  </mx:Application>

“使える”アプリには2重チェックが必要

　前述のとおり、クライアント側でデータの検証を行うことにより、サーバリクエストを軽減できます。しかし、クライアント側で検証を行えば、サーバ側での検証は必要ないかといえば、そうではなく、サーバ側での検証はいままでとまったく同じように必要となるでしょう。

　クライアントでの検証は補助的なもので、データのフォーマットについて制限を設けるものですが、実質的なデータの内容についての検証はサーバ側で行う必要があるからです。

プロフィール

成瀬　勉（なるせつとむ）
クラスメソッド株式会社　エンタープライズサービス部門アーキテクト

Macromedia FLASH MX 2004 Developer認定技術者
FlashエンジニアとしてWeb製作を経たのちWebアプリケーション開発に携わる。FlexやWPFなどのRIA開発および技術調査を日々行っている。クラスメソッド株式会社での主な開発実績は、旭化成の電子ファイリングシステム、ひまわり証券のオンライントレードシステム、ベルシステム24の営業支援システムなど。
ブログ（C:\narun）も更新中。
FlexやAIRの開発依頼や転職希望の方はコチラ。最近は会社説明会やセミナーもやっています。

「次回」へ

「現場で使えるFlex実践テクニック」バックナンバー