Revision as of 11:08, 23 October 2015

Overview

This tutorial, will guide you creating compartments into containers.

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.

Let's use compartments to create a diagram that displays the parental relationships of a person into a same container:

• his parents
• his siblings
• his children
• his grandchildren

Note: The screenshots have been updated with Obeo Designer 8.1 (based on Sirius 3.1)

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

Prepare the tutorial

If you have already followed the Starter Tutorial or the Advanced Tutorial, you are ready! Directly go to next section: Start creating a diagram with compartments

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

• Import the projects containing the sample Domain Model
• Launch a new runtime from your Eclipse
• Select the Sirius perspective
• Import a sample model

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

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 Sample Modeler Definition).

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

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

Create a diagram with a compartment-ready container

Let's create a new kind of diagram that will display a Person as a container.

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.

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

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

As we want the container to display the compartments horizontaly, 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.

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.

Set the label properties of the Gradient :

• Label Size : 14
• Label Format : Bold

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.

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

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.

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

Set a gradient style to the ParentsContainer.

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

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

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

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

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.

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.

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.

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 changes the names and labels.

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

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

On the diagram, now you can see three compartments.

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 to modify the modeler, we have to complete the sample model and create grandchildren for Elias (otherwise, my example won't display enough grandchildren).

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.

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'.

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

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

To display the grandchildren, let's create two sub-nodes (one for the sons and one for the daughters), with Workspace Images (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.

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