Embellishing the Sun God

CSS Styling in Eclipse Helios

LarsVogel
Vogel-Embellishing-the-sun-god

Using the technology provided by the Eclipse e4 project, the appearance of a User
Interface (UI) can be improved using Cascading Style Sheets (CSS). Too bad, that
one has to upgrade to Eclipse 4.0 first… But wait a second!

Using the technology provided by the Eclipse e4 project, the
appearance of a User Interface (UI) can be improved using Cascading
Style Sheets (CSS). Too bad, that one has to upgrade to Eclipse 4.0
first… But wait a second! That is not necessary. The styling
engine can
also be used in Eclipse 3.6
. This article demonstrates how to
give Eclipse 3.6 RCP applications a face-lift in a declarative
manner.

Despite all efforts, one can easily tell that an Eclipse 3.x RCP
application is based on the Eclipse platform. This consistent look
and feel can of course be an advantage, but beauty is in the eye of
the user, and due to RIA applications the users have become
increasingly pretentious. The Presentation API and the SWT API
offer the possibility of influencing the user interface. But this
approach increases the code size unnecessarily. Styling the
application using Cascading Style Sheets (CSS) solves this
problem.

CSS styling allows the developer to separate the application
source code from the code that influences the appearance, and an
Eclipse RCP application thus does not have to look like the Eclipse
IDE anymore. Using CSS one can influence various aspects of the
appearance of the UI, e.g., change different font properties,
accentuate focus and selection, and model gradient colors.

Styling using CSS

CSS is known from website design. A style sheet consists of
tags, each followed by key-value pairs in curly braces. The tag
identifies the element that should be styled, and the key-value
pairs set the attributes of the element, e.g., background color or
font size.

CSS and SWT

CSS can now not only be used to influence the appearance of
websites, but also the appearance of SWT widgets. The fact that the
declarative styling is based on the SWT API has the big advantage
that the styling works not only in Eclipse 4.0, but also in Eclipse
3.6. It is also possible to upgrade an existing CSS application in
Eclipse 3.6 to Eclipse 4.0 without any modifications. It is also
possible to style SWT individual widgets by calling the widget´s
setData(…)- method. For example, by calling
label.setData(“org.eclipse.e4.ui.css.id”,
“MyCSSTagForSpecialLabels”) on a label, the label can be
individually styled by referring to the MyCSSTag-ForSpecialLabels
tag in the style sheet. Please see the Eclipse wiki for a
mapping between SWT and CSS constructs.

Plugins and Extension Points

The plugin “org.eclipse.e4.ui.css.swt.theme” introduces the
extension point “org.eclipse.e4.ui.css.swt.theme”. In this way one
can register a theme, identified by an ID, by supplying a label and
a reference to a CSS. To use this plugin, one has to import it and
all its dependencies into the project´s Eclipse 3.6 workspace.
These plugins can be downloaded from the www.eclipse-magazin.de or
directly from the Eclipse e4 CVS. Figure 1 lists the plugin
dependencies.

 

Figure 1: Plug-in Dependencies

The plugin “org.eclipse.e4.ui.css.swt.theme” defines the
interfaces IThemeManager and IThemeEngine. IThemeManager is defined
as a declarative service (DS) and is automatically registered in
the BundleContext as soon as an “org.eclipse.e4.ui.css.swt.theme”
extension point is used. To use the ThemeManager, one then only has
to declare a dependency on “org.eclipse.e4.ui.css.swt.theme”. To
make things easier one can also declare a dependency on
“org.eclipse.equinox.ds”, which causes the DS implementation to be
handled directly in the launch configuration.

An example

In the following example we assume that the reader already has
experience with the creation of RCP
applications
and has had contact with Eclipse
commands
. We recommend the reader to import all plugins from
the website, since we only present part of the code in this
article. Our example is located in the plugin “de.vogella.rcp.css”.
We have enriched the View with as many different UI elements as
possible [Listing 1].

 

Please notice that there are no references to CSS styling in
View.java. The next step is to register a theme using the extension
point “org.eclipse.e4.ui.css.swt.theme” [Listing 2]. Here we define
an ID of the theme and provide a link to our style sheet. We create
the files “default.css” and “colorful.css”, each containing
different styling instructions, and put them in the “css”
folder.

Now we have to apply the style sheets. While this happens
automatically in Eclipse 4.0, it has to be done manually in Eclipse
3.6. Fortunately the IThemeManager is available as a declarative
service. This service should be called at some suitable point in
the plugin lifecycle, for example in the initialize(…) method of
the ApplicationWorkbenchAdvisor class. The method setTheme()applies
the styling [Listing 3]. In the sample code we use a helper class
“ThemeHelper”, which provides the static method getEngine().

Switching between themes

Using an Eclipse command, one can also change the theme during
runtime. It is as simple as calling the IThemeEngine setTheme(…)
method with the ID of the new theme, e.g.,
ThemeHelper.getEngine().setTheme(“de.vogella.rcp.css.themes.colorful”);
The command “SwitchThemeHandler”, shown in Listing 4, switches
between the two registered themes.

 

Figure 2 shows how our View looks after the theme
“de.vogella.rcp.css.themes.colorful” has been applied. It is also
possible to register new themes during runtime. The command
“LoadThemeHandler” illustrates how to achieve this.

Figure 2: Our View styled using “colorful. css”

Problems

The styling of SWT widgets using CSS is relatively new and
therefore still has some problems. For example it is not possible
to remove the styling from a UI once it has been applied.
Furthermore, not all UI components can be styled. For example, the
color of the SWT widgets Button and DateTime cannot be set and
menus cannot
be styled at all
.

Our example also illustrates through the usage of
“SwitchThemeHandler” that after applying a gradient background
color to a SWT Composite, the background color of the Composite
can
no longer be changed
.

Conclusion

The look and feel of Eclipse RCP applications can be improved,
and this is already possible in the Helios release. In the future
we expect new styling innovations to find their way into the SWT
API, thus making the appearance of Eclipse applications even more
flexible. There are still some problems with the styling
implementation, but given the speed with which the Eclipse e4
project is being developed this can be expected to change soon.
Nice new (out)look for Eclipse RCP.

Author
LarsVogel
Lars Vogel is a product manager at SAP AG and is in his spare time active in the Eclipse community. He publishes tutorials in the area of Java, Eclipse, Android, and web programming at his website http://www.vogella.de.
Comments
comments powered by Disqus