Geekly Articles each Day
📜 ⬆️ ⬇️

Development of a visual modeling language using Sirius



This is the third article in a model-driven development cycle. In previous articles, we dealt with OCL and metamodels , created our own metamodel for the Anchor language with a tree editor . Today we will make the editor Anchor-diagrams.

Summary


In a few words: this article describes how to create chart editors. Moreover, it is described in great detail. If you do not plan to do this right now, then I recommend simply to scroll through the article, see pictures, headlines - do not get too far behind.

If you want and can give it a little more time, then there is a finished project. You can install Eclipse and try everything live.
')
If you are ready to postpone all your business and start creating a diagram editor right now, then there is a detailed step-by-step guide for you.

Introduction


It is important to note that the metamodel of the Anchor language from the previous article is syntactically neutral. It describes only the concepts used in the construction of Anchor-models. But it is not described how these concepts can be drawn on diagrams or described as text.

Also in the previous article, in parallel with the syntactically neutral metamodel, we created a tree-like editor of Anchor-models, in which for abstract concepts a completely concrete representation in the form of a tree with icons is used.

If you look at the anchor-file with some Anchor-model , you will see one more notation, but not tree-like, but textual.

The Java API, which we also generated in the last article, already works with the third representation of Anchor-models in the form of Java-objects.

In this article we will describe one more notation for Anchor-models - diagram. To create a diagram editor, as before, we will use the Eclipse Modeling Tools. There are several tools that allow you to work with diagrams.

Graphical Editing Framework (GEF)

GEF is a powerful toolkit for Eclipse that allows you to work with various diagrams and graphs. Particularly good is the current 4th version, in which there is support for DOT and many different interesting things. The disadvantage of GEF is that you need to know Java and write a lot of sample code that could be generated automatically.

Graphiti

I personally did not use it and did not see examples. But, as far as I understand, this is some cross-platform abstraction over GEF-like tools, which, however, currently does not support anything except GEF :-)

Graphical Modeling Framework (GMF)

GMF is a toolkit that somewhat simplifies the use of GEF for diagrams based on EMF. It consists of 3 parts: GMF Notation, GMF Tooling and GMF Runtime.

GMF Notation is a metamodel for representing (arbitrary) diagrams.

GMF Runtime - reusable components for chart editors (toolbars, chart export functionality for various graphic formats, etc.).

GMF Tooling is a toolkit that allows you to generate code for a chart editor. Working with GMF Tooling usually looks like this.


All these additional models in GMF very much resemble the .genmodel model that we used in the previous article to generate a tree diagram editor. It’s probably easier than using GEF directly, but it's still quite difficult.

GMF Notation and GMF Runtime are used in almost all chart editors based on Eclipse.

For GMF Tooling, there are alternatives. However, it is worth noting that GMF appeared relatively long and works, including in older versions of Eclipse. For example, Rational Software Architect is usually based on a rather ancient version of Eclipse. Therefore, if you want to create a diagram editor for RSA, you have to use GMF Tooling, instead of more modern tools. An example of such a diagram editor you saw in the first article of the cycle (note the diagram with men, the source code is available here ).

Note

In general, the same Sirius should theoretically work since Eclipse Juno, but to be honest, I have not tried it yet.

Sirius

Sirius, like GMF Tooling, allows you to create chart editors based on GMF Notation and GMF Runtime. But it is much simpler, more functional and more convenient.


Eugenia

On the basis of Eclipse, a sufficiently large number of tools have been created that can be used in model-driven development. The tools are completely different: for converting, validating, comparing, merging models, etc. In the Epsilon project, the developers tried to somehow unify and connect all these technologies with each other.

EuGENia is a tool used in Epsilon to develop chart editors. In fact, this is a wrapper over GMF Tooling, which somewhat simplifies the creation of .gmfgraph, .gmftool and .gmfmap models.

Customization


We will create a diagram editor based on the Ecore-metamodel described in the previous article . Accordingly, it makes no sense to use pure GEF or Graphiti, you need to take some add-on, sharpened by EMF. EuGENia disappears, because we will not use Epsilon yet. GMF Tooling also disappears, because, on the one hand, it is too complicated, and on the other, we do not need the diagram editor to work in older versions of Eclipse. It remains Sirius.

Install Eclipse Modeling Tools .

Install Sirius. To do this, select the menu Help -> Install New Software ... Add a site http://download.eclipse.org/sirius/updates/releases/3.0.0/mars

Note

At the time of this writing, this is the latest version of Sirius. An up-to-date list of versions is available here .

Select and install the components marked in the figure.



Take the projects from the previous article . Deploy them to the current workspace. To do this, select File -> Export ... -> Deployable plugin-ins and fragments from the menu.



