• 
• 
• 
• 
• 
• 
• 
• 0

Oktober 2009

Textfeatures in Flex 4

Text, mehr Text und noch mehr Text

(Link zum Artikel: http://www.createordie.de/cod/artikel/2596)

Die ersten beiden Kurztutorials zu Flex 4 haben in die Spark-Komponenten eingeführt sowie das neue Konzept der Applikations-States in Flex 4 vorgestellt. Wie am Ende des zweiten Teils bereits angekündigt, beschäftigt sich Teil 3 mit Textfeatures. Am Ende des Kurztutorials findet sich übrigens wieder ein kurzes Quiz.

Text: Kai König

Wer sich bereits seit einiger Zeit mit Flex auseinandersetzt oder in einem vorherigen Leben Flasher war (bzw. noch ist), dem dürften verschiedene Probleme mit Text in Flash-basierten Anwendungen bekannt sein. Beispielsweise ist der Flash Player nicht gerade dafür bekannt, die Darstellungen von HTML-formatiertem Text sehr gut zu unterstützen – viel mehr als extrem einfache Auszeichnungen für fett, kursiv und verschiedene Schriftformatierungen konnte man bislang mit Flash nur mithilfe von unschönen Hacks darstellen (iFrame Overlays etc.). Der Flash Player – und damit auch Flash und Flex – unterstützen verschiedene Schriftarten in Rich Internet Applications, aber auch hier funktioniert nicht immer alles direkt und problemlos: Stylesheet, Einbetten in die .swf-Datei, Rendering der Schrift und eventueller Ersatzschriften etc.

Dieses Kurztutorial geht auf verschiedene neue Features bezüglich Text in Flex 4 ein. Dabei werden wir uns u.a. auch kurz Adobes Text Layout Framework (TLF) anschauen, die seit Kurzem von Adobe unter einer Open-Source-Lizenz bereitgestellt wird. Das Framework richtet sich sowohl an Flash-Entwickler als auch an Flex-Entwickler und öffnet die neue Text Engine im Flash Player 10 sowie in Adobes Desktoplaufzeitumgebung AIR (ab Version 1.5) für eigene Anwendungen. Man kann TLF auch mit Flex 3 ab Version 3.2 und Flash Professional CS4 benutzen, muss aber in jedem Fall die oben genannten Versionen der Runtimes als Zielplattform festlegen. An dieser Stelle wieder die übliche Warnung: Bei Flex 4, Flash Builder 4 und den hier verwendeten Bibliotheken und Beispielen handelt es sich um Betacode, der sich je nach verwendeter SDK-Version unerwartet und fehlerhaft verhalten kann.

Als Einstieg schauen wir uns an, wie Flex 4 und Schriftarten generell funktionieren und zusammenarbeiten können. Die generelle Vorgehensweise führt über die Nutzung von Stylesheets in Flex. Dabei kann es sich sowohl um in den MXML-Anwendungscode eingebettete Style-Informationen handeln als auch um Stylesheet-Deklarationen in separaten .css-Dateien. Das folgende Beispiel zeigt den einfachsten Anwendungsfall der Nutzung von verschiedenen Schriften in einer Flex-4-Anwendung:

1. <?xml version="1.0" encoding="utf-8"?>
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3. xmlns:s="library://ns.adobe.com/flex/spark"
4. xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
5. <s:layout>
6. <s:VerticalLayout/>
7. </s:layout>
8. <fx:Style>
9. @namespace s "library://ns.adobe.com/flex/spark";
10. s|VGroup {
11. fontFamily: Arial;
12. fontSize: 16pt;
13. }
14. s|HGroup {
15. fontFamily: Times;
16. fontSize: 12pt;
17. }
18. </fx:Style>
19. <s:Panel title="Diese Styles kommen aus dem s|VGroup CSS">
20. <s:VGroup>
21. <s:Button label="Arial"/>
22. <s:SimpleText text="Arial..."/>
23. <s:RichText height="75" width="200">
24. <s:text>
25. Und auch hier Arial.
26. </s:text>
27. </s:RichText>
28. </s:VGroup>
29. </s:Panel>
30. <s:Panel title="Diese Styles kommen aus dem s|HGroup CSS">
31. <s:HGroup>
32. <s:Button label="Times"/>
33. <s:SimpleText text="Times..."/>
34. <s:RichText height="75" width="200">
35. <s:text>
36. Und immer noch Times.
37. </s:text>
38. </s:RichText>
39. </s:HGroup>
40. </s:Panel>
41. </s:Application>

Hier werden zwei für das Schrift-Rendering wesentliche Styles erzeugt: s|VGroup sowie s|HGroup. Mit beiden werden hier Schriftfamilie und Schriftgröße für alle Spark-Komponenten VGroup und HGroup in der Anwendung gesetzt. Abbildung 1 zeigt das Rendering dieser Anwendung mit den Schriftarten Times und Arial in verschiedenen Größen. Die hier gewählte Art der CSS-Deklaration führt dazu, dass der MXML-Compiler die Schriften nicht in die resultierende .swf-Datei einbettet, sondern zur Laufzeit im Flash Player zu referenzieren versucht. Als Entwickler kann man (ähnlich zur Situation in HTML/CSS) nicht davon ausgehen, dass alle benötigten Schriften auf den Zielsystemen vorhanden sind. So kann es passieren, dass die Flex-Anwendung (die ja eigentlich auf jedem Clientsystem identisch erscheinen sollte) auf verschiedenen Endnutzermaschinen unterschiedlich dargestellt wird, beispielsweise unter Nutzung einer Ersatzschriftart.

• 1
• 2
• 3

 

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• flex,
• textfeatures