- 1 Overview
- 2 Install the basic modeling tool
- 3 Start create properties view for basic modeling tool
- 4 Create a Properties View Description
- 5 Add Widgets to the Group Person
- 6 Create a new Group for Family
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.
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.
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
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.
Then right-click on the sample model and select the menu New Representation / new Persons diagram.
Sirius should create and open a diagram describing the men and women contained in the sample model.
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
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
Inform the fields of the Page
Inform the fields of the Group
Add Widgets to the Group Person
Create a new Text widget in the Group Person to display the name of the persons.
Add a begin in the Widget Text and create a Set to can modify person's name
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.
The result should be
If you delete the name of "Lea" the field is filled in red
We create a container to display a select list of father and mother on the same line
Add a Fill Layout with HORIZONTAL properties check
Create a new Select Widget to allow change relation mother
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list
Create a style to change the selection label foreground
Do the same thing for relation father. The result should be
Create a Container for display properties for children Add A Fill Layout Horizontal as previously.
Create in the container a new Checkbox widget
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
For each children
Unset the relation mother
Do same thing for relation father.
Create a Select widget to add potential child to the selected person
Create a Begin and add it a Set Operation
Result of children container
Create a List to display children of selected person
Create an Action to add a button to the List. This button allow to create a new son to the selected person
Create a Begin and add a change context to call the service createSon
Do the same thing for createDaughter
Create an Action to unset the relation children. For this case we should manage case for Woman and Man
Do the same thing to unset a son
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
Create a style to display the number of sister in gray if number of sister equals 0
Create a conditional Style to display number of sister in purple if number od sister is greater than 0
Do the same thing for number of brother
Widget Radio Button
Create a Radio button to display the type (Woman of Man) of the selected person
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.
Create un Fix and named it "Add father to parents" and created in a Begin. In the Begin create a Set
Create a same thing to check that the mother is set in mother and in parents.
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.
Create a new Group for Family
Add the Group Family to the Family Page
Create a Text widget to display the name of the family
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.
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
Create a label to display the number of person in the familly
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
Create a Begin and in, a Create Instance to create a new Woman
Create a Set, to set name of the new Woman Created
Do the same thing for button create Man