Exemple : Internationalisation d’une application de suivi des stocks

Flash Player 10.1 et les versions ultérieures, Adobe AIR 2.0 et les versions ultérieures

L’application Global Stock Ticker extrait et affiche des données boursières fictives dans trois Bourses distinctes : Etats-Unis, Japon et Europe. Elle formate les données en fonction des conventions de divers paramètres régionaux.

Cet exemple illustre les fonctions suivantes du package flash.globalization :

  • Formatage des nombres en fonction des paramètres régionaux

  • Formatage des devises en fonction des paramètres régionaux

  • Définition des codes ISO et des symboles de devise

  • Formatage de date en fonction des paramètres régionaux

  • Extraction et affichage des abréviations de noms de mois appropriées

Pour obtenir les fichiers d’application de cet exemple, voir www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application de Global Stock Ticker résident dans le dossier Samples/GlobalStockTicker. L’application se compose des fichiers suivants :

Fichier

Description

GlobalStockTicker.mxml

ou

GlobalStockTicker.fla

Interface utilisateur de l’application pour Flex (MXML) ou Flash (FLA).

styles.css

Styles associés à l’interface utilisateur de l’application (Flex uniquement)

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

Composant MXML qui affiche les données boursières simulées sous forme graphique (Flex uniquement)

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

Classe Document contenant la logique de l’interface utilisateur de l’application (Flash uniquement)

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

Fonctionnalité de rendu de cellule personnalisé associée au composant DataGrid de Flash (Flash uniquement)

com/example/programmingas3/stockticker/FinancialGraph.as

Classe ActionScript qui illustre les données boursières simulées sous forme graphique

com/example/programmingas3/stockticker/Localizer.as

Classe ActionScript qui gère les paramètres régionaux et les devises et traite le formatage localisé des nombres, montants en devise et dates

com/example/programmingas3/stockticker/StockDataModel.as

Classe ActionScript qui stocke toutes les exemples de données de l’application Global Stock Ticker

Présentation de l’interface utilisateur et des exemples de données

Les principaux éléments de l’interface utilisateur de l’application sont les suivants :

  • Liste déroulante permettant de sélectionner les paramètres régionaux

  • Liste déroulante permettant de sélectionner une Bourse

  • Grille contenant les données de six sociétés par Bourse

  • Graphique illustrant les données historiques simulées des actions de la société sélectionnée

L’application stocke tous les exemples de données relatifs aux paramètres régionaux, aux Bourses et aux actions des sociétés dans la classe StockDataModel. Une application réelle extrairait les données d’un serveur et les stockerait dans une classe telle que StockDataModel. Dans cet exemple, toutes les données sont codées en dur dans la classe StockDataModel.

Remarque : les données affichées dans le graphique financier ne correspondent pas nécessairement pas aux données du contrôle grille de données. Le graphique est actualisé à chaque fois qu’une autre société est sélectionnée. Il est proposé à titre d’illustration uniquement.

Définition des paramètres régionaux

Au terme de la phase de configuration initiale, l’application appelle la méthode Localizer.setLocale() pour créer des objets de formatage associés aux paramètres régionaux par défaut. La méthode setLocale() est également appelée à chaque fois que l’utilisateur sélectionne une nouvelle valeur dans la liste déroulante de paramètres régionaux.

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

La méthode setLocale() commence par créer un objet LocaleID. Cet objet simplifie l’obtention ultérieure d’informations détaillées sur les paramètres régionaux en tant que tels, le cas échéant.

La méthode crée ensuite des objets NumberFormatter, CurrencyFormatter et DateTimeFormatter associés aux paramètres régionaux. Au terme de la création de chaque objet de formatage, elle appelle la méthode traceError(). Cette méthode affiche des messages d’erreur et d’avertissement sur la console en cas de problème au niveau des paramètres régionaux requis. (Une application réelle devrait réagir suite à des erreurs de ce type au lieu de se contenter de les suivre.)

Une fois l’objet CurrencyFormatter créé, la méthode setLocale() définit le code ISO de la devise, le symbole de la devise et les propriétés fractionalDigits de la fonctionnalité de formatage sur les valeurs précédemment déterminées. (Ces valeurs sont définies à chaque fois que l’utilisateur sélectionne une nouvelle option dans la liste déroulante de marchés.)

Une fois l’objet DateTimeFormatter créé, la méthode setLocale() extrait également un tableau d’abréviations de noms de mois localisés.

Formatage des données

Les données boursières formatées sont affichées dans un contrôle de type grille de données. Chaque colonne de la grille de données appelle une fonction d’étiquette qui formate la valeur de la colonne par le biais de l’objet de formatage approprié.

Dans la version Flash, par exemple, le code suivant configure les colonnes de la grille de données :

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 version Flex de l’exemple déclare sa grille de données en MXML. Elle définit également des fonctions d’étiquette similaires pour chaque colonne.

Les propriétés labelFunction font référence aux fonctions suivantes, qui appellent les méthodes de formatage de la 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); 
}

Les méthodes Localizer configurent et appellent ensuite les fonctionnalités de formatage appropriées :

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