A week at e4 – Themeing in e4


Core Work-Items

Themeing in e4 is done using CSS like Declarative Syntax. The latest nightly builds introduce an extension point which allows people to define and contribute CSS-Files to make up a theme from different css-Files.

So now plugin-developers can contribute stylesheets which hold CSS-Definitions (classes, …) they use in their UI-Bundles. One of the interesting things in this sense is that even the latest 3.6 builds can make use of the CSS themeing support (an example is my Workbench-Modeleditor which now runs unmodified in 3.6).

The extension point is used to make up a theme in a declarative manner but IThemeManager is also registered in the OSGi-Service registry and can be access by client code e.g. to switch the UI-Theme on the fly.

In 3.x e.g. like this:

public class CSSViewPart extends ViewPart {
  private static final String CSS_CLASS_KEY = "org.eclipse.e4.ui.css.CssClassName"; //$NON-NLS-1$

  @Override
  public void createPartControl(Composite parent) {
    Bundle b = FrameworkUtil.getBundle(getClass());
    BundleContext ctx = b.getBundleContext();
    ServiceReference ref = ctx.getServiceReference(IThemeManager.class.getName());

    IThemeManager mgr = (IThemeManager) ctx.getService(ref);
    final IThemeEngine engine = mgr.getEngineForDisplay(parent.getDisplay());
    // ...
  }
}

In e4 you’d better use simply @Inject to even get the theme engine bound to the workbench instance:

public class CSSView {
  @Inject
  private IThemeManager manager;

  @Inject
  private IThemeEngine engine;
}

An example CSS-File could look like this:

.h2 {
	color: white;
    font-size: 20pt;
}

.container {
    background-color: gradient radial #575757 #101010 60%;
}

and the Java-Code to use it

final Composite p = new Composite(parent, SWT.NONE);
p.setData(CSS_CLASS_KEY, "container");
p.setBackgroundMode(SWT.INHERIT_DEFAULT);
p.setLayout(new GridLayout(2, false));

Label l = new Label(p, SWT.NONE);
l.setData(CSS_CLASS_KEY, "h2");
l.setText("This is a headline");
l.setLayoutData(new GridData(SWT.FILL, SWT.DEFAULT, false, false, 2, 1));

engine.applyStyles(p, true); // Apply the CSS-Instructions of the current active theme

The last line applies the current theme CSS-Information on all elements below the given widget.

Switching between themes is quite easy using:

engine.setTheme("org.eclipse.e4.demo.contacts.dark");

Which makes the 3.x ViewPart look like this with a radial black gradient:

or a bright one:

The currently needed plug-ins from e4 and orbit are:

Model Editor

I started refactoring some code so that model modification can be run using the e4-CommandService. Beside that I added support for Main-Menu creation and fixed some other small things.

Update: Added description how to use the IThemeEngine, …

13 thoughts on “A week at e4 – Themeing in e4

  1. Thomas April 26, 2010 / 3:33 pm

    And for the newbie: How will the IThemeEngine affect controls then ?

    • tomeclipsedev April 26, 2010 / 4:27 pm

      I’ve added some information to the blog how to apply style sheets, switch themes, …

  2. Chris Aniszczyk April 26, 2010 / 4:38 pm

    Is there anyway to bake in the theme support in 3.6? Creating your own view parts to give them the ability to be themed is kind of cumbersome.

    • tomeclipsedev April 26, 2010 / 5:48 pm

      There’s a default theme created and it is applied to the display at the start. The main problem is that none of the widgets, … have assigned IDs so all you can do is to globally redefine controls but I’m not sure this what you are looking for. The extension point allows you to contribute to this default theme. So what we could probably ship is something that creates a Perference Page to switch the theme.

  3. Max Bureck April 27, 2010 / 7:36 am

    Does the engine know default keys for the controls (e.g. qualified class names) following the convention over configuration paradigm? In other words: is it possible to theme elements that were not prepared using l.setData(CSS_CLASS_KEY, … )?
    BTW: That stuff is very cool, great work!

    • tomeclipsedev April 27, 2010 / 8:17 am

      Yes. You can use Tree {}, Table {}, Composite {}, … but this will then naturally apply to ALL tables, trees, composite, … probably not what you want just like you use H2 {}, DIV {} in HTML+CSS. IIRC you can even use Composite.mycomp > Tree {} which would only apply to a Tree which is below a composite with the CSS-Class mycomp (but I might be wrong here).

  4. Lars Vogel June 1, 2010 / 9:55 pm

    Thanks Tom. I updated in cvs the “org.eclipse.e4.ui.examples.css.rcp” example to use the Theme Manager.

    Here is use ApplicationWorkbenchAdvisor initialize() to set another theme then the default one. I think setting lots of attributes to the default via extensioin points can be tiresome.

  5. Lars Vogel June 1, 2010 / 10:16 pm

    Forget my last sentence in the previous comment.

  6. Stefan Nöbauer December 1, 2011 / 3:35 pm

    Is there a way to directly access the css via CSSEngine? I was trying to set the colors of the Eclipse 3.6 TabItem by simply try to get the background-color from the CSS ….. something like engine.getStyle(“TabItem”);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s