Flex - Internasionalisasi

Flex menyediakan dua cara untuk menginternasionalkan aplikasi Flex, Kami akan mendemonstrasikan penggunaan Waktu kompilasi Internasionalisasi yang paling umum digunakan di antara proyek.

Sr Tidak	Teknik & Deskripsi
1	Compile Time Internationalization Teknik ini paling umum dan memerlukan sedikit biaya tambahan saat runtime; adalah teknik yang sangat efisien untuk menerjemahkan string konstan dan berparameter; paling sederhana untuk diterapkan. Internasionalisasi Waktu Kompilasi menggunakan file properti standar untuk menyimpan string yang diterjemahkan dan pesan berparameter, dan file properti ini dikompilasi langsung dalam aplikasi.
2	Run Time Internationalization Teknik ini sangat fleksibel tetapi lebih lambat dari internasionalisasi string statis. Anda perlu mengompilasi file properti pelokalan secara terpisah, membiarkannya di luar aplikasi, dan memuatnya pada waktu proses.

Alur kerja internasionalisasi Aplikasi Flex

Langkah 1 - Buat struktur folder

Buat folder lokal di bawah folder src dari proyek Flex. Ini akan menjadi direktori induk untuk semua file properti untuk lokal yang akan didukung aplikasi. Di dalam folder lokal, buat subfolder, satu untuk setiap lokal aplikasi yang akan didukung. Konvensi penamaan lokal adalah

{language}_{country code}

Misalnya, en_US mewakili bahasa Inggris Amerika Serikat. Lokal de_DE mewakili bahasa Jerman. Aplikasi sampel akan mendukung dua bahasa umum: Inggris, dan Jerman.

Langkah 2 - Buat file properti

Buat file properti yang berisi pesan untuk digunakan dalam aplikasi. Kami telah membuatHelloWorldMessages.properties file di bawah src > locale > en_US folder dalam contoh kami.

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

Buat file properti yang berisi nilai terjemahan khusus untuk lokal. Kami telah membuatHelloWorldMessages.properties file di bawah src > locale > de_DEfolder dalam contoh kami. File ini berisi terjemahan dalam bahasa jerman. _de menentukan lokal jerman dan kami akan mendukung bahasa jerman di aplikasi kami.

Jika Anda membuat file properti menggunakan Flash Builder, ubah penyandian file menjadi UTF-8. Pilih file, lalu klik kanan di dalamnya untuk membuka jendela propertinya, Pilih Penyandian file teks sebagai Other UTF-8. Terapkan dan Simpan perubahan.

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

Langkah 3 - Tentukan opsi Compiler

Klik kanan proyek Anda dan pilih Properties.
Pilih Flex Compiler, dan tambahkan berikut ini ke pengaturan Argumen Kompilator Tambahan -

-locale en_US de_DE

Klik kanan proyek Anda dan pilih Properties.
Pilih Flex Build Path, dan tambahkan yang berikut ini ke pengaturan Source Path -

src\locale\{locale}

Contoh Internalisasi

Sekarang Mari kita ikuti langkah-langkah berikut untuk menguji teknik Internalisasi dalam aplikasi Flex -

Langkah	Deskripsi
1	Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint.client seperti yang dijelaskan di bab Flex - Buat Aplikasi .
2	Ubah HelloWorld.mxml seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3	Kompilasi dan jalankan aplikasi untuk memastikan logika bisnis berfungsi sesuai kebutuhan.

Berikut adalah konten file mxml yang dimodifikasi 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>

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode normal seperti yang kita lakukan di bab Flex - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, itu akan menghasilkan hasil sebagai berikut: [ Coba online ]

Ubah bahasa menggunakan drop down bahasa dan lihat hasilnya.