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

» 2007年11月21日 00時00分 公開
[成瀬勉クラスメソッド株式会社]
前のページへ 1|2       

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

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

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の開発依頼や転職希望の方はコチラ。最近は会社説明会やセミナーもやっています。



前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。