Översätt en applikation i Flex 4 - Localization

 

I denna artikel kommer jag att beskriva hur vi flashutvecklare på ett enkelt sätt kan översätta en applikation till olika språk i Flash Builder 4, Flex 4. Jag har här fokuserat på att ge en enkel beskrivning så att ni snabbt kan komma igång och göra era applikationer flerspråkiga. Lokalisering i Flex 4 har mycket mer att erbjuda än som beskrivs här och för en komplett beskrivning rekommenderar jag Adobes egen dokumentation.

I projektets sourcemapp skapar vi först en mapp som vi döper till locale. Om du kör med Flex standard projekt så heter sourcemappen src. I locale samlar vi alla våra språk. I detta exempel ska vi översätta applikationen till svenska och engelska så vi skapar två mappar i locale, en som heter sv_SE och en som heter en_US. Här står sv för svenska och SE för Sverige, alltså svenska anpassad för Sverige. Motsvarande en_US innebär engelska för USA till skillnad från tex en_GB som är engelska för Storbritannien.

Därefter skapar vi en fil som heter default.properties i mappen sv_SE. I denna fil kommer vi att ange alla våra svenska texter. Nedan är innehållet i filen. Varje text vi vill använda ger vi ett namn (label) så att vi kan referera till den i applikationen.

# /locale/sv_SE/default.properties 
test=Testar svensk text
test2=Vi testar igen

Därefter skapar vi en fil med samma namn i mappen en_US. I denna fil anger vi den engelska översättningen för texterna i den svenska filen.

# /locale/en_US/default.properties 
test=This is the English test
test2=Another test

I detta exemplet har vi bara en resursfil per språk och har därför valt att döpa den default.properties. Har man en större applikation med flera olika beståndsdelar kan man med fördel dela upp resursfilen till flera mindre och döpa dem efter vilken del de tillhör.

Nästa steg är att öppna Properties för projektet och går till Flex Compiler. I fältet för Additional compiler arguments: lägger vi till följande

-locale=en_US,sv_SE -source-path=locale/{locale} -allow-source-path-overlap=true

-locale specificerar vilka översättningar som ska inkluderas vid kompileringen. -source-path specificerar var språkresurserna finns. -allow-source-path-overlap är valfri att använda men om den inte inkluderas och sätts till true så kan man få en varningsmeddelande.

Vi kommer att använda oss av ResourceManager för att hämta texterna. För att kunna använda denna måste vi ange vilket resurspaket vi vill använda. Det gör vi i MXML med

<fx:Metadata>
    [ResourceBundle("default")] 
</fx:Metadata>

Vill du istället göra det för en ActionScript-klass så anger du det på följande sätt.

[ResourceBundle("default")] 
public class MyClass extends UIComponent 
{   
}

För att hämta en text med ResourceManager så anropar vi

resourceManager.getString('default', 'test');

där default är resurspaketet och test är namnet (label) på texten vi vill använda.

För att byta språk anropar vi

resourceManager.localeChain = ['sv_SE'];

I detta fallet byter vi till svenska för Sverige.

För att ange vilket språk applikationen ska starta med kan vi skicka med en flashvariabel vid start. Variabeln heter localeChain och ska sättas till den språk_landskod som önskas.

<param name='flashVars' value='localeChain=en_US'/>

eller om du använder Flex standard HTML mall så anger du i SWFObject 2

flashvars.localeChain="en_US"

Nu är vi redo att test om det fungerar. Klicka på knappen för att byta språk från engelska till svenska.

<?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" >
	
   <s:layout>
      <s:VerticalLayout />
   </s:layout>
	
   <fx:Metadata>
      [ResourceBundle("default")]
   </fx:Metadata>
	
   <mx:Text text="{resourceManager.getString('default', 'test')}" />
	
   <s:Button click="{resourceManager.localeChain = ['sv_SE']}" />
	
</s:Application>

Forsätt läsa i del 2 om hur man översätter i Flash Builder 4 som ni hittar här. Ni hittar ett exempel på lokalisering i detta spel.

Du hittar fler guider för flashutvecklare om ActionScript 3 här. Söker ni efter en frilans flashutvecklare eller Flash konsult? I så fall har ni kommit rätt och är välkomna att kontakta mig här. Vill ni veta mer om vad jag har att erbjuda som frilansande flashutvecklare så hittar ni den informationen här.