Eclipse e4 – Styling your UI with css

Update This description has been updated in the following tutorial: Eclipse e4 tutorial.

Eclipse e4 allows to style your applications via css like stylesheets. The following gives a short example how to get started with css stylecheets.

Create a new e4 product “de.vogella.e4.css” similar to the description Your first Eclipse e4 application. Of course you can also copy “de.vogella.e4.first” and edit the package, Application.xmi and the product to fit the new project “de.vogella.e4.css” or just extend “de.vogella.e4.first” with the usage of stylesheets.

I like to have my examples separate therefore I use “de.vogella.e4.css”.

First lets extend our UI from last time a little bit. Change View1.java to the following.


package de.vogella.e4.css.views;

import org.eclipse.e4.core.services.context.IEclipseContext;
import org.eclipse.jface.layout.GridLayoutFactory;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Text;
import org.eclipse.ui.services.IDisposable;

public class View1 implements IDisposable {

	public View1(Composite parent, final IEclipseContext outputContext) {
		GridLayout gridLayout = new GridLayout(2, true);
		Label label = new Label(parent, SWT.NONE);
		label.setText("E4 is new");
		GridData gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL);
		gridData.horizontalIndent = 20;
		label.setLayoutData(gridData);
		Text text = new Text(parent, SWT.NONE);
		text.setText("and different");
		
		label = new Label(parent, SWT.NONE);
		label.setText("This is a button");
		new Button(parent, SWT.PUSH).setText("My button");

		GridLayoutFactory.createFrom(gridLayout).generateLayout(parent);
	}

	public void dispose() {

	}
}

Run your application and you get the following:

e10css10

This is obvious an application which does not yet use css styleing.

Add now the folder css to your application and create the following file myfirststylesheet.css:


Label {
	font: Verdana 20px;
	color:rgb(178,34,34);
	background-color:rgb(255,255,255) rgb(0,0,0) 60%;
}

Button {
	font: Verdana 15px;
	background-color:rgb(255,255,255) rgb(0,0,0);  
}


Text {
	font: Verdana 15px;
	background-color:radial rgb(255,255,255) rgb(0,0,0);  
}

Add the property “applicationCSS” which points to the css file to your product:

<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin>
   <extension
         point="org.eclipse.e4.workbench.parts">
          <part
            class="de.vogella.e4.first.views.View1"
            label="My first E4 View"
            parentId="org.eclipse.e4.ui.tags.navigation">
      </part>
   </extension>
   <extension
         id="product1"
         point="org.eclipse.core.runtime.products">
      <product
            application="org.eclipse.e4.ui.workbench.swt.application"
            name="vogella">
         <property
               name="appName"
               value="vogella">
         </property>
         <property
               name="applicationXMI"
               value="de.vogella.e4.css/Application.xmi">
         </property>
         <property
               name="applicationCSS"
               value="platform:/plugin/de.vogella.e4.css/css/myfirststylesheet.css">
         </property>
      </product>
   </extension>

</plugin>

Run your Eclipse e4 application and you should receive this amazing and beautiful UI .

e10css20

Arguably the beauty lies in the eye of the beholder. ;-)

I hope this get you started in playing around with the css styling. Check the existing cvs examples (org.eclipse.e4.demo.contacts and org.eclipse.e4.ui.examples.css) to learn more about. You find these in the Eclipse cvs trunk under E4->org.eclipse.e4.ui. The usage of cvs is described Source Code Guide of Eclipse 3.5 (Galileo) – Using cvs

I’m sure you can conjure a nicer UI then I did in my example. :-)

Good luck in your E4 journey!

About Lars Vogel

Lars Vogel is the founder and CEO of the vogella GmbH and works as Eclipse and Android consultant, trainer and book author. He is a regular speaker at international conferences, He is the primary author of vogella.com. With more than one million visitors per month this website is one of the central sources for Java, Eclipse and Android programming information.
This entry was posted in Eclipse and tagged , . Bookmark the permalink.

9 Responses to Eclipse e4 – Styling your UI with css

  1. rretzbach says:

    Thanks Lars,

    this looks really easy to use. I’ve also followed your “first e4 app” tutorial, but can’t see how you came up with the CSS selectors “Label”, “Text” etc. How can I get those element names?

    Best regards

  2. Lars Vogel says:

    @rretzbach I just used the SWT element names. You can also check the other examples (contact, etc.) for more elements. I’m not aware of a central place which lists these elements.

  3. Daniel Milosevic says:

    Lars,

    I’m loving the CSS functionality as part of E4 and thank you again for getting the first notes out there to run it. I apologize, however, if I’m asking a question that was already discussed.

    Can I make any of this work in conjunction with your tutorials?
    http://www.vogella.de/articles/RichClientPlatform/article.html

    What if I wanted to use just E4 CSS with an Eclipse 3.5 RCP app?

  4. Lars Vogel says:

    @Daniel You can not use the CSS styling in an Eclipse 3.5 RCP application.

    I read once that the E4 team is planning to port the CSS to the upcoming Eclipse 3.6 but I’m not sure if this has already been decided.

  5. Daniel Milosevic says:

    @Lars Ok, that makes a little more sense to what I was reading about E4 and the proposed “compatibility layer” for Eclipse RCP 3.5.

    Wait for E4 or continue building app in 3.5, hmmm, what to do….

  6. The CSS engine can be used to apply styles to arbitrary SWT widgets so it actually can be used on 3.x code. I don’t think more advanced things like the styling of individual workbench parts will work (at least not easily) but there is nothing stopping you from making a dialog window with some buttons and asking the CSS engine to parse a stylesheet and apply its styles onto said window. Hence, you can style your individual views (since your view’s content is just contained within a Composite and is ultimately made up of SWT widgets) but the styling of something like an RCP application’s individual view tabs based on what kind of view it is is not going to work, at least, not easily.

    Please refer to bug 278869 for some more information.

  7. Lars Vogel says:

    @Remy: Thank you for the correction, I didn’t know you could use CSS styling in Eclipse 3.5.

    @Daniel: Looks like it is possible and its only a question of finding out how to do it.

  8. Just to add to what Remy said and to help reduce the confusion:

    CSS will indeed run in 3.5, with just the CSS projects and required libs, nothing else from e4, no compatibility layer.

    I have an RCP demo which I was working on but ran out of time to refine and document that runs on 3.5.

    The one tricky bit was in trying to get the CTabFolders styled, since the Presentation Framework will attempt to apply the preference colors to the tab folders. Thus both CSS and the presentation were attempting to change the tab folder colors. To get around this, a new presentation will be provided as part of the example.

    I hope to have this out soon.

  9. Lars Vogel says:

    @rretzbach The following wiki page contains a description of some of the css styling options: http://wiki.eclipse.org/E4/CSS/SWT_Mapping

Comments are closed.