Eclipse e4

Eclipse e4 is the next generation of the Eclipse Platform. The project has 3 main objectives:

  • Simplify the Eclipse programming model: This simplification will result in reduced development and maintenance costs and enable a larger developer community to leverage the platform in their own Eclipse-based applications. In my opinion, this is great because the learning curve for eclipse has always been very steep
  • Enable the platform for use on emerging web-based runtime technologies: This move will ensure that the platform remains a compelling and viable application framework in a rapidly changing web technology landscape, and it will allow e4-based applications to leverage web technologies, while remaining insulated from specific technology choices that may quickly become obsolete.
  • Broaden participation in development of the platform: This community driven effort reduces the risks associated with building on a platform largely funded from a single source. Having a large and diverse group of commercial backers, will ensure the platform remains vibrant and viable over the long term.

Eclipse e4 Demos

I plan to get some of the Eclipse e4 demos working. I will put comments here and possibly some code if I add to them.  I tried the e4 photo demo, it is very cool to see how things are changing, gone is the application.java class and it is replaced by a more declarative Application.xmi.

My First Eclipse e4 Application

Much of the beginning of this is pulled from here and it meant to supplement it as we extend the functionality discussed in that blog post. We will go further and add menu items with actions. There are a few prerequisites. The first is you will need to have the latest version of Java installed, which you can get here. The second is you will need Eclipse e4 version 0.9, which you can get here. The final requirement is a general understanding of Eclipse. This is not intended as an introduction to Eclipse in general, but more how to use the next generation alpha version of the tools to create a basic next generation application.

You will need to install as you have done previous versions. Once this is complete, start Eclipse.

As of version 0.9 of Eclipse, there is no wizard to help create the basic parts of a new application so we will have to do some of this manually.

To create a new plugin project, do the following:

  • Go to top level menu and select File > New. From the wizard that comes up, select Plug-in Project and click Next.
  • For Project name, enter something like ncsa.e4.sample. Everything else on the wizard page can remain as default. Click Next.
  • Uncheck the box Generate an Activator. Also, do not check the box This Plug-in will make contributions to the UI nor should you select the radio button that you would like to create an eclipse rich client application. Simply click Finish. See the image of the new plugin project wizard below.

We will need to modify the dependencies for this plugin so go to the Dependencies tab of the Manifest and add the following dependencies:

  • org.eclipse.ui
  • org.eclipse.core.runtime
  • org.eclipse.e4.ui.workbench
  • org.eclipse.e4.ui.workbench.renderers.swt
  • org.eclipse.e4.ui.workbench.renderers.swt.contribution
  • org.eclipse.e4.ui.workbench.swt
  • org.eclipse.e4.ui.services
  • org.eclipse.e4.core.services

After doing this, go to the Extensions tab in the Manifest and click the Add... button. Add the org.eclipse.e4.workbench.parts and org.eclipse.core.runtime.products extension points. The org.eclipse.e4.workbench.parts is a new extension point in e4 for defining view parts. This replaces the Views and Editors from the 3.x branch of Eclipse. The second extension point is where we will define our product. A new parameter has been created called applicationXMI which is a parameter to the model of our UI. We'll discuss that in more detail later.

Unfortunately, the UI is not in place to add extensions so at this point we will need to manipulate the plugin.xml file directly. Go the the plugin.xml tab, which should have been added once we added those extension points, and enter the following:

Next, let's create the view we specified in the plugin.xml file called SampleView in the package ncsa.e4.sample.views. When creating SampleView, make sure it implements the org.eclipse.e4.core.services.IDisposable interface.

SampleView implements IDisposable
public SampleView(Composite parent, final IEclipseContext outputContext)
{
    Text text = new Text( parent, SWT.NONE );
    text.setText( "Hello World" );
    GridLayoutFactory.fillDefaults().generateLayout( parent );
}

public void dispose()
{
}

