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

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.

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.

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