Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

EEF/User Guide/Custom Element Editor

< EEF‎ | User Guide
Revision as of 13:21, 5 January 2012 by Goulwen.lefur.obeo.fr (Talk | contribs) (Modifying the PropertiesEditionComponent)

Need of new widgets ?

EEF generators offer a set of widget to build EMF editing forms. Sometime other widget needs appear to create more efficient GUIs. In this case, EEF users can employ CustomElementEditor to generate user code areas inside the EEF properties code.

Let's start this sample with this sample Ecore model :

Ecore model for CustomElementEditor sample

By following the first generation tutorial, EEF generates theses forms :

Standard result

Now suppose we want to use a spinner instead of a Text for the age entry. Spinners aren't yet available in the EEF generation. We can, in this case use a CustomElementEditor.

CustomElementEditor in the EEF models

The first step is to replace the ElementEditor generated by the EEF Initializer with a CustomElementEditor. This must be done in the View associated to our EClass Person, the "Person" View.

CustomElementEditor in views model

The removed ElementEditor was defined as the view of the "age" PropertiesEditionElement of the "Person" PropertiesEditionComponent. We need to define our CustomElementEditor as the new "age" PropertiesEditionElement view.

Referencing the CustomElementEditor in the associated PropertiesEditionElement

These changes made, we can regenerate the EEF code.

Modifying the generated code

By using CustomElementEditor, EEF generates user code areas in four classes. We need to complete these classe to includes our own widget and to bind it with the EMF model. The four classes to modify are :

  • the IPropertiesEditionPart : XXXPropertiesEditionPart
  • the PropertiesEditionPartForm : XXXPropertiesEditionPartForm
  • the PropertiesEditionPartImpl : XXXPropertiesEditionPartImpl
  • the PropertiesEditionComponent : XXXPropertiesEditionComponent

Modifying the IPropertiesEditionPart

The IPropertiesEditionPart interfaces defines the view's getters and setters for each widget. As we used a CustomElementEditor, EEF has generated an user code area in the PersonPropertiesEditionPart :

CustomElementEditor : User code area for PropertiesEditionPart

We must had getter and setter for our spinner :

// Start of user code for age specific getters and setters declaration
/**
 * @return the age
 * 
 */
public String getAge();
 
/**
 * Defines a new age
 * @param newValue the new age to set
 * 
 */
public void setAge(String newValue);
// End of user code

Modifying the PropertiesEditionPartForm

The PropertiesEditionPartForm is an EEF view used in a | Eclipse Forms Context (properties views, editors, ...). As in the interface, the PropertiesEditionPartForm code contains user code areas where we can include our own widget :

CustomElementEditor : User code areas for PropertiesEditionPartForm

In the first area, we can defines the fields we need for our own widget :

// Start of user code for age widgets declarations
protected Spinner age;
// End of user code

In the second area, we have to invoke the method creating our widget in the editing form :

// Start of user code for age addToPart creation
if (key == CustomsampleViewsRepository.Person.Properties.age) {
	return createAgeSpinner(widgetFactory, parent);
}				
// End of user code

This method in this sample is named createAgeSpinner

In the third area, we can create our getter and setter. In the PopertiesEditionPart we added two methods in the interface : getAge() and setAge(), we have to implement them in these classe :

// Start of user code for age specific getters and setters implementation
/**
 * {@inheritDoc}
 * @see customsample.parts.PersonPropertiesEditionPart#getAge()
 */
public String getAge() {
	return String.valueOf(age.getSelection());
}
 
/**
 * {@inheritDoc}
 * @see customsample.parts.PersonPropertiesEditionPart#setAge(String newValue)
 */
public void setAge(String newValue) {
	if (newValue != null) {
		Integer valueOf = Integer.valueOf(newValue);
		age.setSelection(valueOf);
	} 
}
// End of user code

Finally the fourth area let us define our method create the spinner (invoked in the second area) : createAgeSpinner :