Mark the projects anchor, anchor.edit and anchor.editor. Select Install into host. Repository. After deploying the plugin, restart Eclipse.

The previous article described two more options for running these plugins in Eclipse (running the second instance and copying the jar files to $ ECLIPSE_HOME / dropins).

Make sure that you open test models from the anchor.tests project of the model folder.



After that, it is advisable to remove the anchor, anchor.edit and anchor.editor projects from the workspace, because they are already deployed. If you leave them, there will be nothing fatal. It is possible that with auto-completion, duplicate metaclasses will be issued (one from the workspace, the second from the deployed plugin).

Project creation


In general, the project anchor.design has already been created . You can


To create a project, select File -> New -> Other ... -> Sirius -> Viewpoint Specification Project. Call it anchor.design or something else.

Open the Sirius perspective (Window -> Perspective -> Open Perspective).



There are a minimum of files in the project: several standard files with settings, a plugin activator in the src folder and, most importantly, an anchor.odesign file. In it, we will describe the elements of the diagrams, the diagram editor toolbar and everything else.

Creating a point of view


There can be several points of view on the same model (customer or developer, conceptual, logical or physical, etc.). We will describe only one point of view (Viewpoint). Add it through the context menu in the tree editor. Give it an Anchor ID, in the Model File Extension field, specify anchor.



Note

Personally, I am very confused that in Sirius objects need to manually register identifiers, they could easily be assigned automatically. Confused by the possibility of changing identifiers.

Also confusing is binding the diagram editor to models by the file extension of the model, and not by the namespace.

But, in principle, it works, and okay.

Creating a view


A model can have many different representations. Currently, Sirius supports 5 views (chart, table, pivot table, tree, sequence diagram). In this article we will work only with diagrams.

Add to the Anchor point of view a model representation in the form of a diagram (New Representation -> Diagram Description).



In the properties, specify the ID of the Anchor Diagram, in the Domain Class field, specify the root object of the model (anchor.Model). In this field, as in many other fields, autocompletion runs, called by Ctrl + Space.

Notice that the Default layer is automatically created in the view to accommodate chart elements. In this article we will not create additional layers.

Specification of visual elements for anchors


Now it is necessary to describe the nodes and edges from which the diagrams will be built.

Note

Once again, in the previous article in the anchor.ecore file, we described the Anchor language in a syntactically neutral form. Described only the concepts that make up the Anchor-model. These concepts can be presented in the form of diagram elements, in the form of tree nodes, in the form of text. Now we are actually creating a second model, in which we describe how syntactically neutral concepts of Anchor-models should be visualized.

It is very important to understand the difference between a model and a chart.

In the Default layer, add a node (Node) for anchors with the Anchor ID. In the Domain Class field write anchor.Anchor. In the Semantic Candidates Expression field, you must specify where exactly in the model you need to look for anchors. Press Ctrl + Space and see what options are available:


In this case, the anchors that need to be displayed on the diagram are available through the anchors association of the root object of the model. Therefore, in the Semantic Candidates Expression field you need to write a feature: anchors.

Note

If you do not understand what kind of association this is, look at the last diagram in the previous article .



Now it is necessary to describe exactly how anchors should be depicted in diagrams. If you created a new project, copy the icons folder into it. Click in the Model Explorer on the left of the anchor.design project and press F5 (or select Refresh from the context menu). After that, the icons folder should appear in Eclipse.

Add an image link to the Anchor node description (New Style -> Workspace Image). In properties, specify /anchor.design/icons/Anchor.png.

Testing the chart editor


So, we have already described one element of the diagram, let's see how it all looks. In the project anchor.tests in the model folder are test models with diagrams. If you are creating a new project anchor.design, then these charts will not open, because they contain many objects that we have not yet described in the anchor.odesign file. Therefore, you can simply delete the Pefrormance.aird file and create a new one (the test model itself will not go anywhere, because it lies in the anchor file). To create a new diagram, select File -> New -> Representations File. Select Initialization from a semantic resource. Select a model.



On the last tab of the diagram creation wizard, specify the anchor.tests / model folder. Select an Anchor point of view.

There are no diagrams in the created file yet. To create one, select the root object of the model and click New Representation -> new Anchor Diagram.



Drag the chart editor window to the right to view both the anchor.odesign chart editor description and the test chart at the same time.



The diagram looks a bit strange :-)

This is due to the fact that it displays two icons. One of the anchor.design project, the second of the anchor.edit project (which we created in the last article for the tree editor). The icons for the tree editor are small and slightly clumsy, because they are obtained by converting from svg- to gif-format. To remove them from the chart in anchor.odesign in the image properties in the Label tab, uncheck Show Icon.

