Create your first Eclipse e4 application

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

Eclipse released on the 29 July 2009 the tech preview version 0.9 of Eclipse e4, which can be downloaded here.

I wasn’t able to find a description how to create an new application based on E4. Starting from the CVS example is possible but I wanted to start from scratch. After several failed attempts to create an E4 application I believe I have found a way to create an E4 application. I assume others will have similar problems so I wanted to share my experience.

To follow this description you need to have knowledge how to develop Eclipse Plugins in Eclipse 3.5 or earlier. Check out this Eclipse Plugin Development Tutorial.

So lets get started with e4.

Download e4. Extract it and start it is similar to older Eclipse versions.

Currently there is no wizard which creates a working scaffold of an E4 application. We will therefore use the exsting plugin templates.

Create a new Plugin project “de.vogella.e4.first”. Do not select “Generate an activator”, nor “This plug-in will make contributions to the UI” nor “Would you like to create a rich client application”. Do not select a template. Press finish.

e410

This will open the Plugin Perspective, switch here to the Package Explorer to see your new project.

Create the package “de.vogella.e4.first”. The result should look like the following.

e412

Select your MANIFEST.MF and add the following dependencies to your plugin.

Manifest-Version: 1.0
Bundle-ManifestVersion: 2
Bundle-Name: First
Bundle-SymbolicName: de.vogella.e4.first;singleton:=true
Bundle-Version: 1.0.0.qualifier
Bundle-RequiredExecutionEnvironment: JavaSE-1.6
Require-Bundle: org.eclipse.ui,
 org.eclipse.core.runtime,
 org.eclipse.e4.ui.workbench;bundle-version="0.9.0",
 org.eclipse.e4.ui.workbench.renderers.swt;bundle-version="0.9.0",
 org.eclipse.e4.ui.workbench.renderers.swt.contributions;bundle-version="0.9.0",
 org.eclipse.e4.ui.workbench.swt;bundle-version="0.9.0",
 org.eclipse.e4.ui.services;bundle-version="0.9.0",
 org.eclipse.e4.core.services;bundle-version="0.9.0"

You need (some of) these plugins for the usage of E4 features.

Add the following extension points. I noticed that for some of the features you have to modify the plugin.xml directly as the UI does not support them. But you have to create the plugin.xml via the MANIFEST.MF file; as I created it directly as a new file I received a strange system behavior.


<?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="product"
         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.first/Application.xmi">
         </property>
      </product>

   </extension>

</plugin>

“org.eclipse.e4.workbench.parts” is a new extension point by which you can define your view parts, formally known as views and editors.

The extension point “org.eclipse.core.runtime.products” has a new parameter “applicationXMI”. This is a parameter to the model of your UI. We came to this later. You also do not define your own application; we use “org.eclipse.e4.ui.workbench.swt.application”.

Create a product configuration called “vogella.product”. This is similar to Eclipse 3.5; see here for a description: Eclipse Product Configuration.

e420

Make sure you select “org.eclipse.e4.ui.workbench.swt.application”.

e430

Add as dependency to your product the plugin “org.eclipse.e4.ui.workbench”. Add also the plugin “de.vogella.e4.first”.
Press “add required plugins”.

Create the following two classes:


package de.vogella.e4.first.handlers;

import org.eclipse.e4.workbench.ui.IWorkbench;

public class ExitHandler {
	public void execute(IWorkbench workbench) {
		workbench.close();
	}
}

and

package de.vogella.e4.first.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.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) {
		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");
		GridLayoutFactory.fillDefaults().generateLayout(parent);
	}

	public void dispose() {

	}
}

You need a model for your application. In the parameter “applicationXMI” we earlier defined that this model will be “de.vogella.e4.first/Application.xmi”. Create the file Application.xmi with the following content.


<?xml version="1.0" encoding="ASCII"?>
<application:MApplication xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:application="http://www.eclipse.org/ui/2008/Application">
  <windows name="Main" x="100" y="100" width="800" height="600">
    <menu>
      <items xsi:type="application:MMenuItem" name="File">
        <menu>
          <items xsi:type="application:MMenuItem" id="" name="Exit" command="//@command.0"/>
        </menu>
      </items>
    </menu>
    <children policy="VerticalComposite">
      <children xsi:type="application:MSashForm" policy="HorizontalSash">
        <children xsi:type="application:MStack">
          <children xsi:type="application:MContributedPart" iconURI="" name="My View" tooltip="My first View" URI="platform:/plugin/de.vogella.e4.first/de.vogella.e4.first.views.View1"/>
        </children>
        <weights>30</weights>
        <weights>70</weights>
      </children>
    </children>
    <handlers id="" URI="platform:/plugin/de.vogella.e4.first/de.vogella.e4.first.handlers.ExitHandler" persistedState="" command="//@command.0"/>
  </windows>
  <command id="application.exit" name="Exit"/>
