Tutorial: Mehrsprachige Anwendungen in Flex 3
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:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label text="@Resource(bundle='myResources', key='SLOGAN')" fontSize="20" x="10" y="40"/>
<mx:ComboBox x="10" y="10"></mx:ComboBox>
<mx:Image x="10" y="78" width="211" height="193"/>
</mx:Application>
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:
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
sowie unter Mac mit dem Befehl
Nun aber zur Umschaltung zwischen verschiedenen Sprachen. Folgendermaßen sieht der Code jetzt aus:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Metadata>
[ResourceBundle("myResources")]
</mx:Metadata>
<mx:Script>
<![CDATA[
[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];
}
]]>
</mx:Script>
<mx:Label text="{resourceManager.getString('myResources', 'SLOGAN')}" fontSize="20" x="10" y="40"/>
<mx:ComboBox x="10" y="10" id="localeComboBox" dataProvider="{locales}"
initialize="localeComboBox_initializeHandler(event)"
change="localeComboBox_changeHandler(event)"/>
<mx:Image x="10" y="78" width="211" height="193" source="{resourceManager.getString('myResources', 'IMGSRC')}"/>
</mx:Application>
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.
Related posts:
- Adobe Labs: zweite Beta von Flash Builder 4, Flash Catalyst und Flex SDK 4 Adobe hat eine neue Runde in der Betaphase eingeläutet [...]...
- Tutorial und Tips: Dokumentation von Quelltext mit Doxygen Nicht nur wenn ein Projekt größer wird, sondern prinz [...]...
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.
Mehr Beiträge aus meinem Blog als RSS? Hier abonnieren: 
Geschrieben am Donnerstag, 22. Oktober 2009
und abgelegt unter Tutorials, Webentwicklung.
Verfolgen Sie die Diskussion zu diesem Beitrag per RSS 2.0 Feed.
Sie können diesen Beitrag kommentieren oder einen Trackback von Ihrer eigenen Webseite setzen.
23. Oktober 2009 um 09:46
Ich hab mich übrigens an diesem (englischen) Tutorial aus dem Wiki von Adobe orientiert:
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtime_Localization
Dort findet ihr auch noch viele weitere Hinweise zur Runtime Localization, vor allem Hintergrundinfos, warum und wie das Ganze funktioniert.