vogella.de

Eclipse e4 provides a wizard for creating e4 application. Start Eclipse e4 and select File -> New -> Others -> e4 -> e4 Application Project

Create the project "de.vogella.e4.rcp.wizard" and follow the screenshots.

Select the file "de.vogella.e4.rcp.wizard.product" and select the "Dependencies" tab. Press "Add required plugins".

Switch to the overview tab and launch your product.

The first time the launch may fail. Open the launch configuration.

and press "Add required plugins". Also select "Validate plugins prior to launching".

Launch your application again.

The Eclipse e4 workbench is modeled via Eclipse EMF . The models contains the graphical elements of the workbench, e.g. the parts (views, editors, menu bars) and some non-visual parts of the command framework, e.g. handlers, commands and keybindings. This scope of the model does not contain information about the individual UI elements within one part.

The Eclipse e4 model structure is defined via the plugin "org.eclipse.e4.ui.model.workbench" which contains the "UIElements.ecore" meta-model.

The meta-model contains basically the following elements:

The "UIElements.genmodel" defines among other things that interfaces for the workbench model starts with M.

The base e4 application model is placed in an XMI file. This file is provided the e4 application via the parameter "applicationXMI" of the extension point "org.eclipse.core.runtime.products". This file is a standard XMI / text file which can be defined and modified by a text editor, the standard EMF editors or via the e4 wizard.

Model elements can also be supplied via the extension point "org.eclipse.e4.workbench.model". These elements are then read and merged by the application into one application model.

This file and is read during startup from the application. The contained information in the model is used by the application to construct the workbench. Changes during runtime are written back to the model and are available during runtime.

The e4 model has three components which will be combined.

The workbench model needs to the user changes and must be able to react to changes in the Application.e4xmi and the model contributions. The workbench models handles this as follows: On first startup, populate the model as described under 1 and 2. Changes during the session will be recorded as deltas, and we persist these deltas instead of the whole model when we shut down. Then, for subsequent startups, populate the model as described under 1 and 2 and then apply any persisted deltas from 3. If there are deltas that don't make any sense then skip them. The delta are applied to the model based on the ID's of the UI component.

Create a new Plugin project "de.vogella.e4.rcp.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.

Create the package "de.vogella.e4.rcp.first".

Add the following dependencies to your MANIFEST.MF.

This should result in the following entries in MANIFEST.MF. Your version of the plugins may be different.

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

			

Create a new product configuration "de.vogella.e4.rcp.first.product".

Make sure you select "org.eclipse.e4.ui.workbench.swt.E4Application" as the application.

Add as dependency the plugin "de.vogella.e4.first".

The product creation should have created the extension point "org.eclipse.core.runtime.products" in the file "plugin.xml". Currently there is a bug please see Creating a product configuration and "org.eclipse.core.runtime.products" .

Verify that "org.eclipse.e4.ui.workbench.swt.E4Application" is selected as application and maintain the properties "appName" and "applicationXMI".

The resulting plugin.xml should look like the following.

				
<?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="First e4 application">
         <property
               name="applicationXMI"
               value="de.vogella.e4.rcp.first/Application.e4xmi">
         </property>
         <property
               name="appName"
               value="First e4 application">
         </property>
      </product>
   </extension>
</plugin>

			

Create the file "Application.e4xmi" with the following content.

				
<?xml version="1.0" encoding="ASCII"?>
<application:Application 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/UIModel" id="Application">
  <children xsi:type="application:Window" id="Window"/>
</application:Application>


			

Tip

After creating it you may have to open it with the text editor.

Open this file with the EMF model editor.

For every model element you can maintain its model properties via the property view.

Create a launch configuration based for your product and run your application. The result should look like the following.

Now we will add some SWT UI elements. Add therefore a dependencies to "org.eclipse.swt" in MANIFEST.MF.

Create the following class.

				
package de.vogella.e4.rcp.first.parts;

import javax.inject.Inject;

import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Text;

public class View1 {

	private final Composite parent;

