Neben dem klassischen hellen Styling gibt es inzwischen auch ein Dark Theme für Eclipse-IDE, das wir uns in der heutigen Kolumne einmal anschauen wollen. Außerdem zeigen wir, wie sich Buttons und Widgets individualisieren lassen.

Traditionell hat die Eclipse IDE ein helles Styling. Basierend auf den Stylingfähigkeiten von SWT gibt es Eclipse Themes, die mehr oder weniger dem Stil der Oberfläche des Betriebssystems folgen. Umschalten kann man das aktuelle Styling unter Windows | Preferences | General | Appearance. Hier findet sich auch die Möglichkeit, das Eclipse Dark Theme einzuschalten. Während Eclipse 3.x noch auf ein selbstgestricktes Theming API setzte, das eher schwierig zu verwenden war, hat sich das Plattformteam für Eclipse 4.0 überlegt, auf ein CSS-basiertes Styling zu setzen.

Lesen Sie auch: Kampf der Giganten: NetBeans, IntelliJ IDEA und Eclipse im Java-Tooling-Vergleich

Um der Entwicklungsumgebung die passende Oberfläche zu geben und einzustellen, wie das Eclipse UI auszusehen hat, definiert man eine CSS-Datei mit entsprechenden CSS-Selektoren. Hierfür kann man die SWT Widgets, Eclipse-Model-Elemente sowie die CSS-IDs und Klassen, die man im Code setzen kann, als CSS-Selektoren verwenden. Aktuell entspricht das Eclipse-Styling in etwa dem Standard CSS 2.1 (Listing 1).

Listing 1: Das Eclipse-Styling

Label {
  font: Verdana 8px;
  color: black;
}
Composite Label {
  color: black;
}
Text {
  font: Verdana 8px;
}
/* Identifies only those SWT Text elements
appearing within a Composite */
Composite Text {
  background-color: white;
  color: black;
}
SashForm {
  background-color: #c1d5ef;
}	
/* background uses a gradient */
.MTrimBar {
  background-color: #e3efff #c1d5ef;
  color: white;
  font: Verdana 8px;
}

Shell {
  background-color: #e3efff #c1d5ef 60%;
}

Dark Theme in Eclipse

Seit einigen Jahren ist es wieder relativ populär, mit dunklen Editoren zu arbeiten, wie etwa beim Sublime Editor oder auch in IntelliJ. Hier teilt sich das Entwicklerlager: Die einen finden ein Dark Theme sehr wichtig, die anderen finden so etwas vollkommen unnötig.

Die CSS Engine von Eclipse ließ natürlich auch ein dunkles Styling zu. Vor etwa drei bis vier Jahren hat das Plattformteam das populäre Moonrise Theme von Andrea Guarinoni in die Plattform eingebaut. Auslöser war eine Diskussion zwischen Uwe Sauerbrei, einem der Leader der Java User Group Hamburg und Organisator der Devoxx for Kids, und Lars. Uwe meinte, dass Eclipse dringend ein Dark Theme benötigte, um nicht tot zu wirken. Lars kontaktierte daraufhin Andrea und gemeinsam wurde das Moonrise Theme in die Eclipse IDE integriert.

Lesen Sie auch: Stylish, augenfreundlich, aufgeräumt: Das neue Eclipse-Theme “Clean Sheet”

Die ersten Versionen vom Dark Theme in Eclipse waren alles andere als ansprechend. Der Text war schwarz auf schwarzen Hintergrund, die alten GIF-Dateien sahen mit ihrem weißen Pixelrand richtig schlecht aus, und viele SWT Widgets und Plattformkomponenten ließen sich gar nicht erst stilistisch anpassen. Doch das Vorhandensein des Dark Themes als Standard in Eclipse hat einen enormen Druck auf die Eclipse-Entwickler ausgeübt. Dies führte dazu, dass sich in jedem Release die SWT-Styling-Mittel, die Performance und die Icons verbessert haben. Abbildung 1 zeigt das aktuelle Dark Theme unter Linux. Von den verbesserten Styling-Fähigkeiten profitieren auch das helle Eclipse und natürlich die RCP-Entwickler, die so eine voll zu stylende Applikation bekommen.

Aktuelle Entwicklungen des Dark Themes in Version 4.7

Traurig, aber wahr: Leider lässt sich unter Windows bisher weder die Hintergrund- noch die Vordergrundfarbe von Buttons einstellen. Zum Glück für Windows-Anwender hat Conrad Groth sich dieses Problems angenommen und es für Eclipse 4.7 gelöst (Abb. 2). Das SWT-Team evaluiert gerade, ob man die gleiche Lösung für Mac verwenden kann.

Leo Ufimtsev von Red Hat hat sich aktuell der inkonsistenten Farbwahl des Javadoc Popups und Javadoc Views in Eclipse angenommen. Leo ist derzeit dabei, dies sowohl im Dark Theme als auch im hellen Eclipse zu fixen.

Tabellenheader lassen sich in SWT bislang leider auch nicht stylen, doch das Plattformteam diskutiert, ob man hierfür ein API anbieten kann. Unter Linux kann man sie schon stylen, Conrad Groth hat bereits einen Prototyp für Windows geliefert. Des Weiteren arbeitet Lars an einem Patch, der es erlaubt, die Tabellenheader per CSS auszuschalten. So könnte man sie zumindest an den Stellen, die einem wirklich ins Auge stechen und wo sie nicht kritisch sind, per CSS ausschalten.

