Adobe Flex 4

8 Anpassen der Benutzeroberfläche (S. 165-166)

8.1 Einleitung

Der Flash Builder bietet zahlreiche Möglichkeiten, mit relativ wenig Zeitaufwand selbst komplexe Anwendungen umzusetzen. Besonders die Vielzahl an vorhandenen Komponenten, die das Flex-Framework zu einem großen Teil ausmachen, trägt dazu bei, dass viele wiederkehrende Problemstellungen einfach gelöst werden können. So tragen die User Interface Komponenten und die Layout-Container dazu bei, dass der Entwickler mit wenig Aufwand den Funktionsumfang der Bedienelemente nutzen und das Layout gestalten kann, ohne die eigentliche Funktionalität der einzelnen Komponenten selbst entwickeln zu müssen. Der Einsatz eben dieser Komponenten stellt den Entwickler jedoch recht schnell vor ein neues Problem: Das visuelle Erscheinungsbild (Look and Feel) der entstehenden Anwendungen ist sehr ähnlich. Das einheitliche und aufeinander abgestimmte Erscheinungsbild der vorhandenen Komponenten ist zwar durchaus ansprechend und reicht für manche Anwendungen bereits aus, wenn es jedoch darum geht, individuelle Kundenwünsche umzusetzen, steht man als Entwickler früher oder später vor der Frage:

Wie passe ich das Erscheinungsbild der verwendeten Bausteine an, sodass die Anwendung den Kundenansprüchen gerecht wird, jedoch ohne einzelne Bausteine grundlegend neu zu entwickeln?

Wie Sie wahrscheinlich bereits vermutet haben, gibt das Flex-Framework auch in dieser Hinsicht dem Entwickler verschiedene Möglichkeiten und Werkzeuge an die Hand, die es ermöglichen, das gesamte Erscheinungsbild einer Anwendung an seine individuellen Ansprüche anzupassen. In diesem und dem nächsten Kapitel zeige ich Ihnen, wie Sie mit relativ wenig Aufwand durch den gezielten Einsatz von Styles und Skins Ihrer Anwendung ein individuelles Aussehen verpassen können. Dabei werden Sie neben dem Einsatz von CSS kennenlernen, wie Sie eigene Fonts einbetten, wie Sie durch das Scale9-Verfahren Grafiken für das Skinning aufbereiten und dass das Aussehen von Komponenten auch ohne den Einsatz von Grafiken programmiert werden kann. Im Rahmen von CSS hat sich im Vergleich zu Flex 3 einiges verändert. So ist aufgrund der neuen Spark-Komponenten und der Möglichkeit, die bisherigen Halo-Komponenten gleichermaßen verwenden zu können, die Notwendigkeit entstanden, diese Unterscheidung auch in CSS sichtbar zu machen. Hierzu wurden Namespaces und neue Selektoren eingeführt.


8.2 Styles

Die Eigenschaften bzw. Attribute zum Verändern des visuellen Erscheinungsbildes von Komponenten in Flex nennt man Styles. Mithilfe dieser Styles lassen sich einzelne Komponenten oder ganze Komponentengruppen innerhalb der Anwendung anpassen. So lassen sich bspw. die Hintergrundfarbe der Anwendung, die Schriftart sämtlicher Schaltflächen oder die Highlight-Colors einer ganz bestimmten Liste über Styles verändern. Einige Style-Eigenschaften werden dabei automatisch an untergeordnete Kindelemente vererbt. Außerdem können Style-Definitionen in CSS-Klassen zusammengefasst werden, die ebenfalls voneinander erben können. Wie Sie das realisieren und welche Regeln bei der Vererbung von Style-Definitionen gelten, erfahren Sie auf den folgenden Seiten.