	// e4 will inject the composite "parent" into the view
	@Inject
	public View1(Composite parent) {
		// the following is standard SWT Stuff
		this.parent = parent;
		
		final GridLayout layout = new GridLayout(2, false);
		parent.setLayout(layout);
		
		createLable("Release");
		createText("E4");
		createLable("Purpose");
		createText("Doing awesome stuff");
	}

	// Standard SWT Stuff
	private void createLable(String text) {
		Label label = new Label(parent, SWT.NONE);
		label.setText(text);
		GridData gridData = new GridData(GridData.HORIZONTAL_ALIGN_FILL);
		gridData.horizontalIndent = 20;
		label.setLayoutData(gridData);
	}

	// Standard SWT Stuff
	private void createText(String text) {
		GridData gridData = new GridData(GridData.FILL_HORIZONTAL);
		Text textField = new Text(parent, SWT.NONE);
		textField.setText(text);
		textField.setLayoutData(gridData);
	}

}

			

To add this view to your application, select your Application.xmi and right-click on Window. Select New Children -> Children Part

Maintain the properties. Use the URI "platform:/plugin/de.vogella.e4.rcp.first/de.vogella.e4.rcp.first.parts.View1". The first part of this URI is the plugin and the second one the package. Make sure you don't have a typo here.

Run again your application you it should look like the following.

Congratulations. You have hand-crafted your first full featured Eclipse e4 application.

Create the class which will handle the command.

				
package de.vogella.e4.rcp.first.handlers;

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

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

			

Select Application.xmi and create the following.

The resulting Application.xmi looks like the following.

				
<?xml version="1.0" encoding="ASCII"?>
<application:Application 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/UIModel" id="Application">
  <children xsi:type="application:Window" label="My first e4 application" iconURI="" tooltip="" id="Window" onTop="true" width="200" height="200">
    <children xsi:type="application:Part" id="View1" style="" URI="platform:/plugin/de.vogella.e4.rcp.first/de.vogella.e4.rcp.first.parts.View1" containerData="" label="Hallo" tooltip=""/>
    <children xsi:type="application:WindowTrim">
      <children xsi:type="application:ToolBar">
        <children xsi:type="application:DirectToolItem" URI="platform:/plugin/de.vogella.e4.rcp.first/de.vogella.e4.rcp.first.handlers.ExitHandler" label="Exit"/>
      </children>
    </children>
    <mainMenu>
      <children xsi:type="application:MenuItem" id="" label="File">
        <children xsi:type="application:DirectMenuItem" URI="platform:/plugin/de.vogella.e4.rcp.first/de.vogella.e4.rcp.first.handlers.ExitHandler" label="Exit"/>
      </children>
    </mainMenu>
  </children>
</application:Application>

			

If you run the application it should look like.

As describe earlier e4 allows that model elements are contributed via the extension point "org.eclipse.e4.workbench.model". Model components can be parts (views or editors), commands, handlers and most other elements from the e4 meta-model.

Create a new e4 project "de.vogella.e4.rcp.modelcontribution". Create two views "de.vogella.e4.rcp.modelcontribution.parts.View1" and "de.vogella.e4.rcp.modelcontribution.parts.View2" .

