Jump to: navigation, search

Sirius/Tutorials/AdvancedTutorial

Overview

This tutorial will guide you extending a basic modeling tool with many advanced features of Eclipse Sirius:


The instructions start from the result of the Sirius Starter Tutorial, a basic modeling tool which simply allows the user to graphically represent men and women of a family and to create new men.

Sirius 4mtuto 01.png


The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.

Sirius 4mtuto 02.png


Note: The screenshots have been created with Obeo Designer 10.0 (based on Sirius 5.0).

Install the basic modeling tool

If you have followed the Starter Tutorial already, you are ready! Directly go to next section: Start extending the basic modeling tool.

Otherwise, start by following the instructions to install the sample Domain Model:


Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample Family model installed in your workspace.

Sirius 4mtuto 05-2.png


Then, install the solution of the Starter Tutorial. It is implemented by a Viewpoint Specification Project that you need to import into your workspace.

This project can be easily installed from the provided examples (menu File > New > Example... : select Basic Family Modeler Definition - Starter Tutorial Solution).

Sirius 4mtuto 52.png


Once the modeler imported in your workspace, activate the persons viewpoint by selecting the menu Viewpoint Selection.

Sirius 4mtuto 27.png


You must activate the persons viewpoint to be able to create the representations which are defined by this viewpoint.

Sirius 4mtuto 28.png


Then right-click on the sample model and select the menu New Representation / new Persons diagram.

Sirius 4mtuto 29.png


Sirius should create and open a diagram describing the men and women contained in the sample model.

Sirius 4mtuto 01.png

Start extending the basic modeling tool

Note: the solution of the following steps can be installed directly from the samples

Sirius tuto2 03.png


Edge Creation Tool

An Edge Creation tool allows the user to create relationships directly from the diagram, by using the palette.

Let's use this tool to allow the user to set the father and the mother relations of a Person.

Right click on the Section and select the menu New Element Creation > Edge Creation

Sirius tuto2 04-01.png


Give an Id to this tool (setFather) and associate it to fatherEdge, the Edge Mapping which defines the father graphical relation.

Sirius tuto2 04-02.png


