Suche
Kolumne: Lagebericht Eclipse-IDE

Eclipse Styling und das Dark Theme: So schick kann Eclipse aussehen!

Simon Scholz, Lars Vogel

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).

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.

Abb. 1: Für Leute, die es dunkel mögen: das Theme Darkclipse

Abb. 1: Für Leute, die es dunkel mögen: das Theme Darkclipse

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.

Abb. 2: Für Windows endlich verfügbar: farblich zu stylende Buttons

Abb. 2: Für Windows endlich verfügbar: farblich zu stylende Buttons

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.

W-JAX
 
Arno Haase

Neues aus der Java-Trickkiste

mit Arno Haase (Arno Haase Consulting)

Norman Lahme-Hütig

Java-8-Nachlese – Wie hat Java 8 die Java-Welt verändert?

mit Klaus Kreft (Angelika Langer Training/Consulting)

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).

Abb. 3: Für ein schöneres Eclipse: Scrollbars selbst rendern

Abb. 3: Für ein schöneres Eclipse: Scrollbars selbst rendern

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).

Abb. 4: So könnte das Styling von Tabs in Zukunft aussehen

Abb. 4: So könnte das Styling von Tabs in Zukunft aussehen

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.

Geschrieben von
Simon Scholz
Simon Scholz ist Eclipse Platform und e4 Committer. Er entwickelt auch am PDE, und Eclipse Gradle Tooling mit und nutzt seine langjährige Eclipse-RCP- und Plug-in-Erfahrung für Kundenimplementierungen, Eclipse-RCP-Workshops und Schulungen. Zudem hält er regelmäßig Vorträge auf Softwarekonferenzen bzgl. verschiedener Eclipse-Technologien.
Lars Vogel
Lars Vogel
Lars Vogel ist Geschäftsführer der vogella GmbH, die Kunden im Bereich Eclipse, Android und anderen Themen unterstützt. Als Project-Management-Committee-Mitglied, Eclipse-Projektleiter und Committer hilft er dem Eclipse-Projekt. E-Mail: lars.vogel@vogella.com
Kommentare
  1. bias2017-02-01 12:08:50

    "Daran sieht man den Vorteil, den die Nutzung einer Open Source IDE mit sich bringt."

    Stimmt. User von NetBeans und IntelliJ IDEA (Community Edition) können das bestätigen.

  2. Hans2017-02-01 12:31:30

    Finde ich gut

  3. SimpleDeveloper2017-02-01 15:00:36

    Da sieht man vor allem, worauf bei Eclipse Wert gelegt wird: das unwichtigste ist konfigurierbar, aber Eclipse verfügt bspw. seit Jahren über keine anständige Maven-Unterstützung (z.B. Problem mit den Maven lifecycle phases)...

  4. Jens S2017-02-01 18:36:45

    @SimpleDeveloper: Das kann ich nur unterschreiben. Die Maven-Unterstützung in Eclipse ist zwar schon besser geworden, aber von Netbeans bin ich anderes gewohnt.

    Trotzdem habe ich den Eindruck, dass wieder mehr Bemühungen in Eclipse als IDE gesteckt wird. Das sollte durchaus honoriert werden. Weitere Vereinfachungen, z.B. bei der Konfiguration, sind aber dringend notwendig. Die meisten Otto-Normal-Entwickler benötigen halt "nur" eine gute IDE, die sie bei ihrer täglichen Arbeit unterstützt, und keine Plattform-die-alles-kann-und-sein-will.

    Vielleicht schafft es JAXenter ja auch, mehr Autoren aus dem Umfeld der IntelliJ-IDEA- und Netbeans-Entwickler/Committer zu gewinnen, die dann die Vorteile "ihrer" jeweiligen IDE herausstellen können :-).

  5. Carsten2017-02-03 13:48:09

    @Jens S: Ja, es passiert im Moment einiges, um die Eclipse IDE zu verbessern - sowohl im Detail in den einzelnen Projekten als auch im Ganzen als Produkt. Schön, dass das von der Community wahrgenommen wird :)

    In Sachen Konfiguration tut sich übrigens auch schon an vielen Fronten was, z.B. mit dem Eclipse Installer und Arbeiten am Konfigurationsmanagement. Und z.B. mit Yatta Profiles for Eclipse (https://www.yatta.de/profiles/) lassen sich Setups mit nur wenigen Klicks einrichten, speichern und mit Teamkollegen teilen.

    Was Maven angeht, finde ich auch, dass noch viel passieren muss, wobei sich aber gerade die Lifecycle-Integration auch schon arg verbessert hat (zugegeben, da ist z.B. IntelliJ stärker, weil es Maven einfach sein Ding machen lassen kann, da es keinen eigenen Build Cycle hat - was in meiner persönlichen Erfahrung aber auch nicht der Weisheit letzter Schluss ist).

    Aber so unwichtig finde ich letztlich auch die Arbeit am Dark Theme gar nicht. Persönlich ist Dark zwar nicht so mein Ding, aber das Auge isst schließlich mit und Eclipse wird immer wieder vorgeworfen, dass es "altbacken" aussieht. Wenn die Bemühungen um ein Dark Theme dann dazu führen, dass die UI insgesamt etwas schicker und besser anpassbar wird, nehme ich das gerne mit. :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.