Soraxdesign » ActionScript

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

Adobe Labs: zweite Beta von Flash Builder 4, Flash Catalyst und Flex SDK 4

rené — Tue, 13 Oct 2009 13:45:44 +0000

Adobe hat eine neue Runde in der Betaphase eingeläutet: es gibt die zweite Beta vom Flash Builder 4, Flash Catalyst und dem Flex SDK 4. Den meisten wird das Flex SDK ein Begriff sein, somit sage ich zu den anderen beiden ein paar Worte:

Flash Builder 4 ist gewissermaßen der Nachfolger vom Flex Builder (3). Um die klare Zugehörigkeit und damit man als es Kundenberater leichter hat, einen Kunden neben Flash nicht noch mit Flex zu belasten, hat sich Adobe zu diesem Schritt der Umbenennung entschlossen. Nachzulesen sind die Gründe für diese Umbenennung bei Serge Jespers. Über Vor- und Nachteile kann man sich gerne streiten, ich finde es schade, einen mittlerweile etablierten Namen wie Flex Builder aufzugeben.

Flash Catalyst stellt ein völlig neues Stück Software aus dem Hause Adobe dar. Mit diesem soll die Schnittstelle zwischen Gestalter und Entwickler besser miteinander arbeiten können. Konkret soll ein Gestalter in Flash Catalyst seine Entwürfe (die meistens noch Grafiken oder zumindest Vektoren sind) mit Eigenschaften versehen z.B. eine Grafik, welche einen Button darstellen soll als Button definieren. Diese Defintion bzw. das Flash Catalyst Projekt geht dann an den Entwickler mit Flash Builder 4 (mit Flex Builder 3 soll das nicht mehr kompatibel sein), diese implementiert anschließend die Logik des Systems. Nach Ansicht von Adobe soll damit ein nahtloses Arbeiten zwischen Gestalter und Entwickler möglich sein, da GUI und Logik voneinander getrennt sind. Hier könnt ihr euch noch ein Video zu Flash Catalyst anschauen:

Abschließend noch der Changelog der aktuellen Betas:

Flash Catalyst Beta 2
Faster performance – A noticeable performance increase over beta 1
Enhanced Interface – A more refined and easier to user interface
Video support – Import video files, use standard playback controls or easily create your own
Sound Effects – Add sound effects to interactions
More components – Convert artwork into more components such as sliders, radio buttons, scroll panel and more
More interactions – Specify a URL to open during an interaction, play a video
Export to AIR (in addition to SWF) – Export projects that run outside the browser using Adobe AIR.
Motion Easing – Define easing for more fluid motion
Filters – Apply multiple filters to alter graphics such as adding drop shadow, glow, blur and more.
Blend modes – Select how objects blend with other objects
Accessible Content – Create an accessible SWF file that can be used by the visually impaired.
SWF control – Play a SWF file from a specific frame
SWF output options – Create a SWF file that is deployable, redistributable and has fonts embedded.

Flash Builder 4 Beta 2

Quelle: http://blogs.adobe.com/flex/archives/2009/10/flex_4_sdk_beta_2_ready_for_do.html

Tutorial: ExternalInterface – Zusammenspiel von SWF und JavaScript

rené — Mon, 24 Aug 2009 20:37:05 +0000

Manchmal ist es nötig, SWF Dateien mit dem aktuellen Container (meistens eine umschliessende HTML Seite) korrespondieren zu lassen. Ob nun Inhalte in Formularen geändert, Seitenwechsel oder auch das Zusammenspiel mit anderen SWF Dateien geschehen soll, kann dies über JavaScript gelöst werden. Eine Schnittstelle bietet dabei die ExternalInterace Klasse von ActionScript 3.

Früher war diese Funktion unter dem Namen fscommand() bekannt und hat diese ersetzt.

Um von JavaScript auf eine Methode in ActionScript zuzugreifen, muss diese dem Flash Player bekannt gemacht werden. Dieser erfolgt mit der Methode addCallback():

ExternalInterface.addCallback("setTextFromJS", setText);

Dabei wird die (JavaScript)Methode “setTextFromJS” dem Flash Player und somit dem ExternalInterface bekannt gemacht. Die zweite Variable legt die Funktion fest, die in ActionScript aufgerufen werden soll.
Nun kann mit der aktuelle SWF Container in der HTML Seite über dessen Namen angesprochen werde und die Methode aufgerufen werden. Parameterübergabe funktioniert wie gehabt in JavaScript:

Natürlich ist dies auch umgekehrt möglich. Über die Funktion

ExternalInterface.call('setTextFromAS', s);

kann aus ActionScript heraus eine JavaScript Funktion aufgerufen werden mit Parameterübergabe. Soweit ich weiß, kommt immer ein String an. Der Parameter s kann dabei ein Wert sein, der von ActionScript an JavaScript gesendet werden soll.

Hier habe ich ein Beispiel online gestellt. Der übergebene Text aus dem Textfeld wird an die SWF gesendet und anschließend wieder an JavaScript und in ein zweites Textfeld geschrieben.

Beispiel
Download des Beispielcodes