Monthly Archive for: ‘May, 2009’

e4 CSS Styling: Fun with Gradients


Today I read in the e4-dev mailing list that css styling now supports gradients (Thanks Kevin, Angelo and others!). I could not resist to try it out in my e4 contacts demo. Here is the result:


The css gradient definitions are quite simple:
For the composite: background-color: #101010 #373737 60%;
For the toolbar: background-color: #777777 #373737 #202020 50% 50%;

One little trick to get the labels having transparent background is to invoke setBackgroundMode(SWT.INHERIT_DEFAULT) on the current shell.

Instructions how to get and run the demo you find here.

Have Fun


Follow me on Twitter

e4 Contacts Demo


Recently I contributed my e4 contacts demo to the e4 (e4 = Eclipse 4) cvs repository. Goal of the demo is to give good examples for e4 RCP related topics, like

  • CSS based styling and theming
  • Modeling the application UI skeleton
    (menu, toolbar, parts, commands, handlers, …)
  • Data binding everywhere
  • Product branding (not started yet)
  • Co-hosting using p2 (self-update, not started yet)

Here is a screenshot of the application using a dark css based theme:


And here the same application using a brighter css based theme:


The styling is pretty simple right now, I will enhance it using textures and gradients as soon as these features are implemented. The next screenshot shows the EMF based UI model of the application (workbench) skeleton:


Modeling the application workbench UI like this is very easy and straight forward. Rather than dealing with complex layouts programmatically or using extension points you can get a decent application skeleton quickly.

How to get and run the demo?

  • Install the latest Eclipse 3.5 SDK (currently 3.5RC1)
  • Install the latest EMF SDK
  • Open the cvs repository:
  • Check out the project e4/releng
  • Import the following team project sets
    form releng/org.eclipse.e4.ui.releng:
  • After having imported all the necessary projects from cvs, open project org.eclipse.e4.demo.contacts/contacts.product
  • In the Overview tab of the configuration editor, click “Launch an Eclipse Application”
  • Now the contacts demo shoud start with the dark css theming

Have Fun!


Follow me on Twitter