Skip to main content
Jump to: navigation, search

E4/UI/Running CSS demos

< E4‎ | UI
Revision as of 11:47, 20 November 2009 by (Talk | contribs) (Getting the examples)

There are three CSS examples available.

Getting the examples

After installing the e4 SDK, check out the e4 CSS example projects from CVS as follows:

  1. Start Eclipse with an empty workspace directory.
  2. Select File > Import... and select CVS > Projects from CVS, click Next.
  3. Copy the CVS repository location and paste it into the "Host" field to populate the wizard page:
  4. You should see "Host:, Repository path: /cvsroot/eclipse, User: anonymous, Connection type: pserver".
  5. Click Next and select the second option Use an existing module.
  6. Drill down as follows: e4 > org.eclipse.e4.ui > bundles and select one project:
    1. org.eclipse.e4.ui.css.legacy
  7. Then drill down as follows: e4 > org.eclipse.e4.ui > examples and select three more projects:
    1. org.eclipse.e4.ui.examples.css
    2. org.eclipse.e4.ui.examples.css.nebula
    3. org.eclipse.e4.ui.examples.css.rcp.
  8. Click Finish.

Running the examples

  • To run the CSS RCP Mail app, select the project org.eclipse.e4.ui.examples.css.rcp, popup the menu, and pick Run As > Eclipse Application
  • To run the CSS SWT editor, select the project org.eclipse.e4.ui.examples.css, popup the menu, and pick Run As > Java Application, picking CSSEditorSWTWidgets
  • To run the CSS Nebula editor, select the project org.eclipse.e4.ui.examples.nebula, popup the menu, and pick Run As > Java Application, picking CSSEditorNebulaGallery

CSS'ified RCP Mail Application

E4 css mail.jpg

This is the RCP mail app example, with CSS goodness added. Also acts as an example of how to add CSS to your application.


  • Entirely styled with a CSS stylesheet.
  • Notice that the subject is italicized, in bold, and in an orange colour, this is to indicate that the message is unread. Clicking on the mail icon in the toolbar will mark the message as read, and these styles will be gone. This demonstrates use of changing the CSS class name of an element to switch which style it uses:
.messageSubjectUnRead {
    font-size: 14;
	font-style: italic;
    font-weight: bold;
	color: #F2973D;
.messageSubjectRead {
    font-size: 12;
	font-style: normal;
    font-weight: normal;
	color: #666666;

CSS Live Editors

There are two examples that show a number of widgets styled with a stylesheet, with an editor area where you can modify the stylesheet. Changes in the stylesheet are immediately reflected in the widgets.

CSS SWT Editor

E4 css swt example.jpg
This provides a number of SWT widgets being styled.

CSS Nebula Example

E4 css nebula example.jpg
We have CSS support for styling the Nebula Gallery widget (as seen in the e4 photo demo). This little example is like the SWT editor above, but for styling the Gallery widget.

Known issues

You may spot IllegalStateExceptions being logged to the console if you try to change the contents of the editor. Please see bug 289251.

Back to the top