Zusätzlich gibt es natürlich viele kleine Stellen, an denen das Dark Theme die Widgets nicht richtig erreicht. All diese Stellen zu fixen ist eine Menge Arbeit, passiert aber Schritt für Schritt. Interessanterweise bekommt das Plattformteam in diesem Bereich recht viele Codebeiträge: Offenbar ist das Dark Theme inzwischen so gut, dass viele Entwickler es nutzen und bei Gelegenheit kleinere Unstimmigkeiten direkt durch Code Contributions lösen. Daran sieht man den Vorteil, den die Nutzung einer Open Source IDE mit sich bringt. So wurde z. B. gerade das „weiße Flackern“ in der Progress View gefixt.

Wichtiges Element: Scrollbar-Styling

Das SWT versucht stets, die nativen Widgets des Betriebssystems für das Rendern von SWT-Applikationen zu verwenden. Nur in Fällen, wo das Betriebssystem keine native Widget-Lösung bietet, wird es per Eclipse Canvas API selbst gezeichnet. Wenn das native Design des Betriebssystems nicht den Ansprüchen der Anwender genügt, ist es nötig, eigene Widgets zu erstellen.

Leider bringen so manche native Widgets auch Restriktionen mit sich und lassen sich nicht stylen. Beispiele dafür sind die Tabellenheader, Menübalken, Buttons (Windows 7) und auch Scrollbars (Linux und Windows). Für das letztgenannte Problem hat sich Frank Appel eine Lösung ausgedacht, in der Tree- und Table-Widgets in einem Composite gewrappt und eigene Scrollbars gerendert werden (Abb. 3).

Das ist natürlich ein großer Fortschritt für moderne User Interfaces. Allen voran für unser Dark Theme, in dem die nativen grauen Scrollbars in der Regel ein Dorn im Auge sind. Wir als Plattformteam sind natürlich stark daran interessiert, dass dieses Feature in den Kern von Eclipse Einzug hält. Daher gibt es bereits einen Eintrag in das Bugzilla von Eclipse, dessen Ziel genau das ist. Für den Nebula NatTable wurden diese individuell einstellbaren Scrollbars bereits adaptiert. Auch das LiClipse-Projekt hat sich dieser Scrollbars angenommen und das Problem, leicht modifiziert, gelöst.

Mögliche Erweiterungen für das Dark Theme

Natürlich gibt es auch interessante Ansätze, die noch nicht den Weg in die Eclipse-Plattform gefunden haben. Ein solcher Ansatz ist etwa der von Simon bereitgestellte Patch für das Hervorheben des jeweilig aktiven Tabs. Diese Art von Style findet man auch auf anderen Plattformen, wie beispielsweise Twitter (Abb. 4).

Alexander Kurtakov, Leiter des SWT-Teams von Red Hat, beschreibt in seinem Artikel, inwiefern SWT GTK nun auch auf CSS basiert. Es wird dabei das native GTK-Styling unterstützt, das sehr schnell ist und alles stylen kann. Man könnte so in Zukunft das SWT-Styling der Plattform direkt auf SWT mappen.

Auf der GitHub-Seite von Jeeeyul findet man seine Arbeit an einem sehr flexiblen CSS-Styling; leider scheint das Projekt eingeschlafen zu sein. Wir würden uns freuen, wenn sich jemand finden würde, der das Projekt wiederbelebt und die interessanten Teile für die Eclipse-Plattform aufbereitet.

Tests der CSS Engine und Anpassungen durch den Benutzer sollen möglichst leicht vonstattengehen. Hierfür planen Simon und Lars die offizielle Unterstützung des lokalen Ablegens einer CSS-Datei im Benutzerverzeichnis, das man parsen kann und welches dann das Styling beeinflusst. Das Feature gab es inoffiziell bereits, ist aktuell noch ein wenig fehlerhaft und sollte in einem der neuen 4.7 Milestones dann offiziell in Eclipse eingeführt werden.

Lesen Sie auch: Ansible IDE-Vergleich: IntelliJ vs. NetBeans vs. Eclipse

Zudem arbeitet Rolf Theunissen, ein neuer SWT Contributor, daran, SWT GTK unter Windows zu kompilieren. Rolf ist schon relativ weit und kann SWT-Applikationen mit dem GTK-Port schon unter Windows starten. Wenn der Port fertig wird, hat man automatisch ein voll stylebares SWT unter Windows.

Fazit

Eclipse 4.6 und das kommende 4.7 enthalten signifikante Verbesserungen des Dark Themes. Eclipse-RCP-Applikationen profitieren direkt von diesen Bestrebungen, da sie sich immer besser dem Unternehmensdesign anpassen lassen. Aktuell betreut Simon ein Eclipse-RCP-Kundenprojekt, das auf eine komplett gestylte SWT-Applikation setzt. Bei Tabellen setzt er auf das stylebare NatTable. Die wenigen SWT Widgets, die noch nicht dem vorgegebenen Styling des Kunden entsprechen, werden durch Custom Widgets ersetzt. Kunden können, wie dies zeigt, immer mehr auf SWT vertrauen, auch wenn es um das Styling geht. Und Freunde einer dunklen IDE können sich mit jedem Eclipse-Release mehr am Dark Theme erfreuen.