Next, we need to create the modeled UI and specify the parts in the aforementioned Application.xmi file. Create a new File in ncsa.e4.sample/Application.xmi, making sure you provide it with the extension xmi. After creating the file, Eclipse might open it with an error message. In the window it opened it in, click on the Open with Text Editor button and add 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="500" height="320">
    <children policy="VerticalComposite">
      <children xsi:type="application:MSashForm" policy="HorizontalSash">
        <children xsi:type="application:MStack">
          <children xsi:type="application:MContributedPart" id="SampleView" iconURI="" name="Sample View" tooltip="My Sample View" URI="platform:/plugin/ncsa.e4.sample/ncsa.e4.sample.views.SampleView"/>
        </children>
        <weights>100</weights>
      </children>
    </children>
  </windows>
</application:MApplication>

After saving the file and closing it, if you cannot reopen it you probably have a syntax error. You will need to right click on the file and use Open With > Text Editor, or you may have to go edit the file by hand. This seems to be an Eclipse bug of some sort since no xml editor seems to want to open the file. If the text editor will not open the file, close and restart Eclipse seems to fix the issue. When in doubt, close and restart Eclipse is a good way to go. After you have successfully edited the file, you should be able to use Open With > Sample Reflective Ecore Model Editor and see something similar to the image below:

Now that we have a modeled UI, we need to create a product file to launch our simple application. To do this, go to File > New > Other and under Plug-in Development select Product Configuration. Click Next. Where it says File name, enter something like Sample.product. Where it says Initialize the file content select the radio button that says Create a configuration file with basic settings. Click Finish.

Enter the following information in the product file that opens:

After entering the above information, click on the Dependencies tab and add:

  • org.eclipse.e4.ui.workbench
  • ncsa.e4.sample

Finally, click the Add Required Plug-ins button. You should now be able to go back to the Overview tab and click the link Launch an Eclipse application and see something similar to the following:

This application isn't much to look at yet and lacks a Exit menu option. First, let's create an exit handler.

ExitHandler.java
package ncsa.e4.sample.handlers;

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

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

Now, we need to edit the Application.xmi to add a File menu and our Exit menu item. Currently, there is no way to contribute commands and menu options from the commands framework without bringing in the entire legacy workbench. This will be added in the future so for now, we must edit the model. See below for the changes:

<?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="500" height="320">
    <menu>
      <items xsi:type="application:MMenuItem" name="File">
        <menu>
	  <items xsi:type="application:MMenuItem" 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" id="SampleView" iconURI="" name="Sample View" tooltip="My Sample View"
            URI="platform:/plugin /ncsa.e4.sample/ncsa.e4.sample.views.SampleView"/>
	</children>
	<weights>100</weights>
      </children>
    </children>
    <handlers id="" URI="platform:/plugin/ncsa.e4.sample/ncsa.e4.sample.handlers.ExitHandler" persistedState="" command="//@command.0" />
  </windows>
  <command id="application.exit" name="Exit"/>
</application:MApplication>

After saving the changes, re-launch the application and you should now have a File menu with an Exit option.

Before moving on to the next section regarding CSS styling, let's add a SWT Button to our view so we can demonstrate a few of the CSS options for styling SWT widgets.

CSS Styling

The first thing we need to do is let the application know we want to use CSS to control the look and feel of the application. To do this, go back to the manifest and click on the Extensions tab. In the same place where we added the applicationXMI property, add another property called applicationCSS with the value platform:/plugin/ncsa.e4.sample/css/UIStyle.css. After creating the property, create a new File called UIStyle.css and add the following content to it:

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

Button {     
    font: Verdana 8px; 
}

#SampleView {     background-color: gradient radial #575757 #101010 60%; 

}

You will notice we gave the SampleView an id="SampleView" in the Application.xmi file. This allows us to style the view using the above style sheet, with a reference to the views id. You should see a view similar to the one below:

Eclipse 3.5 Application in Eclipse e4

The next step for me is to try and get some legacy RCP application code working on the e4 compatibility platform. From there I will try to get MAEviz working. It seemed more logical to start with something small and learn from my mistakes before I try to get a large application like MAEviz to work in e4.

MAEviz in Eclipse e4

I'm trying to get MAEviz to launch with the e4 compatibility platform to see where it comes up short and if there are any bugs/features I can submit to the e4 project.  For my reference, I am listing the plugins I had to download to get MAEviz to launch.  I'm hopeful that MAEviz will launch once I fix all the missing plugins, even if all the features don't quite work as expected.

  • org.apache.commons.lang
  • No labels