Adobe Flex: Schriftarten einbetten und Flex-CSS…

Thema Schriftarten einbetten: Das Problem kennt jeder Flashentwickler: Der tollste Effekt beeindruckt einfach nicht den dynamischen Text! In Flash musste man also die Schriftart einbetten und wenn man aus Versehen auch den kompletten asiatischen Zeichensatz mitnahm war die SWF Datei schnell mal ein paar MB groß.

In Flex ist das wesentlich einfacher geworden. Man bindet einfach per StyleSheet eine Schriftart ein und vergibt einen Familiennamen:

@font-face {
src: url('./fonts/arial.ttf');
fontFamily: "myArial";
}

Jetzt kann man über fontFamily=”myArial” auch alpharotation etc. auf Komponenten mit dieser Schriftart nutzen.

Das war auch der erste Flex-CSS Kontakt. Das obige Beispiel kann man einfach so in seinen MXML-Code kopieren und wenn der Ordner fonts existiert und darin eine Datei arial.ttf liegt funktioniert das direkt. Der <mx:Style/> Tag verfügt auch über eine source Eigenschaft in der man eine Flex-CSS Datei angeben kann und schon hat man seine Styles ausgelagert.


In der fonts.css steht das gleiche wie vorher im <mx:Style/> Tag, nur “src: url(../fonts/arial.ttf’);” weil ich die CSS Datei ja in einem Unterverzechnis liegen habe.

Flex legt nun im Debug und Release Ordner auch die Ordner css und fonts an und kopiert sogar die Dateien dort hinein. Der findige Flex-Entickler denkt nun er habe eine mächtige Möglichkeit gewonnen, mit der er das Aussehen der kompilierten Anwendung per externen Flex-CSS Dateien noch ändern kann. Aber: Die Idee zB einfach eine Schriftart auszutauschen oäfunktioniert nicht so einfach!

Es funktioniert etwas komplizierter. Im FlexBuilder hat man die Möglichkeit eine Flex-CSS Datei zu einer swf Datei zu komprimieren. Diese swf Datei kann man nun zur Laufzeit perStyleManager einladen. Angenommen man will zwei Styles entwerfen mit verschieden großen Schriftarten, erstellt man diese im FB, komprimiert sie jeweils zu einer swf Datei und nutzt folgende Codefragmente um zur Laufzeit den Style zu ändern:

initialize="StyleManager.loadStyleDeclarations('stylenormal.swf' )">
[...]
click="StyleManager.loadStyleDeclerations('stylebig.swf')"/>

Toll das man zur Laufzeit doch noch die Styles ändern kann, wenn man dies aber direkt über die Flex-CSS Dateien bewerkstelligen könnte, würde sich dieses Feature noch besser anfühlen.

Apropos besser anfühlen. Der Webentwickler hat mit CSS ein sehr mächtiges Werkzeug. Viele der W3-CSS Möglichkeiten bietet Flex-CSS allerdings nicht. Das man Styles überschreiben kann oder subgruppen bildet ala .news h1 {…} .news p {…} ist im XHTML Business Standard. Das bietet Flex-CSS leider nicht. Man kann auf oberster Ebene das Aussehen der Komponenten beeinflussen (Panel { … }), aber Subgruppen (Panel VBox {…} oder news VBox {…}) funktionieren nicht. Man muss also in Flex jeder Komponente einen styleName geben.

Abschließend sind mir noch zwei Sachen aufgefallen. Einerseits wunderte mich warum Eigenschaften wie rotation oder alpha nicht per Flex-CSS ansprechbar sind, anderseits sind alle Flex-CSS Eigenschaften unüberschaubar und nicht immer verständlich. Warum ist zB die Farbe der Hoverung eines Buttons als themeColor zu finden?
FlexBuilder bietet im Designmodus allerdings auch eine Komponente durchzustylen und dies dann als Flex-CSS zu exportieren – das ist eine gute Hilfe im unüberschaubaren Flex-CSS Universum.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.