Define the following "Application.e4xmi" file.

				
<?xml version="1.0" encoding="UTF-8"?>
<application:Application 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/UIModel" xmi:id="a" id="myapplication">
  <children xsi:type="application:Window" xmi:id="_m-KkfC2LEd-RMdxMTPbEkQ" label="Window" id="_m-KkfC2LEd-RMdxMTPbEkQ" width="500" height="400">
    <children xsi:type="application:PartStack" xmi:id="_Uq3zAC4qEd-CRdAyrDY9Rw" id="_Uq3zAC4qEd-CRdAyrDY9Rw">
      <children xsi:type="application:Part" xmi:id="_Lzk0cC4lEd-xNPM3xY6yzA" id="de.vogella.e4.rcp.modelcontribution.parts.View1" URI="platform:/plugin/de.vogella.e4.rcp.modelcontribution/de.vogella.e4.rcp.modelcontribution.parts.View1" label="My View" iconURI="" tooltip=""/>
      <children xsi:type="application:Part" xmi:id="_r0NGEC4qEd-CRdAyrDY9Rw" id="de.vogella.e4.rcp.modelcontribution.parts.View1" URI="platform:/plugin/de.vogella.e4.rcp.modelcontribution/de.vogella.e4.rcp.modelcontribution.parts.View2" label="My second View" iconURI="" tooltip=""/>
    </children>
    <mainMenu xmi:id="_gK2vQS4oEd-CRdAyrDY9Rw" id="_gK2vQS4oEd-CRdAyrDY9Rw">
      <children xsi:type="application:MenuItem" xmi:id="_lpaKAC4lEd-xNPM3xY6yzA" id="_lpaKAC4lEd-xNPM3xY6yzA" label="File">
        <children xsi:type="application:DirectMenuItem" xmi:id="_mgPrYC4lEd-xNPM3xY6yzA" id="_mgPrYC4lEd-xNPM3xY6yzA" URI="platform:/plugin/de.vogella.e4.rcp.modelcontribution/de.vogella.e4.rcp.modelcontribution.handlers.ViewAddHandler" label="Add View"/>
      </children>
    </mainMenu>
  </children>
</application:Application>

			

Create a folder "xmi" in your project and create the following file".

				<?xml version="1.0" encoding="ASCII"?>
<application:ModelComponents 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/UIModel" xsi:schemaLocation="http://www.eclipse.org/ui/2008/UIModel ../../org.eclipse.e4.ui.model.workbench/model/UIElements.ecore" xmi:id="_UW9TZfr3Ed6gmo7caOxU9h">
  <components xmi:id="_UW9TZfr3Ed6gmo7caOxU9q" id="_UW9TZfr3Ed6gmo7caOxU9q" parentID="_m8-RoS2LEd-RMdxMTPbEkQ">
    <descriptors id="de.vogella.e4.rcp.modelcontribution.parts.View2" URI="platform:/plugin/de.vogella.e4.rcp.modelcontribution/de.vogella.e4.rcp.modelcontribution.parts.View2" label="My Model Component" category="_m-UVdy2LEd-RMdxMTPbEkQ"/>
  </components>
</application:ModelComponents>

			

Add the extension point ""org.eclipse.e4.workbench.model" to your plugin.xml with the uri "xmi/components.e4xmi".

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

   <extension
         id="product"
         point="org.eclipse.core.runtime.products">
      <product
            name="de.vogella.e4.rcp.modelcontribution"
            application="org.eclipse.e4.ui.workbench.swt.E4Application">
         <property
               name="appName"
               value="de.vogella.e4.rcp.modelcontribution">
         </property>
         <property
               name="applicationXMI"
               value="de.vogella.e4.rcp.modelcontribution/Application.e4xmi">
         </property>
         <property
               name="applicationCSS"
               value="platform:/plugin/de.vogella.e4.rcp.modelcontribution/css/default.css">
         </property>
      </product>
   </extension>
   <extension
         id="id1"
         point="org.eclipse.e4.workbench.model">
      <snippet
            uri="xmi/components.e4xmi">
      </snippet>
   </extension>

</plugin>

			

Add now the "ViewAddHandler" class.

				
package de.vogella.e4.rcp.modelcontribution.handlers;

import javax.inject.Inject;

import org.eclipse.e4.core.services.context.IEclipseContext;
import org.eclipse.e4.ui.model.application.MApplication;
import org.eclipse.e4.ui.model.application.MPart;
import org.eclipse.e4.ui.model.application.MPartDescriptor;
import org.eclipse.e4.ui.model.application.MUIElement;
import org.eclipse.e4.ui.model.application.MWindow;
import org.eclipse.e4.workbench.modeling.EPartService;
import org.eclipse.e4.workbench.modeling.EPartService.PartState;
import org.eclipse.e4.workbench.ui.IWorkbench;
import org.eclipse.emf.common.util.EList;

import de.vogella.e4.rcp.modelcontribution.parts.View2;

