Adobe Flex :: Skins, Styles und Themes - eine erste Einführung

Inhalt

Dieser Beitrag soll zeigen wie mit einfachen, meist bereits schon aus der CSS/HTML-Welt bekannten (Bord-)Mitteln, eine Flexapplikation einfach und schnell bezüglich Aussehen an individuelle Bedürfnisse (wie z.B. CI Vorgaben) angepasst werden kann.

Zielsetzung

Dabei handelt es sich lediglich um eine Aufwärmrunde um zu zeigen dass Flex-Applikationen auch ohne grossen Aufwand nicht dazu verdammt sind auf den ersten Blick als Flex-Applikation erkennbar zu sein und sich wie ein Ei dem anderen zu gleichen.

TagCloud

Skin, Theme, Style, SWC, Skinning, Transparenz, Filter, visuelle Effekte, CSS, Flex Style Eplorer, Style Tags, mx:Style, mx:Style, 

Begriffe

Skin

Das Aussehen von Flex Komponenten wird im Endeffekt durch grafische Bilder für Ecken, Kanten, Füllungen, etc. und visuelle Effekte wie Transparenz, Filter, etc definiert. Die Summe dieser grafischen Elemente und Effekte nennt man Skin.

Style

Styles sind was ähnliches wie CSS. Flex Styles folgen der CSS 2.0 Syntax und unterstützen viele der bekannten CSS Style Eigenschaften.

Theme

Ein "Theme" ist im Wesentlichen eine Sammlung von Styles, grafischen Elementen (z.B. Bilder) und Skins.

Ein Theme wird hauptsächlich dazu verwendet, alle die oben erwähnten Dateien eines Themes (obwohl ein Theme auch in Form einzelner Dateien verwendet werden kann) in ein eiziges Packet zu packen, um die Versionierung, Installation und Distribution eines Themes zu erleichtern. Dieses Theme-Packet hat das Format *.swc (SWC wird ausgesprochen als "swick," und ist eine Art JAR/ZIP-ähnliches archiv format for Flash)

Bordmittel

"Halo" themeColor Eigenschaft anpassen

Flex verwendet standardmässig das Theme "Halo". Dieses Theme hat eine Eigenschaft "themeColor" die wie folgt auf die Werte

• haloSilver
• haloGreen
• haloBlue (standard)
• haloOrange

verändert werden kann:

Um das ThemeColor auf Applikationsstufe zu verändern muss die Eigenschaft themeColor im mx:Application Tag der Hauptapplikation wie folgt angegeben werden:

    

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" themeColor="haloOrange">

 

Das lässt sich natürlich auch auf Komponentenstufe wie folgt wiederholen: 

 

    <mx:Button label="My Button" themeColor="haloGreen">

Theme auswechseln

Viel dramatischer wird die Geschichte wenn wir nicht nur die Farbe des Standard "Halo" Themes auswechseln sondern das ganze Theme als solches - und das geht so:

Flex bietet im Verzeichnis "flex builder root>\Flex SDK 2\frameworks\themes" die folgenden Themes zur Auswahl:

• Halo (the default, embedded in the framework.swc)
• HaloClassic (haloclassic.swc)
• Ice (Ice.css)
• Institutional (Institutional.css)
• Wooden (Wooden.css)
• Smoke (Smoke.css)

Um Flex zu veranlassen eines dieser Themes an Stelle des Standard "Halo" Theme zu laden gehen sie wie folgt vor:

Oeffnen sie das betreffende Projekt im FlexBuilder

1. Klicken sie im Flex Navigator mit der RECHTEN Maustaste auf ihr aktuelles Projekt-verzeichnis und wählen sie dort den Eintrag "Properties".
2. Im Fenster "Properties for ..." wählen sie nun die Option "Flex Compiler".
3. Im Feld "additional compiler arguments:" geben sie nun ZUSAETZLICH zu den bereits dort vorhandenen Argumenten folgendes ein:
   
    -theme "C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\themes\Smoke.css"
   
4. Wenn sie nun die Applikation neu compilieren wird sie mit dem Theme "Smoke" dargestellt

Styling

Styles können in Flex auf 3 Arten verändert werden: Inline, Style-Tag oder StyleSheet

1. Möglichkeit :: Inline Styles

InlineStyles sind als Attribute der jeweiligen Komponententags anzugeben wie z.B.

 

    <mx:Text fontFamily="Tahoma" fontSize="18"/>

 

Die zweite Möglichkeit ist die Verwendung von <mx:Style> Tags in der jeweiligen mxml Datei wie folgt:

2. Möglichkeit :: <mx:Style Tags>

<mx:Style>
   TextInput
     {
       font-family:Tahoma;
       font-size: 14px;
       color:#FF9900;
     }

   .myStyle
     {
       font-family:Verdana;
       font-size:18px;
       color:#CC0000;
     }
