範例:國際化股票行情應用程式

Flash Player 10.1 以及更新的版本,Adobe AIR 2.0 以及更新的版本

Global Stock Ticker 應用程式擷取和顯示三個不同股票市場 (美國、日本和歐洲) 的虛構股票資料。其中會依據各個地區設定的慣例,將資料格式化。

這個範例說明 flash.globalization 套件的下列功能:

  • 區分地區設定的數字格式

  • 區分地區設定的貨幣格式

  • 設定貨幣 ISO 代碼和貨幣符號

  • 區分地區設定的日期格式

  • 擷取和顯示適當的月份名稱縮寫

若要取得此樣本的應用程式檔案,請參閱 www.adobe.com/go/learn_programmingAS3samples_flash_tw。您可以在 Samples/GlobalStockTicker 資料夾中找到 Global Stock Ticker 應用程式檔案。此應用程式是由下列檔案組成:

檔案

說明

GlobalStockTicker.mxml

GlobalStockTicker.fla

應用程式使用者介面,在 Flash 中為 FLA,在 Flex 中為 MXML。

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

ActionScript 類別,用以保留 Global Stock Ticker 範例的所有範例資料。

瞭解使用者介面和範例資料

應用程式的主要使用者介面元素如下:

  • 選取地區設定的下拉式清單方塊

  • 選取市場的下拉式清單方塊

  • DataGrid,顯示每個市場中六家公司的資料

  • 圖表,顯示所選取公司之股票的模擬歷程資料

這個應用程式會將它的所有地區設定、市場和公司股票範例資料儲存至 StockDataModel 類別。實際的應用程式會從伺服器擷取資料,然後將它儲存至 StockDataModel 之類的類別。在這個範例中,所有資料都是硬式編碼至 StockDataModel 類別。

備註: 財務圖表中顯示的資料不一定符合 DataGrid 控制項中顯示的資料。每次選取不同的公司時,就會隨機重新繪製此圖表。這僅供說明之用。

設定地區設定

在部分初始設定工作之後,應用程式會呼叫 Localizer.setLocale() 方法以建立預設地區設定的格式化程式物件。每次使用者從「地區設定」下拉式清單方塊中選取新值時,也會呼叫 setLocale() 方法。

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 下拉式清單方塊中選取新市場時,都會設定那些值)。

建立 DateTimeFormatter 物件之後,setLocale() 方法也會擷取當地語系化月份名稱縮寫的陣列。

格式化資料

格式化的股票資料是以 DataGrid 控制項呈現。DataGrid 欄都會呼叫 label 函數,以使用適當的格式化程式物件來格式化欄值。

例如,在 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,也會為每欄定義類似的 label 函數。

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); 
} 
|