EMF Forms editor powered by CrossEcore

EMF Forms is a framework to build form-based user interfaces (UI). Developers just need to describe their user interfaces by creating a view model instead of writing the program code by hand. In particular, there are view model elements to describe the UI controls, layouts, widgets, etc.

EMF Forms comes with an engine that reads the view model and renders the respective user interfaces at run-time. There are several renderers for different UI interfaces, e.g, Swing, SWT and even for the web. However, all the renderers still rely on the EMF Forms framework which is written in Java.

This repository contains a web based editor that allows to create view models directly in the web browser. The TypeScript code for the view model is generated by CrossEcore. The entire editor is written 100% in TypeScript.

Current features of the editor

• Import custom Ecore domain model
• Derive initial view model from domain model
• Edit view model in reflective tree editor
• Edit properties of the view model elements in reflective properties editor
  • Currently EReferences are not supported
• Live preview of Angular Material user interface
  • Currently supported domain model EAttributes: EString, EInt, EBoolean
  • Currently supported view model EAttributes: visible, enabled, label

Implementation

The original Java implementation of EMF Forms, bases, of course, on the Eclipse Modeling Framework (EMF). Thus, the metamodel of the view model is also defined in Ecore. Actually, the metamodel is composed from seperate Ecore models. These metamodels can be found in the ./model folder. Currently, only two of the models are supported: The TypeScript code for the editor is generated by CrossEcore from these Ecore models. For example, the TypeScript source code generated from view.ecore can be found in ./angular-app/src/model. The source code generated from label.ecore is in ./angular-app/src/label. The following points out some key sections of the Angular application:

Loading the ecore model:

 let eobject = new XmiResource(EcorePackageImpl.eINSTANCE, EcoreFactoryImpl.eINSTANCE, new DOMParser()).load(reader.result as string);

see ./angular-app/src/app/app.component.ts#L642

Rendering the Angular Material user interface

see angular-app/src/app/app.component.ts#L696

if(feature.eType.name==='EBoolean'){
    return `<div><mat-slide-toggle>${control.label}</mat-slide-toggle></div>`;
}

Deriving inital view model from domain model

see angular-app/src/app/app.component.ts#L533

const eclass = obj as EClass;

let view = ModelFactoryImpl.eINSTANCE.createView();
view.name = eclass.name;
view.rootEClass = eclass;

this.select(view);

for(let feature of eclass.eAllStructuralFeatures){

    let control = ModelFactoryImpl.eINSTANCE.createControl();
    control.name = feature.name;
    control.label = control.name;
    control.visible = true;
    control.enabled = true;
    control.readonly = false;

    let modelRef = ModelFactoryImpl.eINSTANCE.createFeaturePathDomainModelReference();
    modelRef.domainModelEFeature = feature;
    control.domainModelReference = modelRef;


    view.children.add(control);


}

Adding a child in the tree editor with reflection

see angular-app/src/app/app.component.ts#L131

insertItem(container: EObject, feature: EReference, eclass:EClass) {


    const ePackage = eclass.ePackage;
    const child = ePackage.eFactoryInstance.create(eclass);

    if(feature.many) {
        let list = new OrderedSet<EObject>();
        list.addAll(container.eGet(feature) as AbstractCollection<EObject>);
        list.add(child);
        container.eSet(feature, list);

    }
    else{
        container.eSet(feature, child);
    }
 
}

Building from source

To build this editor, your need to have nodejs, npm and angular-cli installed on your machine. Close this repository and run the following commands:

cd angular-app
npm install
ng serve --open

For production mode building run the following command:

ng build --prod --aot=false --buildOptimizer=false