Ejemplo: Internacionalización de una aplicación de bolsa

Flash Player 10.1 y posterior, Adobe AIR 2.0 y posterior

La aplicación Global Stock Ticker recupera y muestra datos ficticios sobre las acciones en tres mercados distintos: Estados Unidos, Japón y Europa. Aplica formato a los datos según las convenciones de distintas configuraciones regionales.

Este ejemplo ilustra las siguientes funciones del paquete flash.globalization:

  • Formato de números según configuración regional

  • Formato de divisas según configuración regional

  • Definición del código ISO de divisa y de símbolos de divisa

  • Formato de fechas según configuración regional

  • Recuperación y visualización de abreviaturas correctas de nombres de meses

Para obtener los archivos de la aplicación de este ejemplo, consulte www.adobe.com/go/learn_programmingAS3samples_flash_es. Los archivos de la aplicación Global Stock Ticker se encuentran en la carpeta Samples/GlobalStockTicker. La aplicación consta de los siguientes archivos:

Archivo

Descripción

GlobalStockTicker.mxml

o

GlobalStockTicker.fla

La interfaz de usuario de la aplicación para Flex (MXML) o Flash (FLA).

styles.css

Estilos de la interfaz de usuario de la aplicación (solo Flex).

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

Un componente MXML que muestra un gráfico con la simulación de los datos de las acciones (solo Flex).

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

Clase de documento que contiene la lógica de la interfaz de usuario para la aplicación (solo Flash).

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

Procesador de celdas personalizado para el componente DataGrid de Flash (solo Flash).

com/example/programmingas3/stockticker/FinancialGraph.as

Clase de ActionScript que dibuja un gráfico con la simulación de los datos de las acciones.

com/example/programmingas3/stockticker/Localizer.as

Clase de ActionScript que administra la configuración regional y la divisa, y gestiona el formato localizado de números, cantidades de divisa y fechas.

com/example/programmingas3/stockticker/StockDataModel.as

Clase de ActionScript que guarda los datos de muestra del ejemplo de la aplicación Global Stock Ticker.

Aspectos básicos de la interfaz de usuario y los datos de muestra

Los elementos principales de la interfaz de usuario de la aplicación son:

  • un cuadro combinado para seleccionar una configuración regional

  • un cuadro combinado para seleccionar un mercado

  • un objeto DataGrid que muestra datos de seis empresas en cada mercado

  • un gráfico que muestre la simulación de datos históricos de las acciones de la empresa seleccionada

La aplicación guarda todos estos datos de muestra sobre las configuraciones regionales, los mercados y las acciones de las empresas en la clase StockDataModel. Una aplicación real como esta recuperaría datos de un servidor y los guardaría en una clase como StockDataModel. En este ejemplo, todos los datos se incluyen en la clase StockDataModel en el código.

Nota: los datos visualizados en el gráfico financiero no coinciden necesariamente con los del control DataGrid. El gráfico se dibuja de nuevo de forma aleatoria cada vez que se selecciona una empresa. Se ha diseñado así únicamente con fines ilustrativos.

Definición de la de configuración regional

Tras cierto trabajo inicial de configuración, la aplicación llama al método Localizer.setLocale() para crear objetos de formato para la configuración regional predeterminada. También se llama al método setLocale() cada vez que el usuario selecciona un nuevo valor en el cuadro combinado de configuración regional.

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

Primero, el método setLocale() crea un objeto LocaleID. Este objeto facilita la obtención de detalles sobre la configuración regional real más adelante, si fuera necesario.

A continuación, crea nuevos objetos NumberFormatter, CurrencyFormatter y DateTimeFormatter para la configuración regional. Tras crear cada objeto formatter, llama al método traceError(). Este método muestra mensajes de error y de advertencia en la consola si se detecta un problema con la configuración regional solicitada. (Una aplicación real iniciaría alguna acción a partir de estos errores, no se limitaría a detectarlos).

Una vez creado el objeto CurrencyFormatter, el método setLocale() define el código ISO de divisa de formato, el símbolo de divisa y las propiedades fractionalDigits en valores determinados previamente. (Estos valores se establecen cada vez que el usuario selecciona un mercado en el cuadro combinado de mercados).

Tras crear el objeto DateTimeFormatter, el método setLocale() también recupera un conjunto de abreviaturas de nombres de meses localizados.

Aplicación de formato a los datos

Los datos de las acciones con formato se presentan en un control DataGrid. Cada columna de DataGrid llama a una función label que aplica formato al valor de la columna con el objeto de formato apropiado.

En la versión para Flash, por ejemplo, el siguiente código establece las columnas 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 versión para Flex del ejemplo declara su DataGrid en MXML. También define funciones label similares para cada columna.

Las propiedades labelFunction hacen referencia a las siguientes funciones, que llaman a métodos de formato de la clase 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); 
}

Seguidamente, los métodos Localizer establecen y llaman a los objetos de formato apropiados:

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