public class ViewAddHandler {
	@Inject
	private IEclipseContext context;
	@Inject
	private EPartService service;

	public void execute(IWorkbench workbench) {
		MWindow window = (MWindow) context.get(EPartService.PART_SERVICE_ROOT);
		MApplication app = (MApplication) (MUIElement) window.getParent();
		EList<MPartDescriptor> descriptorList = app.getDescriptors();
		for (MPartDescriptor partDesc : descriptorList) {
			System.out.println(partDesc.getId());
			if (partDesc.getId().equals(View2.ID)) {
				MPart part = service.showPart(partDesc.getId(),
						PartState.ACTIVATE);
				break;
			}
		}
	}
}

			

If you start the application then you should be able to select your menu and this should add the additional View to to application.

The layout and the appearance of HTML Webpages can be styled via Cascading Style Sheets (CSS). Similar Eclipse e4 allows to style your UI widgets via CSS properties.

Each UI widget can be addressed via the corresponding CSS class. Colors of widgets can defined via differences ways, e.g. the color white can be described via #white, rgb(255,255,2555) or #ffffff.

It is also possible to set a data tag for a specific SWT UI element and use this data tag in the CSS. For example you can set the tag for an label via:

				
Label label = new Label(parenet, SWT.NONE);
label.setData("org.eclipse.e4.ui.css.id","MyCSSTagForLabel");
			

This element can be addressed in the CSS via:

				
#MyCSSTagForLabel{
	color:#blue;
}
			

Styling supports gradients for the background color of UI controls. Linear and radial gradients are supported. To define a gradient use:

				
// linear gradient
background-color: gradient linear color_1 [color_2]* [percentage]*

// For example
background-color: gradient linear white black 
background-color: gradient linear white black blue
background-color: gradient linear white black 50%
background-color: gradient linear white black 50% 20%

// radial gradient
background-color: gradient linear color_1 color_2 [percentage]

// For example
background-color: gradient radial white black
background-color: gradient radial white black 50%

			

If you use the optional percentage in the definition then the color change will be done after the defined percentage.

Create the folder "css" in your application and create the following file "myfirststylesheet.css".

				
Label {
	font: Verdana 20px;
	color:rgb(178,34,34);
	background-color:rgb(255,255,255) rgb(0,0,0) 60%;
}

CTabItem, ToolBar, Button, CBanner, CoolBar {
	font-size: 9;
	background-color: blue;
}

Button {
	font: Verdana 15px;
	background-color:rgb(255,255,255) rgb(0,0,0);
}

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

			

Add the property "applicationCSS" to your application in extension point "org.eclipse.core.runtime.products". This property which points to the css file to your product:

Run your application it should look like the following.

For more information about the available styling options please see Wiki for css styling .

Eclipse e4 introduces also a new service concept and dependency injection for these services.

See Eclipse e4 services Wiki for an overview of the available services.

Change the code of your view to the following to inject the Logger service and to get the IEclipseContext injected into your view.

				
package de.vogella.e4.rcp.first.parts;

import javax.inject.Inject;

import org.eclipse.e4.core.services.Logger;
import org.eclipse.e4.core.services.annotations.PostConstruct;
import org.eclipse.e4.core.services.context.IEclipseContext;
import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Text;

public class View1 {
	
	@Inject private Logger logger;
	@Inject private IEclipseContext context;
	@Inject private Composite parent;
	
	// PostConstruct ensures that the dependency injection has been finished 
	// this this method is called 
	@PostConstruct
	public void init() {
		// If you don't inject the Logger you could alternatively 
		// get it via the IEclipseContext with the following statement
		// Logger log= (Logger) context.get(Logger.class.getName());
		System.out.println(context!=null);
		System.out.println(logger!=null);
		logger.info("UI will start to build");
		
		Label label = new Label(parent, SWT.NONE);
		label.setText("E4 is new");
		Text text = new Text(parent, SWT.NONE);
		text.setText("and different");
	}

}

			

http://www.vogella.de/code/codeeclipse.html Source Code of Examples