例:相場表示アプリケーションの国際化

Flash Player 10.1 以降、Adobe AIR 2.0 以降

Global Stock Ticker アプリケーションは、米国、日本、欧州という 3 つの異なる株式市場の株式に関する架空のデータを取得して表示します。このアプリケーションは、様々なロケールの規則に応じてデータの形式を設定します。

この例は、flash.globalization パッケージの次の機能を示しています。

  • ロケールに対応した数値形式の設定

  • ロケールに対応した通貨形式の設定

  • 通貨の ISO コードおよび通貨記号の設定

  • ロケールに対応した日付形式の設定

  • 月の名前の適切な略語の取得と表示

このサンプルのアプリケーションのファイルを入手するには、 www.adobe.com/go/learn_programmingAS3samples_flash_jp を参照してください。 Global Stock Ticker アプリケーションファイルは、Samples/GlobalStockTicker フォルダーにあります。このアプリケーションは次のファイルで構成されています。

ファイル

説明

GlobalStockTicker.mxml

または

GlobalStockTicker.fla

アプリケーションのユーザーインターフェイスです(Flex 用の MXML、または Flash 用の FLA)。

styles.css

アプリケーションユーザーインターフェイスのスタイルです(Flex 専用)。

com/example/programmingas3/stockticker/flex/FinGraph.mxml

シミュレーションされた株式データのチャートを表示する MXML コンポーネントです(Flex 専用)。

com/example/programmingas3/stockticker/flash/GlobalStockTicker.as

アプリケーション用のユーザーインターフェイスロジックを含んだドキュメントクラスです(Flash 専用)。

comp/example/programmingas3/stockticker/flash/RightAlignedColumn.as

Flash DataGrid コンポーネントのカスタムセルレンダラーです(Flash 専用)。

com/example/programmingas3/stockticker/FinancialGraph.as

シミュレーションされた株式データのチャートを描画する ActionScript クラスです。

com/example/programmingas3/stockticker/Localizer.as

ロケールおよび通貨を管理し、数字、通貨額、日付のローカライズされた形式を処理する ActionScript クラスです。

com/example/programmingas3/stockticker/StockDataModel.as

Global Stock Ticker の例のすべてのサンプルデータを保持する ActionScript クラスです。

ユーザーインターフェイスとサンプルデータについて

アプリケーションのメインユーザーインターフェイスの要素は次のとおりです。

  • ロケールを選択するコンボボックス

  • 市場を選択するコンボボックス

  • 各市場の 6 つの企業のデータを表示する DataGrid

  • 選択された企業の株式のシュミレーションされた履歴データを表示するチャート

このアプリケーションは、ロケール、市場、企業の株式に関するすべてのサンプルデータを StockDataModel クラスに格納します。本物のアプリケーションでは、サーバーからデータを取得し、そのデータを StockDataModel などのクラスに格納します。この例では、すべてのデータが StockDataModel クラスにハードコーディングされています。

注意: 財務チャートに表示されるデータは、DataGrid コントロールに表示されるデータと一致するとは限りません。このチャートは、別の企業が選択されるたびにランダムに再描画されます。これは機能を示すことのみを目的としています。

ロケールの設定

アプリケーションは、初期的な設定作業の後に、Localizer.setLocale() メソッドを呼び出して、デフォルトロケールのフォーマッターオブジェクトを作成します。また、setLocale() メソッドは、ユーザーが「Locale」コンボボックスから新しい値を選択するたびに呼び出されます。

public function setLocale(newLocale:String):void 
{ 
    locale  = new LocaleID(newLocale); 
 
    nf = new NumberFormatter(locale.name); 
    traceError(nf.lastOperationStatus, "NumberFormatter", nf.actualLocaleIDName); 
 
    cf = new CurrencyFormatter(locale.name); 
    traceError(cf.lastOperationStatus, "CurrencyFormatter", cf.actualLocaleIDName); 
    symbolIsSafe = cf.formattingWithCurrencySymbolIsSafe(currentCurrency); 
    cf.setCurrency(currentCurrency, currentSymbol); 
    cf.fractionalDigits = currentFraction; 
 
    df = new DateTimeFormatter(locale.name, DateTimeStyle.LONG, DateTimeStyle.SHORT); 
    traceError(df.lastOperationStatus, "DateTimeFormatter", df.actualLocaleIDName); 
    monthNames = df.getMonthNames(DateTimeNameStyle.LONG_ABBREVIATION); 
} 
 
