CSS: Zwischen Halo und Spark unterscheiden (Flex 4 SDK)

Im zweiten Teil der „Gumbo-Wochen” zum Flex 4 SDK geht es um das Thema CSS.

Da in Flex 4 sowohl Halo- als auch Spark-Komponenten zusammen verwendet werden können, kann es passieren, dass eine Komponenten mit dem gleichen Namen in beiden Sets vorkommt (z.B. Button). Um in einem solchen Fall die Komponenten trotzdem grafisch unterschiedlich gestalten zu können, muss das Konzept der Namespaces (siehe Neuer Namespace und Spark-Komponenten) konsequenterweise auch im CSS angewendet werden.

@namespace

Adobe hat sich entschieden, die Syntax in Flex den Empfehlungen des CSS3-Standards zu entnehmen. Zu Beginn des Stylesheets werden mit @namespace die Namespaces festgelegt. Dies muss vor allem anderen geschehen (d.h. vor @font-face oder Stildefinitionen). Im Beispiel ist „s“ ist die Abkürzungen für Spark und „mx“ für Halo.

[xml]
@namespace s „library://ns.adobe.com/flex/spark“;
@namespace mx „library://ns.adobe.com/flex/halo“;
[/xml]

Jetzt kann man mithilfe der Syntax Präfix|Komponente {...} gezielt auf eine Komponente zugreifen, z.B. mx|Button { color:#00FF00; }. Im Gesamten sieht dies nun so aus:

[xml]

@namespace s „library://ns.adobe.com/flex/spark“;
@namespace mx „library://ns.adobe.com/flex/halo“;

s|Button {
baseColor: #00A0E3;
}

mx|Button {
baseColor: #C9D187;
}

[/xml]

[kml_flashembed movie=“/wp-content/uploads/2009/04/CssExample.swf“ height=“75″ width=“400″ /]

Namespace für meistgenutze Komponenten weglassen

Wenn man beispielsweise zum größten Teil nur eine Art von Komponenten verwendet, kann man bei diesem Namespace das Präfix auch weglassen. Dieser Namespace wird dann zum Standard/Default, wenn nichts weiter dabeisteht. Man benötigt das Präfix dann nur für andere Namespaces, wodurch man Schreibarbeit spart.

[xml]

@namespace „library://ns.adobe.com/flex/spark“;
@namespace mx „library://ns.adobe.com/flex/halo“;

Button {
baseColor: #00A0E3;
}

mx|Button {
baseColor: #C9D187;
}

[/xml]

Das Beispiel liefert das gleiche Ergebnis wie oben zusehen ist.

Verwendet man z.B. nur die aktuellen Spark-Komponenten und möchte diese per Style-Sheet gestalten, geht dies deshalb so:

[xml]

@namespace „library://ns.adobe.com/flex/spark“;

Button {
baseColor: #00A0E3;
}

[/xml]

Link: CSS Namespaces Support

[ad]