Also in the Label Position field, specify the border. This means that the signature of the anchor should not be displayed inside the anchor icon, but on its border.

Notice that feature: name is listed in the Label Expression field. This means that the name property of the anchor will be used as the signature.

On the Advanced tab, in the Allow resizing field, disable the resizing of the icon.

Now save the specification of the diagram editor (Ctrl + S) and, miraculously, the diagram will automatically update. In this regard, Sirius greatly simplifies the development of diagram editors. For example, in the previous article I had to generate the source code, run a second instance of Eclipse. The same has to be done when using GMF Tooling, but everything is simple.



The specification of visual elements for attributes


For attributes, it would be possible to describe the visual element as well as for anchors by selecting the metaclass anchor.Attribute and the corresponding icon. However, everything is somewhat more complicated.

First, for attributes without saving the history and preserving the history, different icons should be used - circles with single or double borders, respectively.

Secondly, when you begin to describe the visual elements for the links, you will see that they indicate which nodes of the diagram they can link. For example, only a KnottedStaticAttribute and a KnottedHistorizedAttrbute can be associated with a node (Knot). But StaticAttribute and HistorizedAttrbute cannot be linked to a node, they have a banal relationship with the node (anchor.Knot) in the metamodel.

Therefore, copy the description of the visual element for Anchor four times for each kind of attribute. Modify the Id and Domain Class fields accordingly. Clear the Semantic Candidates Expression field, because attributes are not top-level objects, they belong to anchors, not models directly. One could write an OCL expression that bypasses all anchors and returns all attributes, but this makes no sense. Also change the icons. After saving the specification and arranging the objects (by dragging the mouse) you will see something like this.



Specification of relationships between anchors and attributes


The metaclasses anchor.Anchor and anchor.Attribute define the relation attributes. For each instance of this relationship, we need to draw a line on the Anchor diagrams. To do this, add an edge based on the relation (New Diagram Element -> Relation Based Edge) to the Default layer.

Provide an AttributeEdge ID. In the Source Mapping field, specify the visual element Anchor, which is used to draw anchors. In the Target Mapping field, specify 4 visual elements for various kinds of attributes. In the Target Finder Expression field, type feature: attributes.

In the Edge Style tab, under the Decorators tab, check NoDecoration for both ends. On the Advanced tab, in the Ends Centering field, tick Both to align the ends of the lines to the center of the nodes that they connect. Also remove the nested Label element, because no signatures are needed here.

After saving and organizing the elements, you will see something similar. You’ll have to arrange with a mouse; out of the box, automatic ordering doesn’t work very well.



Specification of visual elements for braces and nodes


You can do this yourself. For nodes, specify the metaclass anchor.Knot, and in the Semantic Candidates Expression field, specify feature: knots. For scraps, as for attributes, create 4 elements. In the Semantic Candidates Expression field, type feature: ties. On the Label tab for scrapers, clear the Label Expression field because they have no names.

Add a link between the KnottedStaticAttribute, KnottedHistorizedAttribute and Knot by analogy with the link between anchors and attributes.

Note

If you don’t see any links in the diagram or something doesn’t work, try validating the specification. To do this, click the button with a green check mark in the header of the specifications editor.

For example, instead of feature: knot, I wrote feature: knots. At the same time, connections between attributes and nodes were simply not displayed without any error messages. After validating the specification, it becomes clear what the problem is. Another common mistake is extra spaces.

In the end, you get something like that.



Specification of ties of ties with anchors and knots


This kind of connections is already somewhat more complicated than those we created earlier. This is because they are not based on the relationship between objects, but on the anchor.AnchorRole metaclass instances, which have two properties (a name and a flag that determines whether this relationship identifies) and two associations (with a clamp and an anchor).

Add an Element Based Edge with the AnchorRoleEdge ID and the following properties:


As before, make a line without arrows, center the ends of the line, remove the tick on Show Icon from the signatures.

In contrast to the previous links, we will display two signatures on this one. In the center of the line you need a signature with the name of the role, for this, in the Label Expression field, specify feature: name. Add another Begin Label Style, in the Label Expression field write ocl: if self.isIdentifier then '1' else 'm' endif. Here, OCL is suddenly useful to us. The meaning of the expression, I think, is intuitively clear: if the relationship is identifying, we show 1, otherwise - m.

By analogy, add links based on the anchor.KnotRole metaclass. In the end, you will see something like that. Note that in the properties window, you can change both the properties of model objects and various aspects of the display of these objects on diagrams.



