In this article, you will learn how to get started in creating a basic diagram editor while using the FreeModellingEditor.
The purpose of this tutorial is:
As a preliminary phase, you should get a recent Openflexo distribution (Openflexo Semantics+ 2.0.1 is recommanded)
Download it on:
Launch Openflexo, and choose the FreeModellingEditor.
Click on New project, choose a name, here Tutorial2.prj
Set the project name, uri and description the click Finish.
For the project free modeling nature, you can just click Finish.
Click on New diagram button at the bottom.
Set the name and the description of the FreeModel then click Next.
Give your diagram a name then click Finish.
You should obtain this blank diagramming area.
The following screenshot shows the different panels.
On the left side of the screen, you find 3 browsers.
On the right side of the screen, the top component represent the 3 palettes that are usable in the context of the FreeModellingEditor:
Graphical properties inspector completes the view, by providing graphical edition features to the diagram elements.
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 model such models:
Let’s start to draw this example on the FreeModellingEditor.
Let’s draw an actor, by dragging image palette item.
A dialog box opens. You have to choose a file on the disk (for example Actor.png, which should be put in Tutorial2.prj)
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.
Go back to the Free shapes palette. Drag oval shape on the drawing to represent a use case.
You have created the shape which represent a use case. You 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”.
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.
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:
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”.
You can now draw connectors (lines) between elements. To do so, press CTRL key and drag a line from a shape to another shape.
Your first diagram is now finished. And you have got your first graphical editor for a UML Use-Cases Diagram Model !
It’s now time to launch this diagram editor to create new diagram (test and use the graphical editor just being built)
To do so, right click on MyFreeModel then choose Instantiate diagram free model
This will create a new diagram. Call it “MyFirstUMLUseCaseDiagram”.
You can edit a new diagram, such as:
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)