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
- Klicken sie im Flex Navigator mit der RECHTEN Maustaste auf ihr aktuelles Projekt-verzeichnis und wählen sie dort den Eintrag "Properties".
- Im Fenster "Properties for ..." wählen sie nun die Option "Flex Compiler".
- 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"
- 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.
