Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: for the plan.

Jump to: navigation, search



This tutorial explains how to create your first properties view with 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: If you need to learn how to define such a Domain Model, just follow the Domain Model tutorial

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

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

Sirius tuto2 02-04.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 create properties view for basic modeling tool

Let’s start creating your frist properties view.

In this tutorial, we will create a custom properties view.

The sample model imported previously will be used to test this editor.

Create a Properties View Description

The Properties View Description is available from the Viewpoint directory

Sirius 6mtuto 01.png

The Properties View Description is composed of a Page and a Group. The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view. Sirius 6mtuto 02.png

By default a Page and a Group is created in the Properties View Description. In the tab Advanced of the Properties View Description inform the Identifier field

Sirius 6mtuto 03.png

Inform the fields of the Page

Sirius 6mtuto 04.png

Sirius 6mtuto 05.png

Inform the fields of the Group

Sirius 6mtuto 06.png

Sirius 6mtuto 07.png

Add Widgets to the Group Person

Widget Text

Create a new Text widget in the Group Person to display the name of the persons.

Sirius 6mtuto 08.png

Sirius 6mtuto 09.png

Add a begin in the Widget Text and create a Set to can modify person's name

Sirius 6mtuto 10.png

Add A Conditional Style in the Widget Text to check the name is not empty. If the name is empty the backgrounf field change to red. Add a Style in the Conditional Style.

-File-Sirius 6mtuto 11.png

-File-Sirius 6mtuto 12.png

The result should be

Sirius 6mtuto 13.png

If you delete the name of "Lea" the field is filled in red

Sirius 6mtuto 14.png


We create a container to display a select list of father and mother on the same line

Sirius 6mtuto 15.png

Add a Fill Layout with HORIZONTAL properties check

Sirius 6mtuto 15 1.png

Widget Select

Create a new Select Widget to allow change relation mother

Sirius 6mtuto 16.png

Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list

Sirius 6mtuto 17.png

Create a style to change the selection label foreground

Sirius 6mtuto 18.png

Do the same thing for relation father. The result should be

Sirius 6mtuto 19.png

Widget Checkbox

Create a Container for display properties for children Add A Fill Layout Horizontal as previously.

Sirius 6mtuto 20.png

Create in the container a new Checkbox widget

Sirius 6mtuto 21.png

Sirius 6mtuto 22.png

Create a Begin and in, an If operation with value "aql:newValue=false" After we use a Switch for the 2 cases Man and Woman

Sirius 6mtuto 23.png

For each children

Sirius 6mtuto 24.png

Unset the relation mother

Sirius 6mtuto 25.png

Do same thing for relation father.

Create a Select widget to add potential child to the selected person

Sirius 6mtuto 26.png

Sirius 6mtuto 27.png

Create a Begin and add it a Set Operation

Sirius 6mtuto 28.png

Result of children container

Sirius 6mtuto 29.png

Widget List

Create a List to display children of selected person

Sirius 6mtuto 30.png

Sirius 6mtuto 31.png

Create an Action to add a button to the List. This button allow to create a new son to the selected person

Sirius 6mtuto 32.png

Create a Begin and add a change context to call the service createSon

Sirius 6mtuto 33.png

Do the same thing for createDaughter

Sirius 6mtuto 34.png

Create an Action to unset the relation children. For this case we should manage case for Woman and Man

Sirius 6mtuto 35.png

Sirius 6mtuto 36.png

Do the same thing to unset a son

Sirius 6mtuto 37.png

Expected Result

Sirius 6mtuto 38.png

Widget Label

Create a container to display number of sisters and brothers This container is named "Sister&Brother"

Create a Label widget to display number of sisters

Sirius 6mtuto 39.png

Create a style to display the number of sister in gray if number of sister equals 0

Sirius 6mtuto 40.png

Create a conditional Style to display number of sister in purple if number od sister is greater than 0

Sirius 6mtuto 41.png

Do the same thing for number of brother

Sirius 6mtuto 42.png

Expected result

Sirius 6mtuto 43.png

Widget Radio Button

Create a Radio button to display the type (Woman of Man) of the selected person

Sirius 6mtuto 44.png

Expected Result

Sirius 6mtuto 45.png

Group Validation

The group validation enabled to define validation rules for properties view The first validation rule check that if the reference father is not null, the reference parent should be set with same value.

Sirius 6mtuto 46.png

Sirius 6mtuto 47.png

Create un Fix and named it "Add father to parents" and created in a Begin. In the Begin create a Set

Sirius 6mtuto 48.png

Create a same thing to check that the mother is set in mother and in parents.

Sirius 6mtuto 49.png

Create a new Group for Family

This group allow to display properties view for the root element Family. The user have to click on diagram to activate this properties view. Before to create the new Group Family it's necessary to create a new Page and named it FamilyPage.

Sirius 6mtuto 50.png

Sirius 6mtuto 51.png

Create a new Group for Family

Sirius 6mtuto 52.png

Sirius 6mtuto 53.png

Add the Group Family to the Family Page

Create a Text widget to display the name of the family

Sirius 6mtuto 54.png

Add a Begin and a Set to modify the name of the Family. Do same things as previously do for Widget Text. Add a Conditional Style to check if the family name = null. If it's true put the background color field to red.

Expected result

Sirius 6mtuto 55.png

Widget Reference

The Reference widget allow to have a List with 4 defautl button (up, down, add and remove). Create a Reference widget to display family members

Sirius 6mtuto 56.png

Expected Result

Sirius 6mtuto 57.png

Widget Label

Create a label to display the number of person in the familly

Sirius 6mtuto 58.png

Expected result

Sirius 6mtuto 59.png

Widget Button

This widget allow to add a button in the properties view. We will create 2 buttons, one to add Woman to Family and one to add Man to Family. Create a new Button

Sirius 6mtuto 60.png

Create a Begin and in, a Create Instance to create a new Woman

Sirius 6mtuto 61.png

Create a Set, to set name of the new Woman Created

Sirius 6mtuto 62.png

Do the same thing for button create Man

Sirius 6mtuto 63.png

Expected Result

Sirius 6mtuto 64.png

Back to the top