Well, well, the diagram editor is almost ready. Of course, it is not as beautiful and convenient as on the Anchor Modeling website. Consider it a fee for using a standard solution. Although the fact that the properties are displayed in the same window, in my opinion, is quite convenient. In any case, everything else (adequate automatic ordering of nodes on the diagram, normal splines for edges, etc.) should be finished with hands.

Specification tool for creating nodes


You probably noticed the empty tool palette on the right. Add a tool to create new anchors there. To do this, create a new section (New Tool -> Section) with the identifier Nodes. Add the New Element Creation -> Node Creation node creation tool with the identifier CreateAnchor. In the Label field, enter Anchor. In the Node Mappings field, add Anchor. On the Advanced tab, you can add a link to the icon.

Expand this element, you will see the definition of two variables and the Begin block, which will be executed when using our tool. Add an operation that sets the context to it (New Operation -> Change Context). In the Browse Expression field, specify var: container. If you (as I do not understand what this variable is), press Ctrl + Space, and you will see that it refers to an object of type anchor.Model, i.e. on the root object of our model.

In the context of the root object of the model, we need to create an anchor (an instance of the metaclass anchor.Anchor). To do this, add an instance creation operation (New Operation -> Create Instance). In the Reference Name field, specify the name of the association of the current object (specified via Change Context), with which you need to associate this object with the created instance. In this case, it is anchors association. In the Type Name field, specify anchor.Anchor. In the Variable Name field, specify the name of the variable that will refer to the created object.

Save the specification and try to create a new anchor in the diagram editor. On the properties tab below specify the name of the anchor.



Note

In general, many more different operations are available in Sirius, for example, you can set the name of the new anchor by default, etc. But you can figure it out on your own.

Attribute Creation Specification


With attributes, things are a bit more complicated than with anchors, because attributes are not top-level objects. They belong to anchors, not models.

Copy the anchor creation tool, correct the Id, Label and Node Mappings fields. Do not forget that this needs to be done 4 times (for each kind of attribute). On the Advanced tab, in the Extra Mappings field, add Anchor. This will allow you to create attributes not only in the context of the model, but also in the context of individual anchors.

Now we need to prohibit the creation of attributes that are not attached to the anchor. To do this, on the General tab, in the Precondition field, specify ocl: container.oclIsKindOf (Anchor). This means that only an anchor can be used as a container for a new attribute.

For the Create Instance operation, in the Reference Name field, specify attributes (this is the name of the association between anchors and attributes). In the Type Name, specify the metaclass of the attribute being created.



Try creating new attributes. Make sure that when you hover over an empty area on the chart, the anchor creation tool appears. And when you hover, the attribute creation tool.

Specification of other tools for creating, deleting and modifying objects and relationships


Tools for creating knots and braces are made in a similar way. This is quite a chore, but in GMF Tooling this is still a chore, and much more difficult in the GEF without the use of any add-ons.

I think it makes no sense to describe the tools for creating links. You can see examples in the project . I will only note that for simple links (anchor - attribute or attribute - node) you need to use the Set operation. And for more complex connections (clamp - anchor, clamp - node) you need to create new instances of objects.

Also in the project you will find examples of tools for removing and modifying links.


, , ( ).

Anchor Diagram (New Filter -> Composite Filter). Hide attributes and knots. (New -> Mapping Filter). Mappings Knot, StaticAttribute, HistorizedAttribute, KnottedStaticAttribute, KnottedHistorizedAttribute.

- .




In the first article of the cycle, you saw examples of various control rules. The rules, like the model itself, were very artificial. Now we will add a more useful rule to the diagram editor. For example, we ban the attributes of the same name at the anchor.

To do this, add a validation block to the view (New Validation -> Validation).

Then add the model element validation rule (New -> Semantic Validation Rule).


Add rule specification (New -> Audit). In the field Audit Expression write

ocl:attributes->isUnique(name)

Try to create two attributes of the same name in the model at the same anchor and validate the model (in the context menu of the diagram, select Validate diagram). At the same time an error icon will appear at the anchor.

We formulate this rule a little differently. Create another rule:


Add rule specification (New -> Audit). In the field Audit Expression write

ocl:anchor.attributes->excluding(self).name->excludes(self.name)

Now, after validation, not the whole anchor will be highlighted, but individual attributes with non-unique names.



Conclusion


After reading this article, you should understand the difference between models and notations for models (for example, diagrams). I hope you can now create modeling languages and chart editors for them.

You also saw the real use of OCL .

If you're interested, I highly recommend creating some kind of visual modeling language. As you can see, this is the same mundane thing as the description of a class or function in code.

In subsequent articles, we will look at textual notations for models. And of course we will do the most important thing - the transformation of models.

Source: https://habr.com/ru/post/267335/

More articles:


All Articles