Flex - Internacionalización
Flex proporciona dos formas de internacionalizar una aplicación Flex. Demostraremos el uso del tiempo de compilación.
| No Señor | Técnica y descripción |
|---|---|
| 1 | Compile Time Internationalization Esta técnica es la más frecuente y requiere muy poca sobrecarga en tiempo de ejecución; es una técnica muy eficaz para traducir tanto cadenas constantes como parametrizadas; la más sencilla de implementar. La internacionalización de Compile Time utiliza archivos de propiedades estándar para almacenar cadenas traducidas y mensajes parametrizados, y estos archivos de propiedades se compilan directamente en la aplicación. |
| 2 | Run Time Internationalization Esta técnica es muy flexible pero más lenta que la internacionalización de cadenas estáticas. Debe compilar los archivos de propiedades de localización por separado, dejarlos externos a la aplicación y cargarlos en tiempo de ejecución. |
Flujo de trabajo de internacionalización de una aplicación Flex
Paso 1: crear una estructura de carpetas
Cree una carpeta de configuración regional en la carpeta src del proyecto Flex. Este será el directorio principal para todos los archivos de propiedades de las configuraciones regionales que admitirá la aplicación. Dentro de la carpeta de configuración regional, cree subcarpetas, una para cada una de las configuraciones regionales de la aplicación que serán compatibles. La convención para nombrar una configuración regional es
{language}_{country code}Por ejemplo, en_US representa el inglés de los Estados Unidos. La configuración regional de_DE representa el alemán. La aplicación de muestra admitirá dos idiomas comunes: inglés y alemán.
Paso 2: crear archivos de propiedades
Cree un archivo de propiedades que contenga los mensajes que se utilizarán en la aplicación. Hemos creado unHelloWorldMessages.properties archivar bajo src > locale > en_US carpeta en nuestro ejemplo.
enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}Cree archivos de propiedades que contengan valores traducidos específicos de la configuración regional. Hemos creado unHelloWorldMessages.properties archivar bajo src > locale > de_DEcarpeta en nuestro ejemplo. Este archivo contiene traducciones en idioma alemán. _de especifica la configuración regional alemana y vamos a admitir el idioma alemán en nuestra aplicación.
Si está creando un archivo de propiedades usando Flash Builder, cambie la codificación del archivo a UTF-8. Seleccione el archivo y luego haga clic derecho en él para abrir su ventana de propiedades. Seleccione Codificación de archivo de texto como Other UTF-8. Aplicar y guardar el cambio.
enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}Paso 3: especificar las opciones del compilador
Haga clic con el botón derecho en su proyecto y seleccione Propiedades.
Seleccione Flex Compiler y agregue lo siguiente a la configuración de Argumentos adicionales del compilador:
-locale en_US de_DEHaga clic con el botón derecho en su proyecto y seleccione Propiedades.
Seleccione Flex Build Path y agregue lo siguiente a la configuración de Source Path:
src\locale\{locale}Ejemplo de internalización
Ahora sigamos los siguientes pasos para probar la técnica de internalización en una aplicación Flex:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo mxml modificado 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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Cambie el idioma usando el menú desplegable de idiomas y vea el resultado.
