Tutorial: Mehrsprachige Anwendungen in Flex 3

rené — Thu, 22 Oct 2009 20:21:41 +0000

Wer schon einmal vor der Aufgabe stand, eine Flex Projekt mehrsprachig zu gestalten, dem bieten sich beim ersten Überlegen mehrere Lösungen an:

ein Array für jede Sprache
XML Datei
eine Datenbank, mit einer Serversprache und Stream über AMF
…bestimmt noch viele weitere Lösungen

Jedoch hat sich Adobe Gedanken gemacht und eine recht elegante Lösung für Flex 3 vorgesehen: Runtime Localization mit Ressourcen. Dabei gibt es viele Vorteile:

mehrere Ressourcen (=Sprachen) können in ein Projekt kompiliert werden
Ressourcen werden extern in .properties Dateien gespeichert (Trennung vom Code)
direktes Umschalten zwischen verschiedenen Sprachen (alle Referenzen werden sofort aktualisiert)
auch Sounds, Bilder können “mehrsprachig” verknüpft werden
zur Laufzeit können neue Ressourcen aus XML Dateien, Datenbankanfragen erzeugt werden

Nun aber zum Tutorial. Erzeugt euch ein Flex 3 Projekt und editiert eure *.mxml Datei wie folgt:

"1.0" encoding="utf-8"?>
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
text="@Resource(bundle='myResources', key='SLOGAN')" fontSize="20" x="10" y="40"/>
x="10" y="10">>
x="10" y="78" width="211" height="193"/>
>

Dabei kann man deutlich erkennen, dass hier eine Ressource mit dem Namen “myResources” und dort der Key “SLOGAN” aufgerufen wird. Schaltet ihr in die Designansicht, seht ihr, dass das der Inhalt des Attributs text jetzt etwas unschön quer über die Applikation ragt.
Anschließend erzeugt ihr euch in eurem src Ordner einen Ordner locale, darin zwei Ordner de_DE und en_US. In diesen weiterhin jeweils eine Datei namens myResources.properties (hier ist die oben erwähnte .properties Datei, außerdem der Link vom text Attribut mit “myResources”). Danach sollte eure Ordnerstuktur so ähnlich aussehen:

Anschließend müsst ihr unbedingt die Kodierung der Dateien auf UTF-8 setzen. Dazu Rechtsklick auf die myResources.properties -> Eigenschaften. Hier stellt ihr das Text File Encoding auf UTF-8:

Damit der Compiler auch die Ressourcen findet, muss der Pfad zu diesem in dem Compileroptionen angegeben werden. Dazu öffnet ihr die Eigenschaften des Projektes, geht auf Flex Compiler und ergänzt/ersetzt dort um folgendes:

-locale=en_US -source-path=../locale/{locale}

Damit wird dem Flex Compiler mitgeteilt, dass die Standardsprache englisch ist sowie weitere Sprachen im Ordner “locale” zu finden sind. Die “..” sind entscheidend, da der Flex Compiler einen relativen src-Pfad nimmt und nicht den absoluten wie man ihn im Projektbaum sieht. Scheint noch ein Relikt aus der Betaphase zu sein.

Jetzt sind alle Vorbereitungen getroffen, wenn ihr das Projekt ausführt sollte der Platzhalter SLOGAN durch euren Text aus der Datei en_US/myResources.properties ersetzt werden. Jedoch sprach ich noch vom direkten Umschalten zwischen mehreren Sprachen. Dazu verknüpfen wir die vorhandenen Ressources mit einer Combobox.
Kurz etwas zum Hintergrund des Flex Compilers: Für jede Sprachresource muss für es einen Resource im Frameworkordner des Flex Frameworks (SDK) geben. D.h. für en_US gibt es bereits nach der Installation ein fertiges Sprachpaket unter frameworks/locale/en_US/framework_rb.swc. Wenn wir aber in den Compileroptionen -locale=de_DE angeben, erwartet der Compiler, eben dieses Sprachpaket unter frameworks/locale/de_DE/framework_rb.swc zu finden. Das ist aber von Hause aus nicht so. Deswegen müssen wir manuell die Resourcen für unsere Sprachen erzeugen. Diese geschieht recht simpel, indem man die vorhandene (englische) Resource dupliziert.

Für Windows geht dieses mit

bincopylocale.exe en_US de_DE

sowie unter Mac mit dem Befehl

bin/copylocale.sh en_US de_DE

Nun aber zur Umschaltung zwischen verschiedenen Sprachen. Folgendermaßen sieht der Code jetzt aus:

"1.0" encoding="utf-8"?>
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
>
[ResourceBundle("myResources")]
>

[Bindable]
private var locales:Array = [ "en_US" , "de_DE" ];

private function localeComboBox_initializeHandler(event:Event):void
{
localeComboBox.selectedIndex = locales.indexOf(resourceManager.localeChain[0]);
}

private function localeComboBox_changeHandler(event:Event):void
{
// Set the localeChain to either the one-element Array
// [ "en_US" ] or the one-element Array [ "de_DE" ].
resourceManager.localeChain = [localeComboBox.selectedItem];

}

]]>

text="{resourceManager.getString('myResources', 'SLOGAN')}" fontSize="20" x="10" y="40"/>
x="10" y="10" id="localeComboBox" dataProvider="{locales}"
initialize="localeComboBox_initializeHandler(event)"
change="localeComboBox_changeHandler(event)"/>
x="10" y="78" width="211" height="193" source="{resourceManager.getString('myResources', 'IMGSRC')}"/>
>

Die wichtigste Veränderung stellt die Ersetzung aller “@Resource(bundle….” durch “{resourceManager.getString(…” dar. Damit greift ihr direkt auf den resourceManager zu, welchem ihr über die Combobox verschiedene Sprachresourcen zuweisen könnt. Dabei ist localeChain der entscheidene Begriff.
Im Download und der Demo findet ihr auch ein Beispiel für “mehrsprachige” Bilder.

Demo
Download Beispiel

Soraxdesign » Mehrsprachigkeit

Tutorial: Mehrsprachige Anwendungen in Flex 3