Creating an EEF editor

Summary

This tutorial covers the instalation of Extended Editing Framework (EEF) and the creation of a model editor.

Instalation and Requisites

1. Eclipse IDE for Java Developeers, version 3.6.2 (Helios SR2 release).
   Available at: http://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/heliossr2
2. EEF (version 3.1.0)
   Install "Extended Editing Framework - Extension" from the "EEF 1.0 update site" (http://download.eclipse.org/modeling/emft/eef/updates/releases/1.0)

Extended Editing Framework

Extracting the DSL to its own plugin

fa3d3728795139903b49a3293d0a0389402c75cd

This is an optional part of the "Building the Droid DSL editor with Xtext" tutorial, but is a required part of this tutorial. The metamodel generated in the previous tutorial will be used in this tutorial.

Creating a new EMF project:

1. File > New > Project...
2. Choose Eclipse Modeling Framework > Empty EMF Project
3. Set the project name "org.emf.example.droid"
4. Finish the wizard.

Moving the metamodel to its own plugin

Make sure you have generated the Xtext language artifacts (by running the MWE2 Workflow). It will update the generated Ecore metamodel.

1. Locate the file Droid.ecore in the org.xtext.example.droid project (the Xtext project). It is located at the src-gen folder, inside the org.xtext.example.droid package.
2. Move the file to the org.emf.example.droid project (the EMF project). Place it under the model folder.
3. Create a new Genmodel file in the EMF project
4. In the model folder, select the Droid.ecore file and go to menu File > New > Other...
5. Eclipse Modeling Framework > EMF Generator Model
6. Name the file Droid.genmodel and place it inside the model folder
7. Select Ecore model
8. Browse workspace and chose the Droid.ecore file.

Generating code with a genmodel

83b29c9f2d4c9f1e8e55393b750cc3d43c739efe

A genmodel is ...

To generate the code you must:

1. Open the created Droid.genmodel file.
2. Click the menu Generator > Generate All

We will not use the org.emf.example.droid.tests. We will use only the editor related projects (org.emf.example.droid.edit and org.emf.example.droid.editor).

Initializing EEF Models

b41560c359e8aa695d7a9bf96be0d784e221fa07

1. Create a folder named model inside the org.emf.example.droid.edit project
2. In the org.emf.example.droid.emf project, right-click the Droid.genmodel file
3. Choose EEF > Initialize EEF models
4. As a destination folder, choose the model folder inside the org.emf.example.droid.edit project

This will create two files:

• Droid.components
• Droid.eefgen

Preparing the Edit project to EEF generation

f08d242e05a91b1c504fd8bc50191538bbf23915

In order to generate code from the EEF model, we need to prepare the Edit project (org.emf.example.droid.edit).

The code generated by the EEF models will be placed in a src-gen folder inside the project where the models reside. So we need to create this folder and add it to the build path.

1. Right-click the org.emf.example.droid.edit project
2. Choose Build Path > New Source Folder...
3. Create a src-gen folder

Next step is adding the EEF runtime plugin as a dependency in the Edit plugin:

1. Open plugin.xml file
2. Click the Dependencies tab
3. Click Add button and choose org.eclipse.emf.eef.runtime plugin
4. Select the recently added org.eclipse.emf.eef.runtime plugin and click Properties...
5. Check Reexport this dependency option
6. Save the file

Generating the EEF architecture code

b9747e38780749a280ef146f40f94281899bec65

1. Right click the Droid.eefgen file (in the model folder under org.emf.example.droid.edit project)
2. Choose EEF > Generate EEF Architecture

Then you need to configure the plugin to export the generated package to the Editor plugin:

1. Open plugin.xml
2. Click the Runtime tab
3. Click Add
4. Choose droid.providers package and click Ok
5. Save the file

Replacing the default EMF editor with the EEF editor

0bb04a1c2cbe6d9e4d9eaa599cc2d741e38c697b

In the Edit project (org.emf.example.droid.edit):

1. Open the src-gen/droid_properties.plugin.xml
2. Click the Source tab
3. Copy the content inside the <plugin> node
4. Open the plugin.xml
5. Paste the content inside the <plugin> node.
   Note that you should not replace its content.

Now we need to replace the grid-based editor to a tab-based editor. Open DroidEditor.java in the Editor project (org.emf.example.droid.editor)

1. Add the org.eclipse.ui.views.properties.tabbed.ITabbedPropertySheetPageContributor interface to DroidEditor class.
   Caution: You need to add @implements ITabbedPropertySheetPageContributor inside the user section in the Javadoc in order to keep the code generation from reverting the changes.

//...

import org.eclipse.ui.views.properties.tabbed.ITabbedPropertySheetPageContributor;

//...

/**
 * This is an example of a Droid model editor.
 * <!-- begin-user-doc -->
 * @implements ITabbedPropertySheetPageContributor
 * <!-- end-user-doc -->
 * @generated
 */
public class DroidEditor
	extends MultiPageEditorPart
	implements IEditingDomainProvider, ISelectionProvider, IMenuListener, IViewerProvider, IGotoMarker, ITabbedPropertySheetPageContributor {

//...

2. Implement the method getContributorId()

/** (non-Javadoc)
 * @see org.eclipse.ui.views.properties.tabbed.ITabbedPropertySheetPageContributor#getContributorId()
 * @generated NOT
 */
@Override
public String getContributorId() {
	return PROPERTIES_CONTRIBUTOR;
}

and define your contributor ID

/**
 * @generated NOT
 */
private static final String PROPERTIES_CONTRIBUTOR = "droid.properties";

finally we will replace the declaration of the Eclipse standard properties view by a tabbed properties view:

3. Replace

/**
 * This is the property sheet page.
 * <!-- begin-user-doc -->
 * <!-- end-user-doc -->
 * @generated
 */
protected PropertySheetPage propertySheetPage;

with

/**
 * This is the property sheet page.
 * <!-- begin-user-doc -->
 * <!-- end-user-doc -->
 * @generated NOT
 */
protected TabbedPropertySheetPage propertySheetPage;

4. Replace

/**
 * This accesses a cached version of the property sheet.
 * <!-- begin-user-doc -->
 * <!-- end-user-doc -->
 * @generated
 */
public IPropertySheetPage getPropertySheetPage() {
	if (propertySheetPage == null) {
		propertySheetPage =
			new ExtendedPropertySheetPage(editingDomain) {
				@Override
				public void setSelectionToViewer(List<?> selection) {
					DroidEditor.this.setSelectionToViewer(selection);
					DroidEditor.this.setFocus();
				}

				@Override
				public void setActionBars(IActionBars actionBars) {
					super.setActionBars(actionBars);
					getActionBarContributor().shareGlobalActions(this, actionBars);
				}
			};
		propertySheetPage.setPropertySourceProvider(new AdapterFactoryContentProvider(adapterFactory));
	}

	return propertySheetPage;
}

with

/**
 * This accesses a cached version of the property sheet.
 * <!-- begin-user-doc -->
 * <!-- end-user-doc -->
 * @generated NOT
 */
 public IPropertySheetPage getPropertySheetPage() {
     if (propertySheetPage == null || propertySheetPage.getControl().isDisposed()) {
        propertySheetPage = new TabbedPropertySheetPage(DroidEditor.this);
     }
    return propertySheetPage;
 }

Testing your Editor

1. Right-click the Editor project (org.emf.example.droid.editor)
2. Choose Run As > Eclipse Application
3. Create a new .droid file (or use an existing one)
4. Open the .droid file with the generated Editor.
   If you have the Xtext plugin installed, right-click the .droid file and choose Open With > Droid Model Editor. If you have not installed the Xtext plugin, just double-click the .droid file.