Gradienten

Die aktuelle Implementierung (Stand Juni 2009) enthält Support für lineare und radiale Gradienten. Diese Gradienten können prinzipiell überall dort verwendet werden, wo auch herkömmlich Farben stehen könnten. Die Syntax für lineare Gradienten ist im Moment die Folgende: [gradient] [linear] color_1 color_2 [color_n]* [percent_n-1]*.

Wenn also z. B. ein Hintergrund einen linearen Gradienten von Orange nach Schwarz aufweisen soll, ist die einfachste Syntax: background-color: orange black. Dies entspricht genau der Anweisung: background-color: orange black 100%. Wenn anstatt der 100% nur 60% angegeben werden, bewirkt dies, dass der Übergang nicht ganz unten (100%), sondern schon nach 60% der Komponentenhöhe vollzogen ist. Die aktuelle Syntax von radialen Gradienten ist ähnlich, nur dass anstatt des optionalen "linear" ein "radial" angegeben werden muss, z. B.: background-color: radial orange black.

Der Fokus-Point wird aktuell immer auf (WIDTH/2,TOP) der Komponente gesetzt, die den entsprechenden Hintergrund haben soll. Der Radius wird im Moment fest auf die Komponentenbreite gesetzt. Das gibt ganz nette Ergebnisse und der Radius WIDTH/2 kann einfach durch Hinzufügen von 50% realisiert werden. Da SWT im Moment noch keine radialen Gradienten unterstützt, habe ich als temporären Workaround die Java-6-Klasse RadialGradientPaint für die Implementierung benutzt. Sobald SWT radiale Gradienten unterstützt, werde ich die Implementierung anpassen. Das BREE (Bundle Runtime Execution Environment) für die e4 Workbench Bundles ist auf J2SE 1.5 gesetzt, braucht also kein Java 6. Das führt im Moment dazu, dass radiale Gradienten unter Java 5 linear gerendert werden und nur unter Java 6 funktionieren. Auch dies wird sich ändern, sobald SWT radiale Gradienten unterstützt. Abbildung 4 zeigt einige Beispiele für Gradienten, wie sie in der aktuellen e4-Implementierung gerendert werden.

Die Syntax (und der dazugehörige Funktionsumfang) wird auf jeden Fall noch überarbeitet und erweitert werden. Die aktuelle Implementierung zeigt bereits die Möglichkeiten auf und dient als Basis für eine spätere ausgereifte Version. Bei linearen Gradienten denke ich etwa an die Angabe von vertical/horizontal bzw. einer Richtung, die durch zwei Punkte festgelegt wird. Bei radialen Gradienten könnte man einen Fokuspunkt mit Radius und relative Positionsangaben wie TOP, WIDTH/2 etc. verwenden.

Offene Fragen

Neben der Funktionalität und Syntax von Gradienten gibt es noch einige andere offene Fragen bezüglich CSS-Styling. Im Moment hat eine Applikation genau ein Stylesheet. Aber was soll man mit Bundles machen, die eigene UI-Komponenten mitbringen, die auch mit CSS gestylt werden wollen? Soll das Styling dynamisch zur Laufzeit geändert werden können, z. B. mit einem Theme-Switching-Menü? Wie behandelt/merged man dabei Dinge, die programmatisch gestylt wurden? Dies sind nur einige Beispiele für Fragen, die bis zum Release geklärt werden müssen. Wenn Sie sich aktiv beteiligen möchten, öffnen Sie entsprechende Bugs oder posten zur e4-dev-Mailingliste [3]. Natürlich können Sie mir auch direkt Feedback zum Thema e4-CSS-Styling geben (kai.toedter[at]siemens.com). Wenn Sie automatisch auf dem Laufenden gehalten werden wollen, folgen Sie mir auf Twitter (www.twitter.com/kaitoedter) oder lesen Sie meinen Blog (www.toedter.com/blog).

Fazit

Mithilfe von CSS ist es auf sehr einfache Weise möglich, ein auf verschiedene Look-and-Feels angepasstes UI für eine e4-RCP-Applikation zu implementieren. Das Projekt steht dabei noch am Anfang, hat aber das Potenzial, eine ganze Reihe von Anforderungen, die heutzutage an GUIs von modernen Rich Clients gestellt werden, zu erfüllen.

Links & Literatur

1. e4-Project-Homepage
2. TK-UI
3. e4-dev-Mailingliste