JAX London 2014: A retrospective
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