Designing an Editor Model

We have prepared an XGEE example application, which you can use as a starting point for your own project. The application includes an XGEE editor for the Hardware Layer of the Open Avionics Architecture Model (OAAM) , which is a domain-specific model for avionics systems. In this tutorial, you will learn how can extend the XGEE example application with a self-made XGEE editor for the Functions Layer of the OAAM.

Create New Editor Model

Open the Eclipse Runtime for with the meta-model of the editor like we have done it in Modeling with XGEE.

Create a new project. (File -> New -> Project…, General/Project). As a location, create a new folder in App/plugins and call it editor.oaam.myfunctions. This will be the plugin-id.

Now create a new EditorModel (File -> New -> Other…, Example EMF Model Creation Wizards/Editor Model). Call it e.g. MyFunctions.editorModel.

Todo

Locate Editor Model somewhere else in the tree.

Give the editor a name, and set its unique editor-id to myfunctions.

The EditorModel has now to be linked to a Class in the ECORE Metamodel, which defines the domain specific language. This is accomplished by the Model Reference, which can be created as a child of Editor. Speficy uniquely, which class of the metamodel the editor shall edit by setting the namespace URI and the class name. In our example, we choose ‘Functions’ in ‘http://www.oaam.de/oaam/model/v140/functions’. The oaam.ecore metamodel is already available for XGEE in Workspace/.meta. Now it looks like in the following picture.

Package as jsApplication Plugin

This section briefly summarizes the steps in order to integrate the still empty editorModel as a jsApplication Plugin. For further details, read Integrating your XGEE editor model.

Create the a JavaScript file with the name plugin.js, add the following content and put it into editor.oaam.myfunctions. We provide the path of the MyFunctions.editorModel, insert the plugin-id and require other plugins.

export async function init(pluginAPI) {
        pluginAPI.implement('xgee.models',{
        modelPath: pluginAPI.getPath()+'MyFunctions.editorModel'
    })
    return true
};

export var meta={
    "id":"editor.oaam.myfunctions",
    "requires":["ecore","editor"]
};

Todo

currently context menu not updated - put it in autostart in index.html ‘editor.oaam.myfunctions’ : {enabled: true,pluginPath: ‘plugins/’},

Now we have a stub of a new editor, which look like this:

Optical Modifications

Even though it is not necessary for the functionality, we take a short look at the style of XGEE editors. Therefore we use the editor-id myfunctions.

Inside the jsApplication framework, XGEE creates a tab and a graph-view element for every registered editor. Its style can be modified in App/core/css/app.css. Make the text white and color its background in green with the following code:

.graph-view-myfunctions .jsa-view-header{
    background-color: #006000;
    color: #ffffff;
}

Design or copy an svg icon, name it graph-view-myfunctions.svg and put it into the folder App/core/img. Now it looks like this:

Function Editor Stub with Color and Icon

Adding Representations

A typical editor usually needs some vertices, edges, a palette, and some tools like Drag and Drop and Edge Routing. Before we dive into editing, we start by adding some first representations.

In XGEE, switch to Home andcreate a new model. In your file explorer go to Workspace and open the new created newModel.oaam in a text editor. Manually add a first task with the following code. (Other possibilities are using the already existing function editor or the OAAM Eclipse Editor.)

<functions>
<tasks name="myTask"/>
</functions>

Todo

maybe replace with EOQ in console: question: identify chosen Functions editor

Going back to the editor, we don’t see anything. This is because in the editorModel of XGEE, Tasks are currently not yet modeled. Let’s change that. We add to the Editor a Child Vertex. Give it an id and a name. Like in the first tutorial, we use EOQ queries to specify that we want to represent tasks.

Similarly, we add a matching Model Reference. The EOQ queries and Model references are necessary for every OAAM Element.

Function Editor Task Model Reference Properties

Now we add a Shape From Resource. We design or copy a shape for every task. Any svg can be used. Create a subfolder in the plugin folder where you copy the svg. In the editor properties specify the repository URL relative to the plugin folder.

In the Shape from Resource properties specify the filename. The properties Size X and Y are currently not taken from here, but from the Vertex’ properties. Feel free to modify them.

Now we have modeled everything that is needed, to display OAAM Tasks within the functions layer. Save the editorModel, refresh the browser and open your oaam model. It should look similar to the following picture. As you can see, you can be creative with the shapes 😉

Making it editable

Now we have a viewer, but what we want is an editor. Already now it is possible to modify properties with a double click on the vertex. As a next step, tick the Is Movable flag in the Vertex’ properties. Now you can move and resize the tasks.

In order to be able to create tasks, we need the three elements: enabling the editor to receive drops, a tool that enables drang and drop and a palette that lists tools.

We want to be able to drop a Task into the Function Editor. In order to have a Task to drop, we need a Drag and Drop Tool. Add it as a child of your editor, give it some name and id and click on provides template. Add a Compound Command, where we add a Command. Set the Alias to TEMPLATE (what for?) and provide the following command string:

Crn('http://www.oaam.de/oaam/model/v140/functions','Task',1)

This creates one new task, which still needs to be linked into the model tree. Additionally, provide an icon to display in the palette.

Now we add the DropReception as a child of the editor. The droptarget is the Class Functions in the package functions. It shall work, when an item is dropped anywhere in the editor canvas. The dropitem shall be the Class Task, also located in the package functions. As the command, use the following code:

new eoq2.Add(new eoq2.Obj({DROPTARGET}),'tasks',new eoq2.Obj({DROPITEM}))

This adds a tasks reference between the current Functions and the newly created Task. XGEE resolves the DROPTARGET and DROPTITEM by the corresponding object id based on the defined package and class name.

As a child, add a Compound Command and add a Command. Give it the Alias _ADDTASK and the String Add(new eoq2.Obj({DROPTARGET}),’tasks’,new eoq2.Obj({DROPITEM}))

Todo

ask how Alias is used and why we have the same command two times.

Finally we add a palette to the Editor. Here, add a category and in Tools select the Drag and Drop Tool Task. Now we have a basic editor. Feel free to be crative and have fun 🚀

Todo

Is Deletable and Is Resizable don’t seem to work instantly. Copy and Pasting also makes problems. (allow it only when drop receiption is implemented?)

Todo

add delete functionality