public function traceError(status:String, serviceName:String, localeID:String) :void 
{ 
    if(status != LastOperationStatus.NO_ERROR) 
    { 
        if(status == LastOperationStatus.USING_FALLBACK_WARNING) 
        { 
            trace("Warning - Fallback locale ID used by " 
                    + serviceName + ": " + localeID); 
        } 
        else if (status == LastOperationStatus.UNSUPPORTED_ERROR) 
        { 
            trace("Error in " + serviceName + ": " + status); 
            //abort application 
            throw(new Error("Fatal error", 0)); 
        } 
        else 
        { 
            trace("Error in " + serviceName + ": " + status); 
        } 
    } 
    else 
    { 
        trace(serviceName + " created for locale ID: " + localeID); 
    } 
}

最初に、setLocale() メソッドは LocaleID オブジェクトを作成します。このオブジェクトにより、必要に応じて、後で実際のロケールに関する詳細を取得するのが簡単になります。

次に、このメソッドはロケール用の新しい NumberFormatter、CurrencyFormatter、DateTimeFormatter の各オブジェクトを作成します。各フォーマッターオブジェクトを作成した後、traceError() メソッドを呼び出します。このメソッドは、要求されたロケールに問題があると、コンソールにエラーおよび警告メッセージを表示します(本物のアプリケーションでは、問題をトレースするだけではなく、このようなエラーに基づいて対応する必要があります)。

CurrencyFormatter オブジェクトの作成後、setLocale() メソッドはフォーマッターの通貨 ISO コード、通貨記号、fractionalDigits のプロパティを、それまでに決定された値に設定します(これらの値は、ユーザーが「Markets」コンボボックスから新しい市場を選択するたびに設定されます)。

setLocale() メソッドは、DateTimeFormatter オブジェクトを作成した後に、ローカライズされた月の名前の略語の配列を取得します。

データの形式の設定

形式を設定された株式データは DataGrid コントロールに表示されます。DataGrid 列は、それぞれ、適切なフォーマッターオブジェクトを使用して列の値の形式を設定するラベル関数を呼び出します。

例えば、Flash バージョンでは、次のコードは DataGrid 列を設定します。

var col1:DataGridColumn = new DataGridColumn("ticker"); 
col1.headerText = "Company"; 
col1.sortOptions = Array.NUMERIC; 
col1.width = 200; 
 
var col2:DataGridColumn = new DataGridColumn("volume"); 
col2.headerText = "Volume"; 
col2.width = 120; 
col2.cellRenderer = RightAlignedCell; 
col2.labelFunction = displayVolume; 
 
var col3:DataGridColumn = new DataGridColumn("price"); 
col3.headerText = "Price"; 
col3.width = 70; 
col3.cellRenderer = RightAlignedCell; 
col3.labelFunction = displayPrice; 
 
var col4:DataGridColumn = new DataGridColumn("change"); 
col4.headerText = "Change"; 
col4.width = 120; 
col4.cellRenderer = RightAlignedCell; 
col4.labelFunction = displayPercent;

例の Flex バージョンは、MXML で DataGrid を宣言します。また、各列用に類似したラベル関数を定義します。

labelFunction プロパティは次の関数を参照します。これらの関数は、Localizer クラスの形式の設定メソッドを呼び出します。

private function displayVolume(item:Object):String 
{   
    return localizer.formatNumber(item.volume, 0); 
} 
     
private function displayPercent(item:Object):String 
{ 
       return localizer.formatPercent(item.change )  ; 
} 
   
  private function displayPrice(item:Object):String 
{ 
    return localizer.formatCurrency(item.price); 
}

次に、Localizer メソッドは、適切なフォーマッターを設定して呼び出します。

public function formatNumber(value:Number, fractionalDigits:int = 2):String 
{ 
    nf.fractionalDigits = fractionalDigits; 
    return nf.formatNumber(value); 
} 
 
public function formatPercent(value:Number, fractionalDigits:int = 2):String 
{ 
    // HACK WARNING: The position of the percent sign, and whether a space belongs 
    // between it and the number, are locale-sensitive decisions. For example, 
    // in Turkish the positive format is %12 and the negative format is -%12. 
    // Like most operating systems, flash.globalization classes do not currently 
    // provide an API for percentage formatting. 
    nf.fractionalDigits = fractionalDigits; 
    return nf.formatNumber(value) + "%"; 
} 
 
public function formatCurrency(value:Number):String 
{ 
    return cf.format(value, symbolIsSafe); 
} 
 
public function formatDate(dateValue:Date):String 
{ 
    return df.format(dateValue); 
} 
|