Tutorial 2 : Create diagram editor using the FreeModellingEditor

In this article, you will learn how to get started in creating a basic diagram editor while using the FreeModellingEditor

1. Purpose of this tutorial

The purpose of this tutorial is:

  • to discover how to highlight some business concepts with the Openflexo FreeModellingEditor tool
  • to build a basic graphical editor (diagram-based) of those concepts

2. Download Openflexo

As a preliminary phase, you should get a recent Openflexo distribution (Openflexo Semantics+ 1.8.x recommanded)

Download it on:

3. Launch Openflexo FreeModellingEditor and create a project

Launch Openflexo, and choose the FreeModellingEditor.

WelcomePanel

Click on “New project”, choose a name, here Tutorial2.prj

The FreeModellingEditor module will be launched.

MainPanel

4. Create a FreeModel

Right-click on Tutorial2 project, and select New > Create free model

CreateFreeModel

You should obtain this blank diagramming area.

Following screenshot shows the different panels.

On the left side of the screen, you find 3 browsers.

  • The upper one allows to browse the project. It shows the differents FreeModels and inside diagrams.
  • The middle one present the instances of some concepts that are represented on related diagram.
  • The bottom one present the metamodel concepts.

On the right side of the screen, the top component represent the 3 palettes that are usable in the context of the FreeModellingEditor:

  • “Free Shapes” palette represent some basic shapes that can be dropped in current diagram
  • “Used Shapes” palette represent all the different shapes that are used in current diagram
  • “Concepts” palette represent all the shapes of the metamodel concepts.

Graphical properties inspector completes the view, by providing graphical edition features to the diagram elements.

StartWithEmptyDiagram

5. Draw an example diagram

Suppose that we are working on UML tooling, and that we want to build a diagram editor for the UML use cases diagrams.

We are supposed to be able to modelize such models:

UseCaseExample

Let’s start to draw this example on the FreeModellingEditor.

Let’s draw an actor, by dragging image palette item.

DropImage

A dialog box opens. You have to choose a file on the disk (for example Actor.gif, which should be put in Tutorial2.prj)

ChooseImageFile

You have created the shape that will represent an Actor (in a UML Use-Case diagram). No that the “Used shapes” palette has now a unique element showing an actor.

DrawActor

Go back to the “Free shapes” palette. Drag oval shape on the drawing to represent a use case.

DrawUseCase

You have created the shape which represent a use case. Can can move it on the drawing.

You may now double-click on labels of created shapes and edit a name. For example name the use-case “Provide menu”.

EditUseCase

6. Declare concepts

It’s time now to declare concept “UseCase”. Select the “Provide menu” shape. Right-click and select “Create new concept”. Enter a name and a description of the new concept, and press finish.

DeclareUseCaseConcept

Do the same for the actor. Name it “Customer” and create a new concept “Actor”.

You can now draw the full diagram as shown in example diagram we have shown at the beginning of this tutorial. Switch again to “Used shapes” palette. Use the palette to drop an other actor and some other use cases. You should for example get this:

EditDiagram

Note that the elements “Provide menu”, “Order meal”, “Deliver meal”, “Customer” and “Restaurant” are all identified and classified relatively to the two concepts “UseCase” and “Actor”.

7. Finish edit diagram and get your first diagram editor

You can now draw connectors (lines) between elements. To do so, press CTRL key and drag a line from a shape to another shape.

DiagramOver

Your first diagram is now finished. And you have got your first graphical editor for a UML Use-Cases Diagram Model !

8. Using newly created diagram editor

It’s now time to launch this diagram editor to create new diagram (test and use the graphical editor just beeing built)

To do so, select “MyFreeModel”, right-click and select New > Create diagram

This will create a new diagram. Call it “MyFirstUMLUseCaseDiagram”.

You can edit a new diagram, such as:

CreateNewDiagram

This tutorial is now over.

We suggest you to launch the next tutorial (tutorial 3) if you want to enter deeply in the Openflexo Diagramming Technology (expert users)

9. Download tutorial project

You may download the tutorial project (Tutorial2.prj) on github (project integration-tests-rc)

https://github.com/openflexo-team/openflexo-integration-tests/tree/1.8.0/integration-tests-rc/src/main/resources/Tutorials