Exempel: Internationalisering av ett börskursprogram

Flash Player 10.1 och senare, Adobe AIR 2.0 och senare

Programmet Global Stock Ticker hämtar och visar fiktiva data om börskurserna för tre olika börsmarknader: USA, Japan och Europa. Dessa data formateras i programmet efter konventionerna som gäller för de olika språkområdena.

I det här exemplet beskrivs följande funktioner i flash.globalization-paketet:

  • Språkområdeskänslig talformatering

  • Språkområdeskänslig valutaformatering

  • Ange ISO-valutakod och valutasymboler

  • Språkområdeskänslig datumformatering

  • Hämta och visa korrekta namn och förkortningar för månader

Programfilerna för det här exemplet finns på www.adobe.com/go/learn_programmingAS3samples_flash_se . Filerna för programmet Global Stock Ticker finns i mappen Samples/GlobalStockTicker. Programmet består av följande filer:

Fil

Beskrivning

GlobalStockTicker.mxml

eller

GlobalStockTicker.fla

Användargränssnittet för programmet för Flex (MXML) eller Flash (FLA).

styles.css

Format för programmets användargränssnitt (endast Flex).

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

En MXML-komponent som visar ett diagram över fiktiva börskursdata (endast Flex).

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

Dokumentklass som innehåller användargränssnittslogiken för programmet (endast Flash).

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

En anpassad cellrenderare för Flash-komponenten DataGrid (endast Flash).

com/example/programmingas3/stockticker/FinancialGraph.as

En ActionScript-klass som ritar ett diagram över fiktiva börskursdata.

com/example/programmingas3/stockticker/Localizer.as

En ActionScript-klass som hanterar språkområdet och valutan samt den lokaliserade formateringen av tal, valutabelopp och datum.

com/example/programmingas3/stockticker/StockDataModel.as

En ActionScript-klass som innehåller alla exempeldata för exemplet Global Stock Ticker.

Förstå användargränssnittet och exempeldata

Elementen i programmets huvudanvändargränssnitt är:

  • en kombinationsruta för val av språkområde

  • en kombinationsruta för val av marknad

  • en DataGrid som visar data för sex företag i varje marknad

  • ett diagram som visar fiktiva historiska data för det valda företagets börskurs

Alla exempeldata om språkområden, marknader och företagens börskurser lagras i klassen StockDataModel. Om programmet skulle vara på riktigt skulle data hämtas från en server och sedan lagras i en klass som exempelvis StockDataModel. I det här exemplet är alla data hårdkodade i klassen StockDataModel.

Obs! De data som visas i diagrammet matchar inte nödvändigtvis de data som visas i kontrollen DataGrid. Diagrammet ritas slumpmässigt om varje gång ett annat företag väljs. Detta är endast ett exempel.

Ange språkområde

Efter en inledande konfiguration anropar programmet metoden Localizer.setLocale() för att skapa formateringsobjekt för standardspråkområdet. Metoden setLocale() anropas också varje gång användaren väljer ett nytt värde i kombinationsrutan för språkområde.

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

Först skapar metoden setLocale() ett LocaleID-objekt. Detta objekt gör det lättare att få information om det faktiska språkområdet senare om det behövs.

Sedan skapas nya NumberFormatter-, CurrencyFormatter- och DateTimeFormatter-objekt för språkområdet. Sedan varje formatter-objekt har skapats anropas metoden traceError(). Denna metod visar fel- och varningsmeddelanden i konsolen om det finns några problem med det aktuella språkområdet. (I ett verkligt program skulle dessa fel åtgärdas i stället för att endast spåras).

När CurrencyFormatter-objektet har skapats anger metoden setLocale() formateringens ISO-valutakod, valutasymbol och fractionalDigits-egenskaper för tidigare angivna värden. (Dessa värden anges varje gång användaren väljer en annan marknad i kombinationsrutan för marknader).

När DateTimeFormatter-objektet har skapats hämtar metoden setLocale() även en matris av lokaliserade förkortningar på månader.

Formatera data

Formaterade börskursdata visas i kontrollen DataGrid. Varje DataGrid-kolumn anropar en etikettfunktion som formaterar kolumnvärdet med lämpligt formateringsobjekt.

I Flash-versionen anges DataGrid-kolumnerna med följande kod:

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;

I Flex-versionen av exemplet deklareras DataGrid i MXML. Liknande etikettfunktioner definieras också för varje kolumn.

Egenskaperna för labelFunction avser följande funktioner, som anropar formateringsmetoder för klassen 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-metoderna anger sedan och anropar lämplig formatering:

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