Set the icon that will appear in the palette (if you don't specify an icon here, Sirius will use a default one):

Sirius tuto2 04-02-02.png


Then define the operations that will be performed by this tool each time the user will click on it. These operations can use four variables that are automatically set by Sirius:

  • source: the first object on which the user has clicked (the source of the relation he is going to create)
  • target: the second object on which the user has clicked (the target of the relation he is going to create)
  • sourceView: the graphical object representing the source
  • targetView: the graphical object representing the target


Under the Begin object, create a Change Context.

Sirius tuto2 04-03.png


Set its Browse Expression to var:source in order to define the execution context of the next operations.

Sirius tuto2 04-04.png


Under the Change Context create a Set.

Sirius tuto2 04-05.png


It will set the father of the first Person clicked (source) to the second Person clicked (target):

  • Feature Name: father
  • Value Expression: var:target

Sirius tuto2 04-06.png


Save the odesign file and you will see a new tool setFather in the palette.

Sirius tuto2 04-07.png

Precondition

To prevent the user to create a father relationship from a person to itself, or to one of its children, you can add the precondition expression aql:preTarget.differs(preSource) and preSource.oclAsType(basicfamily::Person).children->excludes(preTarget) (written in AQL).

Sirius tuto2 04-08.png

This expression uses two new variables:

  • preSource: the object on which the user has clicked first
  • preTarget: the object under the cursor


With this precondition, the tool will prevent the creation of forbidden links by showing a specific icon.

Sirius tuto2 04-09.png


Now copy, paste and update the setFather tool to create the setMother tool.

Reconnect Edge Tool

A Reconnect Edge tool allows the user to change the end of a relationship by moving it directly from the diagram.

Let's create a Reconnect Edge tool to change the father and the mother of a Person.


Right click on the Section and select the menu New Element Edition > Reconnect Edge

Sirius tuto2 05-01.png


Associate the fatherEdge to this reconnect tool.

Sirius tuto2 05-02.png


This tool comes with six variables:

  • source: the object currently attached to the moved end
  • target: the object going to be attached to the moved end
  • sourceView: the graphical object representing source
  • targetView: the graphical object representing target
  • element: the object attached to the other end
  • elementView: the graphical object representing element


Then create a Change Context and set its expression to var:element (the person who will change his father)

Finally, create a Set to assign the new selected parent (var:target) as father of this person.

Sirius tuto2 05-03.png


Copy, paste and update this tool to create a reconnect tool for mother relationship.

Delete Element Tool

A Delete Element tool specifies which actions have to be performed when the user hits the delete key on an diagram element.

It is necessary on elements which deletion can't be interpreted by Sirius (for example edges) or if you need to perform specific actions.

Let's create a Delete Element tool to specify what to do when the user deletes a paretal relation.


Right click on the Section and select the menu New Element Edition > Delete Element

Sirius tuto2 06-01.png


Associate the fatherEdge to this Delete tool.

Sirius tuto2 06-02.png


When deleting an edge, the variable element refers to the source of the relationship.

So, create a Change Context and set its expression to var:element (the person which is the children). Then create a Unset on the feature father to remove this relation.

Sirius tuto2 06-03.png


Copy, paste and update this tool to create a delete tool for mother relationship.

Direct Edit Label Tool

A Direct Edit Label specifies how to interpret the modification of graphical object's label in order to modify the model.

Let's create a Direct Edit Label to change the name of a Person directly from the diagram.


Right click on the Section and select the menu New Element Edition > Direct Edit Label

Sirius tuto2 07-01.png


Associate this tool to the objects which have a name: ManNode and WomanNode

Sirius tuto2 07-02.png


This tool comes with a mask that creates variables depending on the label's value. By default, the mask is set to {0}, which means that the variable named 0 will contain the full value of the label.


Create a Set to indicate the feature of the edited object that will be modified (name) and the value to assign (var:0).

Sirius tuto2 07-03.png

Style Customization

Style Customizations change graphical properties of diagram elements (color, label, size, ...) depending on conditions.

For example, let's change the label of a Person depending on the number of its children:

  • Person without children => color label in gray
  • Person having more than one children => set label size to 12
  • Person having grandchildren => prefix label with Grandpa or Grandma


Right click on the Default Layer and select the menu New Customization > Style Customizations. It will group all the different customizations.

Sirius tuto2 09-01.png


Right click on the Style Customizations and select the menu New Customization > Style Customization to create the first customization.

Sirius tuto2 09-02.png


Enter the AQL expression associated to this customization: aql:self.oclAsType(basicfamily::Person).children->size()=0

Then define the graphical properties that will change if the condition is met.


Right click on the Style Customization and select the menu New Customization. To change the label color, create a Property Customization (by selection).

Sirius tuto2 09-03.png


On this Property Customization, select the two Workspace Images for the Applied On field (they hold the label to change), enter labelColor in the Property Name field, then select the gray color.

Note that you can use the automatic-completion to select the applicable property.

Sirius tuto2 09-04.png


Create a second Style Customizations with the condition: aql:self.oclAsType(basicfamily::Person).children->size()>1 and add a Style Customization (by expression) to set the labelSize to 12.

Sirius tuto2 09-05.png


Finally, create a third Style Customizations with the condition: aql:self.oclAsType(basicfamily::Person).children.children->size()>0

Add a Style Customization (by expression) for the Workspace Image corresponding to the Man, enter the property name labelExpression and the expression aql:'Grandpa '+self.oclAsType(basicfamily::Person).name (to prefix the person name with Grandpa).

Sirius tuto2 09-06.png


Do the same with the Woman image and the expression aql:'Grandma '+self.oclAsType(basicfamily::Person).name.


Save the odesign file and see the result on the diagram.

Sirius tuto2 09-07.png

Layers

With Sirius it is possible to allocate specific graphical elements to layers that can be activated/deactivated on demand by the user.

Let's create two layers: one for the Men and one for the Women.


Right click on Persons diagram and select the menu New Diagram Element > Additional Layer.

Sirius tuto2 10-03.png


Call this Layer Men and check the option Active by default.

Sirius tuto2 10-02.png


Create a Section in this layer then drag and drop all the elements related to the Man type into this layer.

Sirius tuto2 10-01.png


Create a second Layer Women and drag and drop all the elements related to the Woman type.


Re-open the sample diagram. You can see the two optional layers Men and Women (selected by default).

Sirius tuto2 10-04.png


If you de-activate the Men layer, only women remain on the diagram. Note that the tools related to men have been hidden too.

Sirius tuto2 10-05.png

Filters

With Filters, Sirius provides an additional mechanism to automatically show or hide elements of a diagram: a condition determines which elements remain visible.

Let's create a Filter to hide persons without children.


Right click on Persons diagram and select the menu New Filter > Composite Filter.

Sirius tuto2 11-01.png


Set the id to childrenFilter.


Then create a Mapping Filter.

Sirius tuto2 11-02.png


Associate ManNode and WomanNode to this filter and define the Semantic Condition Expression : aql:self.children->size()>0

Sirius tuto2 11-03.png


On the diagram, you can now select the filter childrenFilter and see that only persons with children remain visible.

Sirius tuto2 11-04.png

Validation Rules

Validation rules allow the user to evaluate the quality of a model.

For example, despite the precondition we have created on the Eddge Creation tool, users can still create circular parental relations between two persons by using the Properties View.

Let's create a Validation Rule to detect this problem.


Right click on Persons diagram and select the menu New Validation > Validation.

Sirius tuto2 12-01.png


Set the name FamilyValidation to this Validation. Then create a Semantic Validation Rule.

Sirius tuto2 12-02.png


Set the properties of this rule:

  • Level: Error
  • Target Class: basicfamily::Person
  • Message: aql:self.oclAsType(basicfamily::Person).father.name+' should not be both the child and the father of '+self.oclAsType(basicfamily::Person).name


Sirius tuto2 12-03.png


Then create an Audit (a condition corresponding to this rule) with the expression aql:self.children->excludes(self.father).

Sirius tuto2 12-04.png


To test this rule, introduce an error in the model with the Property View: add the father of a person into the list of his children.

Sirius tuto2 12-05.png


Then right-click on the diagram and select the menu Validate diagram.

Sirius tuto2 12-06.png


The circular father relationship is detected and a decorator (corresponding to the rule level) is displayed on the persons with this problem. A tootip contains the error message.

Sirius tuto2 12-07.png

Quick Fixes

Fixes can be provided to the user for solving the problem automatically.

For example, we can propose to unset one of the two father relations.


Right-click on the Rule and select the menu New > Fix.

Sirius tuto2 13-01.png


Set the name Unset father to this Fix and create a Begin. Then create a Unset and enter father in the Feature name.

Sirius tuto2 13-02.png


If you open the Problems View, you can right-click on one of the errors and select the menu Quick Fix.

Sirius tuto2 13-03.png


A dialog opens which proposes the available fixes.

Sirius tuto2 13-04.png


Select Unset father and click on Finish: the father of the selected person is automatically unset and the problem is solved.

Sirius tuto2 13-05.png

Object-Centered Diagram

The Persons diagram is a representation related to the whole model: it displays all the members of the family. This is the reason why it belongs to the Family instance, as you can see in the Model Explorer.

Sirius tuto2 14-01.png


With Sirius, you can create a representation on any instance of the model. For example, let's create a person-centered diagram to show only the relationships of a given person.


Right-click on the persons viewpoint and select the menu New Representation > Diagram Description.

Sirius tuto2 14-02.png


Associate the basicfamily metamodel to this diagram (see Starter Tutorial) then set these properties:

  • Id: Relationships diagram
  • Domain Class: basicfamily::Person


Sirius tuto2 14-03.png


In the Advanced tab, set the Title Expression to aql:'Relations of '+self.name in order to customize the name of the diagram with the person's name.

Sirius tuto2 14-04.png


Save the odesign file. Now, you can right click on a person in the Model Explorer and create a new representation of type Relationships diagram.

Sirius tuto2 14-05.png


The result is a blank diagram, since we have not yet specified its content.

Sirius tuto2 14-06.png


Container

A Container is a kind of diagram element that can contain other diagram elements.

On the Relationships diagram, let's use two containers to represent:

  • The current person (who owns the diagram) with:
    • each children in a list
    • its parents as border nodes
  • The siblings of the current person:
    • each sibling in a list


Right-click on the Layer and select the menu New Diagram Element > Container.

Sirius tuto2 15-01.png


For this first container, set these properties:

  • Id: PersonContainer
  • Domain Class: basicfamily::Person
  • Semantic Candidate Expression: var:self (the current person)
  • Children Presentation: List


Sirius tuto2 15-02.png


To define the graphical rendering of this container, right-click on it and select the menu New Style > Gradient.

Sirius tuto2 15-03.png


On this style, set these properties:

  • Label Tab:
    • Label Size: 12
    • Label Format: bold


Sirius tuto2 15-04.png


  • Color Tab:
    • Foreground Color: light_green


Sirius tuto2 15-05.png


Save the odesign file and you see a green container appear on the diagram that you have created for a person.

Sirius tuto2 15-06.png

Sub Nodes

Now, to display children inside this container, right-click on the container definition and click on the menu New Diagram Element > Sub Node.

Sirius tuto2 16-01.png


On the Sub Node set these properties:

  • Id: ChildrenNode
  • Domain Class: basicfamily::Person
  • Semantic Candidate Expression: feature:children


Sirius tuto2 16-02.png


Then create a style. Note that the kind of style is not important here: for elements in a list, the style is used only to specify the label.

Sirius tuto2 16-03.png


Save the odesign file, and now you can see the children listed inside the container.

Sirius tuto2 16-04.png


Copy paste PersonContainer to create another container for siblings.


Change these properties on this new container description:

  • Container > Name: SiblingContainer
  • Gradient > Label Size: 10
  • Gradient > Label Expression: Siblings
  • Gradient > Foreground Color: light_yellow

And these properties on the Sub Node:

  • Id: Sibling Node
  • Semantic Candidates Expression: aql:self.parents.children->excluding(self)


Sirius tuto2 16-05.png


Save the odesign file, and now you can see the siblings listed inside a second container.

Sirius tuto2 16-06.png

Border Node

Now let's add Border Nodes to the first container to display the parents of the current person.


Right-click on PersonContainer and select the menu New Diagram Element > Border Node:

Sirius tuto2 17-01.png


Set these properties to the border node:

  • Id: ParentNode
  • Domain Class: basicfamily::Person
  • Semantic Candidate Expression: feature:parents


Sirius tuto2 17-02.png


Add a square as style with a White color.

Save the odesign file and now you can see the parents attached on the border of the first container:

Sirius tuto2 17-03.png

Edge between containers

Like nodes, Containers can be linked with Edges.


Right-click on the Default container and select the menu New Diagram Element > Relation Based Edge.

Sirius tuto2 18-01.png


Set these properties to the edge:

  • Id: SiblingsEdge
  • Source Mapping: PersonContainer
  • Target Mapping: SiblingsContainer
  • Target Finder Expression: var:self (the second container represents the current person also)


Sirius tuto2 18-02.png


On the style of the edge (automatically created), you can specify the end's decorators.

Sirius tuto2 18-03.png


Save the odesign file, and now you can see a link between the two containers.

Sirius tuto2 18-04.png

Double-click

Now we can create a specific diagram for each person. To facilitate the navigation between all these diagrams, let's create a Double Click tool that allows the user to navigate from any person on a diagram to its dedicated diagram.


Go back to the first diagram, right click on the Section in the first Layer and select the menu New Element Edition > Double Click.

Sirius tuto2 19-01.png


On the Mappings property of the Double Click select all the elements of the modeling tool that represent a Person (except the two containers, since it doesn't make sense to navigate to the current diagram).

Sirius tuto2 19-02.png


To specify the action of the Double Click, right-click on the Begin and select the menu New Operation > Navigation.

Sirius tuto2 19-03.png


Then set these properties to the Navigation :

  • Diagram Description: Relationships diagram
  • Create if not Existent: true


Sirius tuto2 19-04.png


Save the odesign file, close and reopen your diagrams. Now you can double-click on persons to open their corresponding Relationships diagram. If this diagram has not been created yet, Sirius will propose to create it.

Sirius tuto2 19-05.png

Table

With Sirius it is also possible to represent model elements with a Table.

Let's create a table that lists all the persons, with this information for each:

  • father's name
  • mother's name
  • number of children


Right-click on the Viewpoint and select the menu New representation > Edition Table Description.

Sirius tuto2 20-01.png


Set the basicfamily metamodel to this table (see Starter Tutorial) then set these properties:

  • Id: Persons table
  • Domain Class: basicfamily::Family


Sirius tuto2 20-02.png


In this table, you need lines to represent the persons. So, right-click on the Table and select the menu New Table Element > Line.

Sirius tuto2 20-03.png


Set these properties to the line:

  • Id: PersonLine
  • Domain Class: basicfamily::Person
  • Semantic Candidates Expression: feature:members
  • Header Label Expression (Label tab): feature:name


Sirius tuto2 20-04.png


Save the odesign file then right-click on the Family instance in the Model Browser and click on the menu New Representation. You can see a new menu new Persons table.

Sirius tuto2 20-05.png


If you select this menu, Sirius creates and opens a table with all the family's members.

Sirius tuto2 20-06.png


Now, let's add columns to this table to display more information for each person. So, right-click on the Table and select the menu New Table Element > Feature Column.

Sirius tuto2 20-07.png


Set these properties to the column:

  • Id: fatherCol
  • Feature Name: father


Sirius tuto2 20-08.png


Select the Label tab and set these properties:

  • Header Label Expression: Father
  • Label Expression: aql:self.father.name


Sirius tuto2 20-10.png


Copy and paste fatherCol then rename father by mother in all the properties.

Sirius tuto2 20-09.png


Save the odesign file and see the two new columns.

Sirius tuto2 20-11.png


Finally, add a new Feature Column to display the number of children.

Set these properties to the column:

  • Id: childrenCol
  • Feature Name: children


Sirius tuto2 20-12.png


Select the Label tab and set these properties:

  • Header Label Expression: Children
  • label Expression: aql:self.children->size()


Sirius tuto2 20-13.png


Save the odesign file and see the third column.

Sirius tuto2 20-14.png

Java Services

When expressions become complex, you should write Java Services instead.

For example, let's create a Java Service to compute the number of cousins and display this information in the table.

Add a method named getCousinsNumber in the Java class Services.java (in src/org.eclipse.sirius.sample.basicfamily.design).


package org.eclipse.sirius.sample.basicfamily.design;

import java.util.ArrayList;
import java.util.List;

import org.eclipse.sirius.sample.basicfamily.Person;

/**
 * The services class used by VSM.
 */
public class Services {
    	
	public int getCousinsNumber(Person person) {
		List<Person> cousins=new ArrayList<Person>();
		List<Person> parents=person.getParents();
			
		for (Person parent: parents) {
			for (Person grandParent: parent.getParents()) {
				for (Person uncleOrAunt: grandParent.getChildren()) {
					if (!parents.contains(uncleOrAunt)) {
						for (Person cousin:uncleOrAunt.getChildren()) {
							if (!cousins.contains(cousin))
								cousins.add(cousin);
						}
					}
				}
			}
		}
		return cousins.size();	
	}
	
}


To use the service getCousinsNumber in the table, create a new Feature Column named cousinsCol and invoke the service in the expression (service:getCousinsNumber).

Sirius tuto2 21-04.png


Note: The Feature Name property can be set with any valid feature name (name, parents, ...), since the label will be computed independently (just based on the current person).

Note: Since Sirius 4.1, the Services.java class is automatically created. If you use a previous version, you have to manually create a Java class and define a Java extension in your viewpoint.

In the table, now you can see a new column Cousins containing the number of cousins for each person (zero in the sample model). Use the diagram creation tools for creating more persons such as some of them have cousins: Sirius will automatically update the number of cousins in the table.

Sirius tuto2 21-06.png

Going Further

This advanced tutorial is now finished, congratulations! If you wish to go further and explore other Sirius features, you can continue with the Compartments Tutorial which explains how to create compartments within a container.

Sirius tuto3-1-1.png