// Start of user code additional methods
protected Composite createAgeSpinner(FormToolkit widgetFactory, Composite parent) {
	createDescription(parent, CustomsampleViewsRepository.Person.Properties.age, CustomsampleMessages.PersonPropertiesEditionPart_AgeLabel);
	age = new Spinner(parent, SWT.NONE); //$NON-NLS-1$
	age.setData(FormToolkit.KEY_DRAW_BORDER, FormToolkit.TEXT_BORDER);
	widgetFactory.paintBordersFor(parent);
	GridData ageData = new GridData(GridData.FILL_HORIZONTAL);
	age.setLayoutData(ageData);
	FormUtils.createHelpButton(widgetFactory, parent, propertiesEditionComponent.getHelpContent(CustomsampleViewsRepository.Person.Properties.age, CustomsampleViewsRepository.FORM_KIND), null); //$NON-NLS-1$
	return parent;
}
// End of user code

After this step, we can relaunch our plugin to see our new widget in a Form context (basically the properties view) :

CustomElementEditor : Spinner in a form context

Modifying the PropertiesEditionPartImpl

The PropertiesEditionPartImpl is an EEF view used in a standard SWT Context (wizards, dialogs, ...). As in the interface, the PropertiesEditionPartImpl code contains user code areas where we can include our own widget :

CustomElementEditor : User code areas for PropertiesEditionPartImpl

In the first area, we can defines the fields we need for our own widget :

// Start of user code for age widgets declarations
protected Spinner age;
// End of user code

In the second area, we have to invoke the method creating our widget in the editing form :

// Start of user code for age addToPart creation
if (key == CustomsampleViewsRepository.Person.Properties.age) {
	return createAgeSpinner(parent);
}				
// End of user code

This method in this sample is named createAgeSpinner

In the third area, we can create our getter and setter. In the PopertiesEditionPart we added two methods in the interface : getAge() and setAge(), we have to implement them in these classe :

// Start of user code for age specific getters and setters implementation
/**
 * {@inheritDoc}
 * @see customsample.parts.PersonPropertiesEditionPart#getAge()
 */
public String getAge() {
	return String.valueOf(age.getSelection());
}
 
/**
 * {@inheritDoc}
 * @see customsample.parts.PersonPropertiesEditionPart#setAge(String newValue)
 */
public void setAge(String newValue) {
	if (newValue != null) {
		Integer valueOf = Integer.valueOf(newValue);
		age.setSelection(valueOf);
	} 
}
// End of user code

Finally the fourth area let us define our method create the spinner (invoked in the second area) : createAgeSpinner :

// Start of user code additional methods
protected Composite createAgeSpinner(Composite parent) {
	createDescription(parent, CustomsampleViewsRepository.Person.Properties.age, CustomsampleMessages.PersonPropertiesEditionPart_AgeLabel);
	age = new Spinner(parent, SWT.BORDER); //$NON-NLS-1$
	GridData ageData = new GridData(GridData.FILL_HORIZONTAL);
	age.setLayoutData(ageData);
	SWTUtils.createHelpButton(parent, propertiesEditionComponent.getHelpContent(CustomsampleViewsRepository.Person.Properties.age, CustomsampleViewsRepository.FORM_KIND), null); //$NON-NLS-1$
	return parent;
}
// End of user code

After this step, we can relaunch our plugin to see our new widget in a Form context (basically the properties view) :

CustomElementEditor : Spinner in a standard swt context

Modifying the PropertiesEditionComponent

At this point, all the views contains a spinner to display and edit the age attribute of a Person, but these graphical elements aren't binded to the EMF model. The last part of the tutorial is to modify the PropertiesEditionComponent code to enable communication between views and model.

CustomElementEditor : User code areas for component

There is three areas to edit in order to activate a binding between model and views.

// Start of user code for age command update
if (isAccessible(CustomsampleViewsRepository.Person.Properties.age)) {
	basePart.setAge(EEFConverterUtil.convertToString(EcorePackage.eINSTANCE.getEInt(), person.getAge()));
}
// End of user code

Back to the top