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, …

About these ads

11 Responses to “A week at e4 – Themeing in e4”

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

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

    • 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. 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!

    • 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. 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. Forget my last sentence in the previous comment.

  6. 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”);

Trackbacks/Pingbacks

  1. A week at e4 – Share me please « Tomsondev Blog - May 17, 2010

    [...] all the magic and because the CSS-Themeing is applied to 3.x, 4.0 and native e4-applications (see here how and why this possible) my editor looks and behaves the same on all 3 [...]

  2. Eclipse 3.6 styling with CSS and the ThemeManager » Eclipse Papercuts - June 15, 2010

    [...] styling with CSS and the ThemeManager No Comments   by Lars Vogel / June 15th, 2010 Tom Schindl and Kai Tödter already blogged about the new Eclipse e4 ThemeManager. If you want to use the [...]

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

Follow

Get every new post delivered to your Inbox.

Join 665 other followers

%d bloggers like this: