The Rendering Framework in Eclipse 4 connects the model elements in the Eclipse application model with concrete user interface implementation classes.

A Renderer class is therefore responsible for creating user interface objects for certain types of model elements, monitoring their changes and reacting to these changes. Each model element typically has its own renderer object.

Eclipse 4 allows you to exchange the concrete user interface technology via the Rendering framework . This means that your Eclipse 4 based application could use a different user interface toolkit than SWT. For example you could use JavaFX or Swing for your application.

If you switch your renderer UI toolkit, you also need to re-implement your user interface components. For example a part written in SWT must be re-written in JavaFX to work together with a JavaFX Renderer.

A Renderer Factory determines for every model element the renderer. By default Eclipse 4 uses a SWT based Renderer Factory. The org.eclipse.e4.ui.workbench.renderers.swt plug-in contains this default implementation.

The WorkbenchRendererFactory class is the default renderer factory in Eclipse 4. This renderer factory is a big if / else block and returns the correct renderer for each model element.

Classes that implement this interface, implement the getRenderer() method. For each model element this method returns an object of type AbstractPartRenderer, which is responsible for drawing the model elements and for reacting to changes.

For example, if the model element is an instance of MPart, then an instance of the ContributedPartRenderer class will be created by this default Renderer Factory.

// Other if statements above
else if (uiElement instanceof MPart) {
  if (contributedPartRenderer == null) {
    contributedPartRenderer = new ContributedPartRenderer();
    initRenderer(contributedPartRenderer);
  }
  return contributedPartRenderer;
} 

Eclipse 4 allows you to register a custom implementation of the renderer factory. In this case an IRendererFactory implementation from the org.eclipse.e4.ui.workbench.swt.factories package is registered with the Eclipse application.

To do this you have to provide the rendererFactoryUri property pointing to the new factory class via the org.eclipse.core.runtime.products extension point.

Via your own renderer factory you can contribute your own renderer to existing model elements.

You can also extend the application model and define a new renderer for a new model element.

You find a description of this under the following URL: http://www.vogella.com/articles/Eclipse4ExtendModel/article.html

The following exercise serves as a simple example for your own renderer. It does not implement a real use case.

Add the following plug-ins as dependency to your com.example.e4.rcp.todo (short: todo) plug-in.

Create in your todo plug-in the com.example.e4.rcp.todo.renderer package.

Create the following two classes.

package com.example.e4.rcp.todo.renderer;

import org.eclipse.e4.ui.model.application.ui.MUIElement;
import org.eclipse.e4.ui.workbench.renderers.swt.SWTPartRenderer;
import org.eclipse.swt.SWT;
import org.eclipse.swt.browser.Browser;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Composite;

public class BrowserRenderer extends SWTPartRenderer {

  public static final String ID = "de.vogella.javascript.maps.view";

  @Override
  public Object createWidget(MUIElement element, Object parent) {
    final Composite mapComposite = 
        new Composite((Composite) parent, SWT.NONE);
    System.out.println(parent.getClass());
    mapComposite.setLayout(new GridLayout(1, false));
    final Browser browser = new Browser(mapComposite, SWT.NONE);
    browser.setUrl("http://www.vogella.com");
    GridData data = new GridData(SWT.FILL, SWT.FILL, true, true);
    browser.setLayoutData(data);
    return mapComposite;
  }

} 

package com.example.e4.rcp.todo.renderer;

import org.eclipse.e4.ui.internal.workbench.swt.AbstractPartRenderer;
import org.eclipse.e4.ui.model.application.ui.MUIElement;
import org.eclipse.e4.ui.model.application.ui.basic.MPart;
import org.eclipse.e4.ui.workbench.[CONTINUE...]
renderers.swt.ContributedPartRenderer;
import org.eclipse.e4.ui.workbench.[CONTINUE...]
renderers.swt.WorkbenchRendererFactory;

public class MyRendererFactory extends WorkbenchRendererFactory {

  private BrowserRenderer mapRenderer;

  @Override
  public AbstractPartRenderer getRenderer(MUIElement uiElement, 
      Object parent) {

    if (uiElement instanceof MPart) {
      if (mapRenderer == null) {
        mapRenderer = new BrowserRenderer();
        super.initRenderer(mapRenderer);
      }
      return mapRenderer;
    }

    return super.getRenderer(uiElement, parent);
  }

} 

Register your renderer in the plugin.xml file. Ensure the bundleclass points to the right class.

<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin>

   <extension
         id="product"
         point="org.eclipse.core.runtime.products">
      <product
        application="org.eclipse.e4.ui.workbench.swt.E4Application"
        name="to-do">
         <property
               name="applicationXMI"
               value="com.example.e4.rcp.todo/Application.e4xmi">
         </property>
         <property
               name="appName"
               value="to-do">
         </property>
      <property
        name="rendererFactoryUri"
        value="bundleclass://com.example.e4.rcp.todo/[CONTINUE...]
        com.example.e4.rcp.todo.renderer.MyRendererFactory">
       </property>
      </product>
   </extension>

</plugin> 

If you now start your application, every part will be rendered using the Browser widget.

After finishing the test, remove your renderer from the plugin.xml file again so that your application works is the same way as before.

Eclipse 4 RCP allows you to use any user interface technology for writing an rendering your user interface. There are already some default implementations available. This section lists the most popular ones.

Vaaclipse is a framework for building web applications using Eclipse 4 Platform and Vaadin. It allows to use the power of the Eclipse 4 in web development.

You find more information about this project on the following homepage: Vaaclipse

The following screenshots show demo application of Vaaclipse.

The e(fx)clipse provides a JavaFX renderer for Eclipse 4 RCP application. For more information see the e(fx)clipse homepage

Source Code of Examples