</mx:Style>

<mx:TextInput text="use type definition"/>
<mx:TextInput text="use class definition" styleName="myStyle"/>

 

Tip Flex Style Explorer:

Obwohl man natürlich auch direkt mit der aktuellen Applikation experimentieren kann (Alle CSS Style Eigenschaften sind ausführlich in der Flex Dokumentation aufgeführt) geht es mit dem Flex Style Explorer viel komfortabler. Diesen findet man auf der FlexBuilder StartSeite (klicken sie im FlexBuilder auf Hilfe-->Flex Start Page). Er erlaubt es ihnen interaktiv Style Definitionen zu erstelln, welche sie dann mit cut and paste in ihre Applikation übertragen können.

3. Möglichkeit ::Stylesheets

Analog zur CSS-Welt definieren sie alle ihre Styles in einer externen *.css Datei welche sie dann in ihrer Applikation wie folgt referenzieren:

 

    <mx:Style source="/path/to/your/stylesheet.css"/>

 

Skinning

Im Wesentlichen gibt es zwei Arten um Skins zu erstellen: Grafik und/oder Programmierung. Ausserdem ist zu Berücksichtigen dass die Skins je nach Zustand (Mouse over, mouse down, disabled, selected, ...) unterscheiden, resp. für jeden Zustand des zu skinnenden Objekts separate Skins entworfen und mit dem Objekt assoziert werden müssen.

Grafische Skins

Bei grafischen Skins geht es im Wesentlichen um die Verwendung von JPEG, GIF oder PNG formattierten Grafiken im Zusammenhang mit den folgenden CSS Eigenschaften

• disabledSkin
• downSkin (mouse down)
• overSkin (mouse over)
• upSkin (mouse not over)
• selectedDisabledSkin
• selectedDownSkin
• selectedUpSkin
• selectedOverSkin

Dabei berücksichtigt Flex auch die Transparenz (Alpha Kanal) aller gängigen Grafikformate.

 

Beispiel:

Um einen Button grafisch zu skinnen gehen sie wie folgt vor:

Erstellen sie zum Beispiel in Photoshop je eine Grafik für die Zustände "mouseOver", "mouseDown" und "mouseUp" und testen sie das Resultat zum Beispiel mit folgendem Inline Code:

 

<mx:Button label="My Skinned Button"

overSkin="@Embed('button_over.png')"
downSkin="@Embed('button_down.png')"
upSkin="@Embed('button_up.png')"/>

 

Um den Pfadnamen der jeweiligen SkinDateien nicht über den ganzen Code verstreut zu haben empfielt es sich diese zentral in einem Codeblock zu managen:

 

<mx:Script>
<![CDATA[
[Embed(source="button_over.png")]
[Bindable]
public var buttonOver:Class;
[Embed(source="button_down.png")]
[Bindable]
public var buttonDown:Class;
[Embed(source="button_up.png")]
[Bindable]
public var buttonUp:Class;
]]>
</mx:Script>

<mx:Button label="My Skinned Button" overSkin="{buttonOver}" downSkin="{buttonDown}" upSkin="{buttonUp}"/>

 

oder noch besser diese in einer CSS-Datei zu verstecken:

 

<mx:Style>
   .skinnedButton
{
     overSkin: Embed(source="button_over.png");
     downSkin: Embed(source="button_down.png");
upSkin: Embed(source="button_up.png");
}
</mx:Style>

<mx:Button label="Skin Class" styleName="skinnedButton"/>

9-Scale Skalierung

Das Problem bei grafischen Skins ist natürlich die Skalierung welches aber pragmatisch durch die von Flex gebotene Möglichkeit der 9-Scale Skalierung relativ einfach entschärft werden kann in dem - wie im folgenden gezeigt - bei jeder Grafik eine "Zone" definiert werden kann worauf sich die Skalierung aussschliesslich bescränken soll ohne dabei die Ränder zu verändern.

 

[Embed(source="button_over.png",scaleGridTop="18",scaleGridBottom="31",scaleGridLeft="8",scaleGridRight="158")]

 

none	nur horizontal	no
nur vertikal	Skalierungszone wird horizontal und vertikal skaliert	nur vertikal
none	nur horizontal	no

Schlussbemerkung

Mit diesen Beispielen ist das Thema natürlich noch längst nicht abgeschlossen. Weiterführende Themen wie z.B. programmierte Skins sind aber nicht mehr so ganz trivial und nur für erfahrene Programmierer zu empfehlen. Ausserdem wurden die folgenden Themen hier NICHT behandelt - Erstellen von Theme Dateien - Vererbung von Styles - Verwendung von SWF-Dateien für Skins etc.