Skip to main content

Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Sirius/Tutorials/CompartmentsTutorial

Overview

This tutorial, will guide you creating compartments into containers with Eclipse Sirius.

Containers are diagram elements that contain sub-elements, displayed in a list or with shapes (squares, circle, images, etc) arranged according to user needs. Compartments can be used to group these sub-elements into predefined regions within the container.

If you have followed the Starter Tutorial, you have already created a diagram that displays a family tree.

Sirius tuto3-1-0.png


Now, let's create a new kind of diagram to display the parental relationships of a person into a single container.

In order to visualize the different kinds of relationships, we will use compartments:

  • parents
  • siblings
  • children
  • grandchildren

Sirius tuto3-1-1.png

Note: the solution of this tutorial can be installed directly from the samples

Sirius tuto3-1-2.png


This tutorial is based on a simple Domain Model which describes basic concepts about families.

Sirius 4mtuto 02.png

Note: If you need to learn how to define such a Domain Model, just follow the Domain Model tutorial


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

Prepare the tutorial

If you have already followed the  Starter Tutorial or the Advanced Tutorial, you are ready! Directly go to next section.

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


The activation of persons viewpoint allows you to create the representations which are defined by this viewpoint.

Sirius 4mtuto 28.png

Create a diagram with a compartment-ready container

Let's extend the Starter Tutorial result with a new kind of diagram that will display a Person as a container.

Sirius tuto3-2-1.png


To allow the user to create this new kind of diagram from any Person of a basicfamily model, you have to set basicfamily::Person as the Domain Class.

Sirius tuto3-2-2.png


Use the expression aql:'Details of '+self.name to give a person-related name to the diagram (ex: « Details of Elias »).

Sirius tuto3-2-3.png


On the default layer of this diagram, create a container to represent the current person.

Sirius tuto3-2-4.png


As we want the container to display the compartments horizontally, select Horizontal Stack as value of the Children Presentation option. This means that all the sub-containers defined within this main container will be displayed within a single row.

Sirius tuto3-2-5.png


The other option (Vertical Stack) is used to display all the sub-containers within a single column. Note that the Sirius editor disables these options if the container contains sub-nodes (only sub-containers can be used for a stack).

Set a Gradient style to this main container.

Sirius tuto3-2-6.png


Set the label properties of the Gradient:

  • Label Size: 14
  • Label Format: Bold

Sirius tuto3-2-7.png


Now, before going further, you can already test this new kind of diagram: save the .odesign file then right-click on Elias in the Model Explorer. You should see a menu New Representation and a sub-menu Details of Elias.

Sirius tuto3-2-8.png


If you select this sub-menu, Sirius creates and opens a new diagram containing a box named Elias.

Sirius tuto3-2-9.png


This is the container that we are going to fill with compartments.

Create a first compartment for the parents

The first compartment that we are going to create will display the parents of the person. Right-click on the PersonContainer and add a new container.

Sirius tuto3-3-1.png


This new container will display the parents of the current person as a list.

Sirius tuto3-3-2.png


Set a gradient style to the ParentsContainer.

Sirius tuto3-3-3.png


Set a specific Foreground Color to this Gradient (light_blue). You can also select a lighter border color for all the compartments (gray).

Sirius tuto3-3-4.png


The label of this compartment will be fixed (Parents) and displayed with a smaller font (12) in bold.

Sirius tuto3-3-5.png


Now let's add the sub-node which will display each parent.

Sirius tuto3-3-6.png


This node will display all the persons (basicfamily.Person instances) that Sirius will retrieve by executing the expression aql:self.parents.

Sirius tuto3-3-7.png


In order to specify the label of the parents, we need to add a style to this node. We can choose any kind of style (its shape will not be taken into account as the Children Presentation feature selected for the ParentsContainer is List). Let's use a Square.

Sirius tuto3-3-8.png


The default values of the Label properties are exactly what we need. So we can let them as is. Note that it is possible to hide the label (option  Hide Labl By Default) if you don't want to display a label for a compartment.

Sirius tuto3-3-9.png


Save the .odesign file and have a look at the diagram previously created for Elias: you should see a blue compartment named Parents containing Isa and Paul.

Sirius tuto3-3-10.png

Add two other compartments for siblings and children

Now, let's create two other compartments to display the siblings and the children of a person.

Just copy and paste the ParentsContainer twice and change the names and labels.

Sirius tuto3-4-1.png


Under the SiblingsContainer, rename the node to SiblingNode and replace the Semantic Candidate Expression by aql:self.parents.children->excluding(self)

Sirius tuto3-4-2.png


Under the ChildrenContainer, rename the node to ChildrenNode and replace the Semantic Candidate Expression by feature:children

Sirius tuto3-4-3.png


On the diagram, now you can see three compartments.

Sirius tuto3-4-4.png

For each children, add a compartment containing the grandchildren

The three compartments defined previously were « fixed »: each one is created only once within the container. This is due to the expression var:self.

In some cases, you need « dynamic » compartments: their number can vary depending on the model. For example, here we want to display grandchildren grouped by their parents. So we need as many compartments as the number of children.

Before modifying the modeler, we have to complete the sample model and create grandchildren for Elias (otherwise, my example won't display enough grandchildren).

Sirius tuto3-5-0.png


Now, let's create a new container GrandchildrenContainer.

As we want a compartment for each children who has children (in order to display the grandchildren), use this expression for the Semantic Candidate Expression: aql:self.children->select(c|c.children->size()>0).

Unlike the previous containers that display the persons in a list, let's use the Free Form option.

Sirius tuto3-5-1.png


Create a Gradient for this container with a label computed from the name of the person (one of the main person's children) aql:self.name+'\'s children'.

Sirius tuto3-5-3.png


We can also define a specific border for this compartment: let's use the dash  style.

Sirius tuto3-5-4.png


Now you can see three new compartments: one for each children having children.

Sirius tuto3-5-5.png


To display the grandchildren, let's create two sub-nodes (one for the sons and one for the daughters)

Sirius tuto3-5-6.png


Create Workspace Images for these nodes (you can use the SVG images provided with the Advanced Tutorial or the PNG ones provided with the Starter Tutorial). If you use the PNG images, set the size to 3.

Sirius tuto3-5-7.png


Also, in the Label tab set the Label position to border and the show icon to false.


And now you can see the grandchildren within each children container.

Sirius tuto3-1-1.png

Back to the top