</application:MApplication>

This is the EMF model which defines your UI. Eclipse should display this model in a EMF editor so that you can investigate it. In this model you find your view and command definition. The content can be viewed via the properities view.

e450

Now start your application from your vogella.product. Starting it directly from the plugin.xml will not work (easily).

If you receive the error “org.eclipse.core.runtime.AssertionFailedException: null argument:-applicationXMI argument missing” check you plugin.xml. E4 created in several cases twice the products entry.

You should be rewarded ;-) with this user interface:

e460

With this first application I hope you can started using the E4 advanced features, e.g. CSS styling, etc.

My final thoughts: Eclipse e4 has already amazing capabilities for a tech review release. The new modeled UI removes the need for a lot of boilerplate code.

Try it out!

 
Tags: , , ,
Filed under: Eclipse

Comments

  1. Tom Schindl Says:

    Great! This is what is needed for many people to get started. I think we should try to write a PDE Wizard we could plug into E4 which creates such a minimal RCP.

    Maybe you would like to file a bug against E4 so that we can start working on such a thing?

  2. Lars Vogel Says:

    Thanks for the feedback Tom. I also hope that this will help others to get started with E4 and increase the user feedback the E4 team receives.

    I create https://bugs.eclipse.org/bugs/show_bug.cgi?id=286448 for the Wizard.

  3. Dimitris Kolovos Says:

    Great article! Thanks for sharing it.

  4. Wim Jongman Says:

    Great work Lars. Thanks.

  5. Kai Tödter Says:

    Thanks Lars! I planned to do a similar blog but it’s great that you did it first!

  6. Chandresh Gandhi Says:

    very good and helpful article … thanks !!

  7. Fred Says:

    Thanks for this article ! I’m curious to try E4 out, just to see how it could compare with a JBoss Seam + JSF RichFaces solution

  8. Philipp Kursawe Says:

    Nicely done. However stay away from Require-Bundle, at least in e4. Its a bad habbit and should not be taught anymore.

  9. Lars Vogel Says:

    @Philipp require-bundle it is just handy to get a working runtime configuration. What would be the proposal to use? Require package?

  10. Daniel Milosevic Says:

    A million thanks Lars for sharing!

  11. Eric Jain Says:

    Cool! But looks like boilerplate code is being replaced with boilerplate XML?

  12. Lars Vogel Says:

    Heise (German IT magazin) mentions my E4 article: http://www.heise.de/developer/Eine-erste-Anwendung-mit-e4-erstellen–/news/meldung/143519

  13. Dimitri Koami Missoh Says:

    Thanks for sharing. I nice one like all other of your articles.

  14. Eclipse E4 – Styling your UI with css » Eclipse Papercuts Says:

    [...] 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, [...]

  15. shady shrif Says:

    thanks a lot Lars you gave me hope :D

    waiting for your new posts ;)

  16. Emeric Kwemou Says:

    Hello mister Lars,
    thank you for your post.
    The UILements.ecore has been modified since this post, and it is not possible to use
    Application.xmi with new E4 Millestone.
    since there a fews ressources like this post about “Getting Started with E4″,
    it would be nice if you update Application.xmi.
    Best regards
    Emeric

  17. Lars Vogel Says:

    @Emeric: I have a look once I find the time…

  18. Mareck Says:

    It seems like, the Example Application will still work even if the extension org.eclipse.e4.workbench.parts is not defined in plugin.xml. Why should we define it twice?

  19. Brian de Alwis Says:

    For those using 1.0 milestone builds, you need to add org.eclipse.equinox.ds and org.eclipse.equinox.event to your product file.

  20. Lars Vogel Says:

    @Mareck: Sorry for the long delay before replying. True, this can be removed. I opened Bug Report to get the contacts examples adjusted.

  21. Lars Vogel Says:

    @Brian: Thanks for the tip. I’m currently working on an re-worked version of this description.

  22. Lars Vogel Says:

    @Everybody: You find an updated and corrected version of the description here: http://www.vogella.de/articles/EclipseE4/article.html

  23. Eclipse e4 tutorial – Update » Eclipse Papercuts Says:

    [...] the past I had several requests to update Create your first Eclipse e4 application to the latest changes in [...]

  24. Luis Carlos Moreira da Costa Says:

    @LuisCM: Thanks for the tip!

Leave a Reply