Sonntag, 12. Februar 2012


Artikel

März 2010 | Artikel

e4 Preview: User Interface Styling mit CSS

(Link zum Artikel: http://www.entwickler.de/jaxenter/artikel/2924)

Eine kleine Vorschau auf die kommende Eclipse-Version 4.0

Text: Kai Tödter
  • Teilen
  • kommentieren
  • empfehlen
  • Bookmark and Share
Seit einiger Zeit schon wird an der nächsten Generation von Eclipse (e4) gearbeitet. Eclipse 4.0 wird eine ganze Reihe von Neuerungen und Erweiterungen bieten. Dieser Artikel geht auf eine dieser Neuerungen im Detail ein: UI-Styling mithilfe von CSS Stylesheets.
Teil 1   Teil 2   Teil 3   

Es fing alles auf der EclipseCon 2008 an: Eine Gruppe interessierter Eclipse-Enthusiasten diskutierte in einer BOF (Birds of a Feather Session), welche Features Eclipse 4.0 haben sollte und wie man diese realisieren könnte. Kurz danach ist das e4-Incubator-Projekt entstanden, das als "Spielwiese" für alle möglichen Ideen diente. Das Projekt ist inzwischen weiter fortgeschritten und bietet die Grundlage für Eclipse 4.0. Einige der Ziele von e4 sind:

  • Die Plug-in-Entwicklung soll einfacher werden
  • Bessere Kontrolle über das Look-and-Feel
  • Unterstützung verschiedener Ablaufumgebungen wie Web/RIA, Desktop, Server, Cloud, Embedded
  • Rückwärtskompatibilität für "API Clean Clients"

Mehr über e4 erfahren Sie auf der e4-Projekt-Homepage [1]. Dieser Artikel geht hauptsächlich auf den zweiten Punkt ein, nämlich wie man das Look-and-Feel einer e4-basierten RCP-Applikation mithilfe von CSS "stylen" (oder auch "themen") kann.

e4-Contacts-Demo
Ich bin Committer bei e4 und entwickle unter anderem eine kleine Demo, die auch alle Möglichkeiten der UI-Customization veranschaulichen soll. Im Kasten "Download und Installation" finden Sie eine kleine Anleitung, wie Sie die Demo installieren und laufen lassen können, um alle in diesem Artikel beschriebenen Dinge selbst auszuprobieren. Natürlich sind sowohl die Contacts-Demo als auch alle in diesem Artikel beschriebenen APIs "Work in Progress". Ich bemühe mich, die Contacts-Demo ständig an den aktuellen e4-Stand anzupassen. Trotzdem kann es natürlich passieren, dass manche Features nicht so funktionieren, wie sie sollten. Sollte Ihnen so etwas auffallen, seien Sie so freundlich und öffnen einen entsprechenden Bug.

CSS-Styling
Das e4 CSS-Styling basiert auf TK-UI von Angelo Zerr [2]. Neben ihm selbst haben noch andere Personen wie Kevin McGuire maßgeblich zur Portierung in e4 beigetragen. Da ich die Contacts-Demo mit CSS stylen möchte, wurde im Java-Code so gut wie gar kein Styling verwendet. Dementsprechend langweilig sieht das Ergebnis aus. Abbildung 1 zeigt einen Screenshot der Contacts-Demo ohne Styling.

Abbildung 2 zeigt exakt die gleiche Applikation mit ihrem Default-Styling. Das Default-Styling der Demo ist dunkel gehalten und verwendet Gradienten, also Farbverläufe, als Hintergrund für die Views, die Toolbar und die View-Titel. Dieses Look-and-Feel vermittelt verglichen mit der "langweiligen" ersten Abbildung bereits einen vollkommen anderen Eindruck.

Abbildung 3 zeigt wiederum die gleiche Applikation, dieses Mal mit einem helleren Styling. Im Gegensatz zum Default-Styling verwende ich hier bei den Views lineare statt radiale Gradienten.

Bei einem Vergleich der drei Abbildungen fallen neben den offensichtlichen Änderungen im Look-and-Feel noch einige weitere Dinge auf: Sowohl der Hintergrund der Menüleiste als auch der Hintergrund der Tabellen-Spalten-Titel können noch nicht gestylt werden. Das liegt daran, dass diese Features aktuell noch nicht vom SWT (Standard Widget Toolkit) unterstützt werden. Ich hoffe aber sehr, dass diese Features schnell vom SWT implementiert werden, da die meisten Betriebssysteme diese heutzutage unterstützen. Dabei muss man natürlich auch die Besonderheiten des jeweiligen Betriebssystems berücksichtigen, z. B. macht es keinen Sinn, bei Mac OS X den Hintergrund der Menüleiste zu stylen.

Teil 1   Teil 2   Teil 3   

andere Artikel dieser Serie

Kommentare