Flex - Internazionalizzazione

Flex offre due modi per internazionalizzare un'applicazione Flex, dimostreremo l'uso dell'Internazionalizzazione in fase di compilazione che è più comunemente utilizzata tra i progetti.

Suor n Tecnica e descrizione
1

Compile Time Internationalization

Questa tecnica è la più diffusa e richiede un sovraccarico minimo in fase di esecuzione; è una tecnica molto efficiente per tradurre stringhe sia costanti che parametrizzate; più semplice da implementare. L'internazionalizzazione in fase di compilazione utilizza file delle proprietà standard per archiviare le stringhe tradotte e i messaggi parametrizzati e questi file delle proprietà vengono compilati direttamente nell'applicazione.
2

Run Time Internationalization

Questa tecnica è molto flessibile ma più lenta dell'internazionalizzazione delle stringhe statiche. È necessario compilare i file delle proprietà di localizzazione separatamente, lasciarli esterni all'applicazione e caricarli in fase di esecuzione.

Flusso di lavoro per l'internazionalizzazione di un'applicazione Flex

Passaggio 1: creare la struttura delle cartelle

Crea una cartella delle impostazioni locali nella cartella src del progetto Flex, che sarà la directory principale per tutti i file delle proprietà per le impostazioni locali supportate dall'applicazione. All'interno della cartella delle impostazioni locali, creare sottocartelle, una per ciascuna delle impostazioni locali dell'applicazione da supportare. La convenzione per la denominazione di una locale è

{language}_{country code}

Ad esempio, en_US rappresenta l'inglese degli Stati Uniti. La locale de_DE rappresenta il tedesco. L'applicazione di esempio supporterà due lingue comuni: inglese e tedesco.

Passaggio 2: creare file delle proprietà

Crea il file delle proprietà contenente i messaggi da utilizzare nell'applicazione. Abbiamo creato un fileHelloWorldMessages.properties file sotto src > locale > en_US cartella nel nostro esempio.

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

Crea file delle proprietà contenenti valori tradotti specifici per le impostazioni internazionali. Abbiamo creato un fileHelloWorldMessages.properties file sotto src > locale > de_DEcartella nel nostro esempio. Questo file contiene traduzioni in lingua tedesca. _de specifica la lingua tedesca e supporteremo la lingua tedesca nella nostra applicazione.

Se stai creando un file delle proprietà utilizzando Flash Builder, modifica la codifica del file in UTF-8, seleziona il file e fai clic con il pulsante destro del mouse per aprire la finestra delle proprietà. Seleziona Codifica file di testo come Other UTF-8. Applica e salva la modifica.

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

Passaggio 3: specificare le opzioni del compilatore

  • Fare clic con il pulsante destro del mouse sul progetto e selezionare Proprietà.

  • Seleziona Flex Compiler e aggiungi quanto segue alle impostazioni Additional Compiler Arguments -

-locale en_US de_DE

  • Fare clic con il pulsante destro del mouse sul progetto e selezionare Proprietà.

  • Seleziona Flex Build Path e aggiungi quanto segue alle impostazioni Source Path -

src\locale\{locale}

Esempio di internalizzazione

Ora seguiamo i seguenti passaggi per testare la tecnica di internalizzazione in un'applicazione Flex:

Passo Descrizione
1 Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2 Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
   <s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx" 
   minWidth = "500" minHeight = "500">
   
   <fx:Metadata>
      [ResourceBundle("HelloWorldMessages")]
   </fx:Metadata> 
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         [Bindable]
         private var locales:Array =  [{label:"English", locale:"en_US"},
            {label:"German", locale:"de_DE"}];

         private function comboChangeHandler():void {
           resourceManager.localeChain = [localeComboBox.selectedItem.locale];
         }

         protected function clickMe_clickHandler(event:MouseEvent):void {
            var name:String = txtName.text;
            var inputArray:Array = new Array();
            inputArray.push(name);
            Alert.show(resourceManager.getString('HelloWorldMessages'
               ,'greeting',inputArray));
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
	  horizontalAlign = "center" verticalAlign = "middle">
         
         <s:Label id = "lblHeader" fontSize = "40" 
            color = "0x777777" 
            text  = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
            styleName = "heading" width = "90%" height = "150" />
         
         <s:Panel width = "300" height = "150">
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
                  paddingTop = "2" />			
               <s:TextInput id = "txtName" />
            </s:HGroup>
            
            <s:Button 
               label = "{resourceManager.getString('HelloWorldMessages','clickMe')}" 
               click = "clickMe_clickHandler(event)" right = "10" />	
         </s:Panel>
         
         <mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
            change = "comboChangeHandler()" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]

Cambia la lingua utilizzando il menu a discesa della lingua e guarda il risultato.