Esempio: internazionalizzazione di un'applicazione di teleborsa

Flash Player 10.1 e versioni successive, Adobe AIR 2.0 e versioni successive

L'applicazione Global Stock Ticker recupera e visualizza dati fittizi relativi alle azioni in tre diversi mercati azionari: Stati Uniti, Giappone ed Europa. I dati vengono formattati in base alle convenzioni di diverse impostazioni internazionali.

In questo esempio vengono illustrate le seguenti funzioni del pacchetto flash.globalization:

  • Formattazione numeri basata sulle impostazioni internazionali

  • Formattazione valuta basata sulle impostazioni internazionali

  • Impostazione codice valuta ISO e simboli di valuta

  • Formattazione data basata su impostazioni internazionali

  • Recupero e visualizzazione delle abbreviazioni nome del mese appropriate

Per ottenere i file dell'applicazione per questo esempio, visitate la pagina www.adobe.com/go/learn_programmingAS3samples_flash_it . I file dell'applicazione Global Stock Ticker si trovano nella cartella Samples/GlobalStockTicker. L'applicazione è composta dai seguenti file:

File

Descrizione

GlobalStockTicker.mxml

o

GlobalStockTicker.fla

Interfaccia utente dell'applicazione per Flex (MXML) o Flash (FLA).

styles.css

Stili per l'interfaccia utente dell'applicazione (solo Flex).

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

Un componente MXML che visualizza un grafico di dati azione simulati, solo per Flex.

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

Classe di documento contenente la logica dell'interfaccia utente per l'applicazione (solo Flash).

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

Renderer di cella personalizzato per il componente DataGrid di Flash (solo Flash).

com/example/programmingas3/stockticker/FinancialGraph.as

Una classe ActionScript che disegna un grafico di dati azione simulati.

com/example/programmingas3/stockticker/Localizer.as

Una classe ActionScript che gestisce le impostazioni internazionali e la valuta, nonché la formattazione localizzata di numeri, importi valuta e date.

com/example/programmingas3/stockticker/StockDataModel.as

Una classe ActionScript che contiene tutti i dati campione per l'esempio Global Stock Ticker.

Nozioni fondamentali sull'interfaccia utente e i dati campione

Gli elementi dell'interfaccia utente principale dell'applicazione sono:

  • una casella combinata per la selezione delle impostazioni internazionali

  • una casella combinata per la selezione di un mercato

  • un DataGrid che visualizza i dati per sei società in ogni mercato

  • un grafico che mostra dati storici simulati per le azioni della società selezionata

L'applicazione memorizza tutti i suoi dati campione relativi a impostazioni internazionali, mercati e azioni società nella classe StockDataModel. In un'applicazione reale i dati vengono recuperati da un server e quindi memorizzati in una classe simile a StockDataModel. In questo esempio, tutti i dati sono hardcoded nella classe StockDataModel.

Nota: i dati visualizzati nel grafico finanziario non corrispondono necessariamente ai dati mostrati nel controllo DataGrid. Il grafico viene ridisegnato in modo casuale ogni volta che si seleziona un'azienda diversa. Viene fornito a solo scopo di illustrazione.

Impostazione delle impostazioni internazionali

Dopo alcune operazioni di configurazione iniziale, l'applicazione chiama il metodo Localizer.setLocale() per creare oggetti di formattazione per le impostazioni internazionali predefinite. Il metodo setLocale() viene anche chiamato ogni volta che l'utente seleziona un nuovo valore dalla casella combinata Impostazioni internazionali.

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

Il metodo setLocale() crea innanzitutto un oggetto LocaleID. Questo oggetto semplifica in seguito il recupero di dettagli relativi alle impostazioni internazionali effettive, se necessario.

Quindi crea nuovi oggetti NumberFormatter, CurrencyFormatter e DateTimeFormatter per le impostazioni internazionali. Dopo aver creato gli oggetti di formattazione chiama il metodo traceError() che visualizza messaggi di errore e avvertenza nella console se si verifica un problema con le impostazioni internazioni richieste. (Un'applicazione reale deve reagire in base a questi errori anziché semplicemente registrarli).

Dopo aver creato l'oggetto CurrencyFormatter, il metodo setLocale() imposta il codice valuta ISO, il simbolo di valuta e le proprietà fractionalDigits del formattatore sui valori determinati in precedenza. (Tali valori vengono impostati ogni volta che l'utente seleziona un nuovo mercato dalla casella combinata Mercati).

Dopo aver creato l'oggetto DateTimeFormatter, il metodo setLocale() recupera anche un array di abbreviazioni nomi mese localizzati.

Formattazione dei dati

I dati azione formattati vengono presentati in un controllo DataGrid. Ciascuna colonna DataGrid chiama una funzione etichetta che formatta il valore di colonna utilizzando l'oggetto di formattazione appropriato.

Nella versione Flash, ad esempio, il codice seguente imposta le colonne 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;

La versione Flex dell'esempio dichiara il suo DataGrid in MXML. Inoltre, definisce funzioni etichette simili per ogni colonna.

Le proprietà labelFunction fanno riferimento alle funzioni seguenti, che chiamano metodi di formattazione della classe 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); 
}

I metodi Localizer impostano quindi e chiamano i formattatori appropriati:

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