{"id":94,"date":"2018-03-31T03:02:29","date_gmt":"2018-03-31T00:02:29","guid":{"rendered":"http:\/\/siteblog.tuc.gr\/nispanoudakis\/?p=94"},"modified":"2018-03-31T03:02:29","modified_gmt":"2018-03-31T00:02:29","slug":"complex-graphical-models-using-eclipse-gmf-technology","status":"publish","type":"post","link":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/2018\/03\/31\/complex-graphical-models-using-eclipse-gmf-technology\/","title":{"rendered":"Complex Graphical Models using Eclipse GMF technology"},"content":{"rendered":"

Today I am going to discuss about two features of Eclipse GMF that are not well covered by the documentation and that are difficult to locate in forums. For this article I used the\u00a0Eclipse Modeling Tools<\/a>\u00a0Mars 2 Package. After installing the package you must go to Help -> Install Modeling Components and select and install the Graphical Modeling Framework Tooling<\/em>.<\/p>\n

The first feature<\/strong><\/em> is to have text areas that can span multiple lines of text<\/strong><\/em>.<\/p>\n

The second feature<\/strong><\/em>\u00a0is to be able to print my model<\/strong> <\/em>(as I may want to have it is xps or pdf format). By default GMF allows only for printing your models in png (picture) format.<\/p>\n

I will take you step by step to these features definition using a simple example. Assume you have a newspaper and you want to publish articles. The page of the newspaper has one or more articles. Articles have a title, a teaser and text.<\/p>\n

1. Create the project and the metamodel<\/strong><\/p>\n

You first need to create a new Modeling project. File-> New-> Project..->Ecore Modeling Project (see the next figure).<\/p>\n

\"ModelingProject\"<\/a><\/p>\n

Now define the model as a collection of pages, and the pages are collections of articles.\u00a0 To do that right click on the newspaper.ecore file and click on “Initialize ecore_diagram diagram file”. Use the aggregation (or composition if you use the aird<\/em> file) relationship from the toolbox and click and drag from the Newspaper EClass<\/em> to the Page<\/em> EClass<\/em> and for Page<\/em> to Article<\/em>. Define the\u00a0relationships\u00a0and properties shown in the following diagram.<\/p>\n

\"ecore_model\"<\/a><\/p>\n

It is interesting to take a look at the properties of the aggregation.\u00a0Right click on\u00a0the line of the articles<\/em> relationship and select<\/em>\u00a0the properties view (see figure below). To indicate that the articles can be from one to many you\u00a0assign to the property “Lower Bound”\u00a0the value 1 and to the “Upper Bound”\u00a0the value -1.<\/p>\n

\"open_properties\"<\/a><\/p>\n

Now assume that you want the\u00a0teaser<\/em> and\u00a0text<\/em> properties of the\u00a0Article\u00a0<\/em>to be able to have multiple lines of text (the first deature we discuss in this article). In order to do that you need first to open the genmodel<\/em> file.\u00a0Then you will select the teaser\u00a0<\/em>attribute and you set its “Property Multi-line” to the value true<\/em>. By default it is false, so make sure to do that.<\/p>\n

\"multi-line\"<\/a><\/p>\n

Finally select the top level node in the genmodel diagram and check its properties. Set the Compliance Level<\/em> to 6.0 (if you do not do this then when building the gmfgen file you will get an error):<\/p>\n

\"genmodel-complianceLevel\"<\/a><\/p>\n

Now you are ready to initialize the code for editing the model’s elements. Right click on the Newspaper element of the genmodel<\/em> and select “Generate All”. This will create the ecore Model\u00a0Code<\/em> in this project and generate the Edit Code<\/em>\u00a0project that you need.<\/p>\n

\"generate_all\"<\/a><\/p>\n

2. Generating the Graphical Model<\/strong><\/p>\n

Now you are ready to start working with GMF. Open the GMF Dashboard. Select Window->Show View->Other and type GMF and immediately you will see the GMF Dashboard appear. Select it and you will see it in your eclipse window.<\/p>\n

\"GMFDashboard\"<\/a><\/p>\n

The first task is to select<\/em> the ecore<\/em>\u00a0(Domain Model) and genmodel<\/em>\u00a0(Domain Gen Model) files:<\/p>\n

\"GMFDashboard1\"<\/a><\/p>\n

Next you derive the gmfgraph<\/em> model by clicking Derive<\/em> from the Domain Model<\/em> towards the Graphical Def Model<\/em>. I named it newspaper1.gmfgraph<\/em> (see first figure below, in your machine you can give it the name newspaper.gmfgraph, I cannot because I already have one graph file). Then I selected the newspaper element in the Next step of the dialog (see second figure below), and in the final step of the dialog (see third figure) I selected that I want graphical representations for the Page<\/em> (with the number<\/em> attribute) and Article<\/em> (with all its attributes, i.e., name<\/em>, teaser<\/em> and text<\/em>).<\/p>\n

\"GMF-Gen-Graph-dialog-2\"<\/a><\/p>\n

\"GMF-Gen-Graph-dialog-1\"<\/a><\/p>\n

\"GMF-Gen-Graph-dialog-3\"<\/a><\/p>\n

Now if everything is OK you can see the following newspaper1.gmfgraph<\/em>\u00a0file on eclipse:<\/p>\n

\"GMF-Graph-initial\"<\/a><\/p>\n

All elements are in the Canvas<\/em>. The Canvas has a Figure Gallery<\/em>\u00a0(we will see it in detail later), the Node<\/em> elements that refer to the objects that will be displayed and the Diagram Label<\/em> elements that refer to the text boxes that will display attributes (bottom part of the figure). Now, in the Figure Gallery<\/em> we have two main Figure Descriptors<\/em>, one for the Page (PageFigure<\/em>) and one for the Article (ArticleFigure<\/em>). Each of these has a Rectangle<\/em> with the default Flow Layout<\/em>\u00a0and as many Child Access<\/em> elements as its text boxes (attributes). Note that this is not enough, there are also the relevant Label<\/em>s defined in the Rectangle<\/em>. The\u00a0Diagram Label<\/em> elements refer to the Child Access<\/em> elements and the latter refer to the Label<\/em> elements. In the Label<\/em> element you can add children like Insets<\/em> (to space the text from the limits of the rectangle) and\u00a0\u00a0a Basic Font<\/em> to define text size and style – regular, bold or italics:<\/p>\n

\"GMF-Graph-add-properties-to-label\"<\/a><\/p>\n

Now we need to define a new Rectangle<\/em> in Page<\/em> where we will be inserting Article<\/em> objects. Right click on the Rectangle PageFigure and select New Child -> Rectangle:<\/p>\n

\"GMF-Graph-add-rectangle\"<\/a><\/p>\n

Name the Rectangle<\/em> element\u00a0PageCompartmentFigure<\/em>. See its properties:<\/p>\n

\"GMF-Graph-name-rectangle\"<\/a><\/p>\n

Now you need to add a Border Layout Data<\/em>\u00a0child to the PageCompartmentFigure<\/em>\u00a0and add to the Rectangle\u00a0PageFigure a Child Access element with properties:<\/p>\n

\"GMF-Graph-Child-Access-Compartment\"<\/a><\/p>\n

Now go to Canvas -> New Child -> Compartment, name it\u00a0PageCompartment<\/em>\u00a0with the following properties:<\/p>\n

\"GMF-Graph-Compartment-properties\"<\/a><\/p>\n

Save it and for now you are finished with the gmfgraph<\/em> file. The next step is to go to the GMF Dashboard and\u00a0Derive\u00a0<\/em>the gmftool<\/em> model. First you select its name, then you select the newspaper element and finally, the two objects that you are going to be using to draw the model, i.e. the Page<\/em> and the Article<\/em>. See these three steps of the wizard:<\/p>\n

\"GMF-Gen-Tool-dialog-1\"<\/a><\/p>\n

\"GMF-Gen-Tool-dialog-2\"<\/a><\/p>\n

\"GMF-Gen-Tool-dialog-3\"<\/a><\/p>\n

Now you are ready to Combine<\/em> all these models (using again the GMF Dashboard) to get the gmfmap<\/em> model. Follow again the steps of the wizard. Take care to remove Article from the Links compartment in the fifth step. It must look as in the fifth figure below:<\/p>\n

\"GMF-Gen-Map-dialog-1\"<\/a><\/p>\n

\"GMF-Gen-Map-dialog-2\"<\/a><\/p>\n

\"GMF-Gen-Map-dialog-3\"<\/a><\/p>\n

\"GMF-Gen-Map-dialog-4\"<\/a><\/p>\n

\"GMF-Gen-Map-dialog-5\"<\/a><\/p>\n

Then you have to take care of the Nodes Page and Article because they need a final touch. Select Article<\/em> and then click the button Change<\/em>. Add the first EReference articles<\/em> to the Children Feature<\/em>:<\/p>\n

\"GMF-Gen-Map-dialog-5-Article\"<\/a><\/p>\n

\"GMF-Gen-Map-dialog-5-Page\"<\/a><\/p>\n

Now you have to edit the newspaper.gmfmap<\/em> file. It is shown below. See that it contains the ecore<\/em>, gmfgraph<\/em> and gmftool<\/em> models. We are going to focus on the gmfmap<\/em> part. The Mapping<\/em> has two elements of type Top Node Reference<\/em> (one for articles and one for nodes) and a Canvas Mapping<\/em>. Verify that the<\/p>\n

Each Top Node Reference<\/em> has a Node Mapping<\/em>. The Node Mapping<\/em>\u00a0of Article<\/em> has a Feature Label Mapping<\/em> whose properties are displayed in the figure below:<\/p>\n

\"GMF-Map-FeatureLabelMapping\"<\/a><\/p>\n

Now you have to add the\u00a0Feature Label Mapping<\/em> that are missing with similar properties. Note that the one for Page (number) is not of type EString but of type EInt. I have its properties shown below:<\/p>\n

\"GMF-Map-FeatureLabelMappings\"<\/a><\/p>\n

The final part in mapping is to add the compartment of the page.Right click to Node Mapping <Page\/Page> -> New Child -> Child Reference and then again right\u00a0\u00a0click to Node Mapping <Page\/Page> -> New Child -> Compartment Mapping. You do not have to type anything in their properties, just select the right items. See both their properties in the figures below:<\/p>\n

\"GMF-Map-ChildReference-Properties\"<\/a><\/p>\n

\"GMF-Map-CompartmentMapping-Properties\"<\/a><\/p>\n

Now save it, if all has gone well you are ready to\u00a0press transform from the gmfmap model to the gmfgen model in GMF Dashboard. You finished the process:<\/p>\n

\"GMF-Dashboard-100\"<\/a><\/p>\n

Insert Printing Capability<\/strong><\/p>\n

Double click the newspaper.gmfgen file to open it. Now you click its\u00a0Gen Editor Generator <\/em>top\u00a0element. Its properties Diagram File Extention<\/em> and\u00a0Domain File Extention<\/em> show the extentions of the files related to newspaper. The models will have the extention .mewspaper<\/em> and the graphical models .newspaper_diagram<\/em>. See also all the files in the models folder of our projet on the left:<\/p>\n

\"GMF-GMFGen-model\"<\/a><\/p>\n

Now select the\u00a0Gen Plugin Newspaper Plugin\u00a0<\/em>element and set its property\u00a0Printing Enabled\u00a0<\/em>to\u00a0true<\/em>:<\/p>\n

\"GMF-GMFGen-print\"<\/a><\/p>\n

Now your models will have the printing capability! Now save and right click on the newspaper.gmfgen file and select to generate the diagram code:<\/p>\n

\"GMF-Gen-generate_code\"<\/a><\/p>\n

Add Text Multi-line capability<\/strong><\/p>\n

Normally the\u00a0Newspaper.diagram<\/em> project has been created successfully and you can see it in the following figure. It is ready to work with it. However, we want the teaser and the text elements of the articles to be able to span multiple lines of text. To achieve that you need to edit a number (six actually) java files in package newspaper.diagram.edit.parts<\/em>. The first two files that you need to edit are the\u00a0ArticleEditPart.java<\/em> and\u00a0Article2EditPart.java<\/em>. You need to find their\u00a0createContents()<\/em> method. Initially it is like in the figure:<\/p>\n

\"GMF-diagram_code_edit_initial\"<\/a><\/p>\n

You need to locate the lines where the\u00a0fFigureArticleTeaserFigure.setText(“<…>”)<\/em> method is called and add the code:<\/p>\n

fFigureArticleTeaserFigure.setTextWrap(true);<\/em><\/p>\n

Do the same for the\u00a0fFigureArticleTextFigure<\/em>. Do not forget to set the method\u00a0to not be automatically generated from now on (generated NOT<\/em>). You must do that because if for any reason\u00a0 – e.g. you want to change the fonts of the labels – you re-generate the diagram code you will lose your changes. See the final outcome in the following figure:<\/p>\n

\"GMF-diagram_code_edit_refined\"<\/a><\/p>\n

You have to repeat the above process for file\u00a0Article2EditPart.java<\/em>.<\/p>\n

Now you get the ArticleTeaserEditPart.java<\/em>, ArticleTeaser2EditPart.java<\/em>, ArticleTextEditPart.java<\/em>,\u00a0ArticleText2EditPart.java<\/em>, and make another change. Take for example the first of them, i.e., ArticleTeaserEditPart.java<\/em>, and locate its\u00a0getManager()<\/em> method:<\/p>\n

\"GMF-diagram_code_text_edit_initial\"<\/a><\/p>\n

Now you have to\u00a0locate the line with code:<\/p>\n

setManager(new TextDirectEditManager(this, null, NewspaperEditPartFactory.getTextCellEditorLocator(this)));<\/em><\/p>\n

and replace null<\/em> with WrapTextCellEditor.class<\/em>. This classhas not been imported yet, so hover your mouse over it and select to import org.eclipse.gmf.runtime.diagram.ui.tools.TextDirectEditManager<\/em>:<\/p>\n

\"GMF-diagram_code_text_edit_edit_line\"<\/a><\/p>\n

Then remember to add generated NOT<\/em> and save it:<\/p>\n

\"GMF-diagram_code_text_edit_final\"<\/a><\/p>\n

Do not worry about the deprecated warning, it is just a warning \ud83d\ude42<\/p>\n

Now you have to do the same for the other three files. After that you are ready to test your model! To do that right click on your Newspaper.diagram project and select Run as -> Eclipse Application.<\/p>\n

Create my first newspaper<\/p>\n

Create a new project and name it MyNewspaper. Then right click on the project and select New -> Example -> Newspaper Diagram<\/p>\n

Let it have the default name and add pages and then articles. To add an element click on it at the palette on the right hand side of the following figure. Then if it is a Page<\/em> click anywhere in the canvas to insert a page. If it is an Article<\/em> click inside a page to insert it there. Then add your text:<\/p>\n

\"GMF-diagram_newspaper\"<\/a><\/p>\n

Now do you want to print your model? Just right click on the canvas and select File -> Print:<\/p>\n

\"GMF-diagram_print\"<\/a><\/p>\n

Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"

Today I am going to discuss about two features of Eclipse GMF that are not well covered by the documentation and that are difficult to locate in forums. For this article I used the\u00a0Eclipse Modeling Tools\u00a0Mars 2 Package. After installing the package you must go to Help -> Install Modeling Components and select and install … \u03a3\u03c5\u03bd\u03ad\u03c7\u03b5\u03b9\u03b1 \u03b1\u03bd\u03ac\u03b3\u03bd\u03c9\u03c3\u03b7\u03c2 Complex Graphical Models using Eclipse GMF technology<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":77,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,22,23,24,25,2,26,27],"tags":[],"class_list":["post-94","post","type-post","status-publish","format-standard","hentry","category-eclipse","category-ecore","category-emf","category-gmf","category-graphical-modeling-framework","category-java","category-multi-line-property","category-print"],"_links":{"self":[{"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/posts\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":10,"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"predecessor-version":[{"id":155,"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/posts\/94\/revisions\/155"}],"wp:attachment":[{"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siteblog.tuc.gr\/nispanoudakis\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}