https://wiki.eclipse.org/api.php?action=feedcontributions&user=Julien.dupont.obeo.fr&feedformat=atomEclipsepedia - User contributions [en]2024-03-28T12:22:35ZUser contributionsMediaWiki 1.26.4https://wiki.eclipse.org/index.php?title=Sirius/Tutorials/DomainModelTutorial&diff=431705Sirius/Tutorials/DomainModelTutorial2019-04-24T08:21:16Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first EMF Metamodel. <br />
It can be seen as the early step before the [[Sirius/Tutorials/4MinTutorial | Starter Tutorial]]. <br />
<br />
<br />
The instructions describe the creation of the BasicFamily metamodel. This metamodel defines 4 concepts that can be use to describe a family:<br />
<br />
* The first concept is '''Family'''. A family has a '''name''' of type '''Estring'''. <br />
* A family contains '''members''' of type '''Person'''. A person has a '''name''' of type '''EString'''. <br />
* A person has 2 '''parents''' and many or no '''children'''. <br />
* Two concepts herited from '''Person''' are '''Man''' and '''Woman'''. <br />
* A person can have one '''father''' of type '''Man''' and/or one '''mother''' of type '''Woman'''. <br />
<br />
[[File:Sirius_tuto4_01.png]]<br />
<br />
<br />
To sum up, our metamodel have 4 concepts<br />
* '''Family'''<br />
* '''Person'''<br />
* '''Man'''<br />
* '''Woman'''<br />
and 6 relations<br />
* '''members''' from '''Family''' to '''Person'''<br />
* '''children''' from '''Person''' to '''Person''', with cardinality '''0..*'''<br />
* '''parents''' from '''Person''' to '''Person''' with cardinality '''0..2'''<br />
* '''father''' from '''Person''' to '''Man''' with cardinality '''0..1'''<br />
* '''mother''' from '''Person''' to '''Woman''' with cardinality '''0..1'''<br />
* an ''extend'' from '''Person''' for '''Man''' and '''Woman'''<br />
<br />
=Create the Metamodel=<br />
The easiest way to define a metamodel is to use Ecore Tools (based on EMF and Sirius), a graphical editor for Ecore models.<br />
<br />
==Install Ecore Tools==<br />
If you are using Obeo Designer or Eclipse Modeling packages, Ecore Tools is already installed.<br />
<br />
Otherwise, you can find it here: [https://www.eclipse.org/ecoretools/ EcoreTools site]<br />
<br />
To install it, click on ''Help/Install New Software...''<br />
<br />
[[File:Sirius_tuto4_02.png]]<br />
<br />
Click on ''Add...'' and fill the fields<br />
* '''Name''': Ecore Tools<br />
* '''Location''': One of the update sites listed here [https://www.eclipse.org/ecoretools/download.html EcoreTools UpdateSite]<br />
<br />
[[File:Sirius_tuto4_03.png]]<br />
<br />
Click on ''Ok''.<br />
<br />
[[File:Sirius_tuto4_04.png]]<br />
<br />
Finally, Click on ''Next >'' and follow the instructions to complete the installation.<br />
<br />
==Create an Ecore Modeling Project==<br />
<br />
In the Model Explorer View, right click on ''New->Other...''<br />
<br />
[[File:Sirius_tuto4_05.png]]<br />
<br />
<br />
In Ecore Modeling Framework select ''Ecore Modeling Project''<br />
<br />
[[File:Sirius_tuto4_06.png]]<br />
<br />
<br />
Name it <code>org.eclipse.sirius.sample.basicfamily</code><br />
<br />
[[File:Sirius_tuto4_07.png]]<br />
<br />
<br />
Click on ''Finish'' : Ecore Tools creates a project containing an Ecore model with an empty package and a blank diagram.<br />
<br />
[[File:Sirius_tuto4_08.png]]<br />
<br />
<br />
==Create the elements of the metamodel==<br />
<br />
Now you can use the palette to create the elements of the metamodel described previously.<br />
<br />
[[File:Sirius_tuto4_09.png]]<br />
<br />
<br />
Use the '''Class''' tool in the palette to create ''Family, Person, Man and Woman''. Use the properties view to set '''Person''' as ''abstract''.<br />
<br />
[[File:Sirius_tuto4_10-2.png]]<br />
<br />
<br />
Note that you can edit the name of a model element (class, attribute, relation) directly from the diagram: just click on a selected element to activate the label edition (let some time before the selection and the click to avoid triggering a double-clik).<br />
<br />
Use the '''Attribute''' tool in the palette, or the popup, to create an attribute named ''name'' on '''Family''' and '''Person'''.<br />
<br />
[[File:Sirius_tuto4_29.png]]<br />
<br />
<br />
Use the '''Composition''' tool in the palette to create a composition relation named ''members'' between '''Family''' and '''Person'''.<br />
<br />
[[File:Sirius_tuto4_11-2.png]]<br />
<br />
<br />
Use the '''Bi-directional Reference''' tool in the palette to create the relation named ''children'' and ''parents'' from '''Person''' to '''Person''':<br />
<br />
[[File:Sirius_tuto4_12-2.png]]<br />
<br />
<br />
Use the '''SuperType''' tool in the palette to create the inheritance relations from '''Man''' and '''Woman''' to '''Person''':<br />
<br />
[[File:Sirius_tuto4_13-2.png]]<br />
<br />
<br />
Use the '''Reference''' tool in the palette to create the two relations named ''father'' and ''mother'' from '''Person''' to '''Man''' and '''Woman'''. Check the ''derived'' property of these references in the Properties View.<br />
<br />
[[File:Sirius_tuto4_42.png]]<br />
<br />
<br />
More information about [https://www.eclipse.org/ecoretools/doc/index.html Ecore Tools modeler]<br />
<br />
Best practices on how to create a metamodel with Ecore:<br />
* [http://cedric.brun.io/eclipse/ecore-design-checklist-part1/ Ecore design checklist part1]<br />
* [http://cedric.brun.io/eclipse/ecore-design-checklist-part2/ Ecore design checklist part2]<br />
* [http://cedric.brun.io/eclipse/ecore-design-checklist/ Ecore design checklist]<br />
* [http://cedric.brun.io/eclipse/ecore-ecore-diagrams/ Ecore Diagram]<br />
<br />
=Generate the source code of the Metamodel=<br />
<br />
By default, the Ns URI of the ecore file is set with <code>http://www.example.org/basicfamily</code>. This value is used to reference the metamodel in your Eclipse environment. <br />
<br />
To change this value, click on the diagram's background (it will show the properties of the package ''basicfamily'') and set the Ns URI with <code>http://www.eclipse.org/sirius/sample/basicfamily</code> <br />
<br />
[[File:Sirius_tuto4_14.png]] <br />
<br />
<br />
In the Model Explorer, open the file ''basicfamily.genmodel'' and select the package ''basicfamily'' (this ''genmodel'' file contains a model that allows EMF to generate the Java code corresponding to the metamodel). <br />
<br />
[[File:Sirius_tuto4_44.png]] <br />
<br />
<br />
In the Properties View, fill the property '''Base Package''' with <code>org.eclipse.sirius.sample</code>. <br />
<br />
[[File:Sirius_tuto4_40.png]] <br />
<br />
<br />
This value forces the generation of the source code into a package named ''org.eclipse.sirius.sample.basicfamily''.<br />
<br />
Right-click on the class diagram and select '''Generate > All'''<br />
<br />
<br />
[[File:Sirius_tuto4_43.png]] <br />
<br />
<br />
The "Generate All" produces these elements :<br />
* The folder '''src''' in ''org.eclipse.sirius.sample.basicfamily''<br />
* The file '''MANIFEST.MF''' in the ''META-INF directory''<br />
* The project '''org.eclipse.sirius.sample.basicfamily.edit'''<br />
* The project '''org.eclipse.sirius.sample.basicfamily.editor'''<br />
<br />
<br />
[[File:Sirius_tuto4_41.png]]<br />
<br />
=Test the metamodel=<br />
<br />
Launch a runtime to use the Basicfamily concepts.<br />
<br />
==Launch a new runtime from your Eclipse==<br />
<br />
To launch a new eclipse application click on ''Run / Run Configurations'' and double click on ''Eclipse Application'' to get a New_configuration. <br />
<br />
'''If you are not running with java 8''', in order to comfortably run Sirius in your new runtime, you should add this option in your VM arguments : <br />
-XX:MaxPermSize=256m <br />
<br />
[[File:sirius_4mtuto_03.png]]<br />
<br />
==Create a new Modeling Project==<br />
<br />
Right click in ''Model Explorer'' view '''New->Modeling Project'''<br />
<br />
<br />
[[File:Sirius_tuto4_30.png]]<br />
<br />
<br />
Named it <code>org.eclipse.sirius.sample.basicfamily.sample</code><br />
<br />
<br />
[[File:Sirius_tuto4_31.png]]<br />
<br />
<br />
On the new project created, right click on ''New > Other...''<br />
<br />
[[File:Sirius_tuto4_18.png]]<br />
<br />
In ''Example EMF Model Creation Wizards'', select ''Basicfamily Model''.<br />
<br />
[[File:Sirius_tuto4_19.png]]<br />
<br />
Click on '''Next>''' button to create a Basicfamily model.<br />
<br />
Select ''Family'' as the type of the root object in your new model and click on '''Finish'''.<br />
<br />
[[File:Sirius_tuto4_32.png]]<br />
<br />
<br />
EMF has created a new model and automatically opened the default tree editor.<br />
<br />
<br />
To add elements to this model, right click on the ''Family'' element and select ''Man'' or ''Woman'' menu.<br />
<br />
[[File:Sirius_tuto4_33.png]]<br />
<br />
<br />
With the properties view you can edit the person's name and set its''Parents'' or ''Children'' relations to other persons in the model.<br />
<br />
[[File:Sirius_tuto4_34.png]]<br />
<br />
==Change default EMF icons==<br />
<br />
'''Note:''' As you can see, the ''Basicfamily Model'' tool in the tree has the default EMF icon (star on a blank file).<br />
<br />
To change this icon, just replace ''BasicfamilyModelFile.gif'' in ''/org.eclipse.sirius.sample.basicfamily.editor/icons/full/obj16/'' by your own specific icon:<br />
<br />
[[File:Sirius_tuto4_20.gif]]<br />
<br />
Note: The icons for Man, Woman and Family are defined in ''/org.eclipse.sirius.sample.basicfamily.edit/icons/full/obj16''.<br />
<br />
We have replaced the default ones generated by EMF:<br />
<br />
* Man by [[File:Sirius_tuto4_25.gif]]<br />
* Woman by [[File:Sirius_tuto4_26.gif]]<br />
* Family by [[File:Sirius_tuto4_20.gif]]<br />
<br />
To have the same icons for the elements creation (man or woman), you should modify the basicfamily.genmodel.<br />
<br />
Open it, in properties view, update the ''Creation Icons'' value to <code>false</code><br />
<br />
[[File:Sirius_tuto4_35.png]]<br />
<br />
Remove too the '''ctool16''' directory in '''org.eclipse.sirius.sample.basicfamily.edit''' for EMF does not use these icons.<br />
<br />
[[File:Sirius_tuto4_36.png]]<br />
<br />
Right click on BasicFamily root model and select '''Generate Edit Code'''<br />
<br />
Relaunch the runtime with click on the [[File:Sirius_tuto4_38.png]] in the tabbar. You will see this new icon in the new ''Basicfamily model'' creation wizard:<br />
<br />
[[File:Sirius_tuto4_21.png]]<br />
<br />
With these new icons, the editor looks like this<br />
<br />
[[File:Sirius_tuto4_28.png]]<br />
<br />
Rather than<br />
<br />
[[File:Sirius_tuto4_39.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_tuto4_43.png&diff=431704File:Sirius tuto4 43.png2019-04-24T07:15:37Z<p>Julien.dupont.obeo.fr: Julien.dupont.obeo.fr uploaded a new version of File:Sirius tuto4 43.png</p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_tuto4_43.png&diff=431703File:Sirius tuto4 43.png2019-04-24T07:10:34Z<p>Julien.dupont.obeo.fr: Julien.dupont.obeo.fr uploaded a new version of File:Sirius tuto4 43.png</p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_tuto4_43.png&diff=431702File:Sirius tuto4 43.png2019-04-24T07:07:26Z<p>Julien.dupont.obeo.fr: Julien.dupont.obeo.fr uploaded a new version of File:Sirius tuto4 43.png</p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412940Sirius/Tutorials/PropertiesViewTutorial2016-12-16T14:14:09Z<p>Julien.dupont.obeo.fr: /* Group Validation */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a select list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Widget Checkbox==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
==Widget List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]<br />
<br />
=Create a new Group for Family=<br />
<br />
This group allow to display properties view for the root element Family. The user have to click on diagram to activate this properties view.<br />
Before to create the new Group Family it's necessary to create a new Page and named it FamilyPage.<br />
<br />
<br />
[[File:Sirius_6mtuto_50.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_51.png]]<br />
<br />
<br />
Create a new Group for Family<br />
<br />
<br />
[[File:Sirius_6mtuto_52.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_53.png]]<br />
<br />
<br />
Add the Group Family to the Family Page<br />
<br />
<br />
Create a Text widget to display the name of the family<br />
<br />
<br />
[[File:Sirius_6mtuto_54.png]]<br />
<br />
<br />
Add a Begin and a Set to modify the name of the Family. Do same things as previously do for Widget Text.<br />
Add a Conditional Style to check if the family name = null. If it's true put the background color field to red.<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_55.png]]<br />
<br />
<br />
==Widget Reference==<br />
<br />
The Reference widget allow to have a List with 4 defautl button (up, down, add and remove). <br />
Create a Reference widget to display family members<br />
<br />
<br />
[[File:Sirius_6mtuto_56.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_57.png]]<br />
<br />
<br />
==Widget Label==<br />
<br />
Create a label to display the number of person in the familly<br />
<br />
<br />
[[File:Sirius_6mtuto_58.png]]<br />
<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_59.png]]<br />
<br />
<br />
==Widget Button==<br />
<br />
This widget allow to add a button in the properties view.<br />
We will create 2 buttons, one to add Woman to Family and one to add Man to Family.<br />
Create a new Button<br />
<br />
<br />
[[File:Sirius_6mtuto_60.png]]<br />
<br />
<br />
Create a Begin and in, a Create Instance to create a new Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_61.png]]<br />
<br />
<br />
Create a Set, to set name of the new Woman Created<br />
<br />
<br />
[[File:Sirius_6mtuto_62.png]]<br />
<br />
<br />
Do the same thing for button create Man<br />
<br />
<br />
[[File:Sirius_6mtuto_63.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_64.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_46.png&diff=412939File:Sirius 6mtuto 46.png2016-12-16T14:12:56Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412936Sirius/Tutorials/PropertiesViewTutorial2016-12-16T13:49:33Z<p>Julien.dupont.obeo.fr: /* Container */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a select list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Widget Checkbox==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
==Widget List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]<br />
<br />
<br />
=Create a new Group for Family=<br />
<br />
This group allow to display properties view for the root element Family. The user have to click on diagram to activate this properties view.<br />
Before to create the new Group Family it's necessary to create a new Page and named it FamilyPage.<br />
<br />
<br />
[[File:Sirius_6mtuto_50.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_51.png]]<br />
<br />
<br />
Create a new Group for Family<br />
<br />
<br />
[[File:Sirius_6mtuto_52.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_53.png]]<br />
<br />
<br />
Add the Group Family to the Family Page<br />
<br />
<br />
Create a Text widget to display the name of the family<br />
<br />
<br />
[[File:Sirius_6mtuto_54.png]]<br />
<br />
<br />
Add a Begin and a Set to modify the name of the Family. Do same things as previously do for Widget Text.<br />
Add a Conditional Style to check if the family name = null. If it's true put the background color field to red.<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_55.png]]<br />
<br />
<br />
==Widget Reference==<br />
<br />
The Reference widget allow to have a List with 4 defautl button (up, down, add and remove). <br />
Create a Reference widget to display family members<br />
<br />
<br />
[[File:Sirius_6mtuto_56.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_57.png]]<br />
<br />
<br />
==Widget Label==<br />
<br />
Create a label to display the number of person in the familly<br />
<br />
<br />
[[File:Sirius_6mtuto_58.png]]<br />
<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_59.png]]<br />
<br />
<br />
==Widget Button==<br />
<br />
This widget allow to add a button in the properties view.<br />
We will create 2 buttons, one to add Woman to Family and one to add Man to Family.<br />
Create a new Button<br />
<br />
<br />
[[File:Sirius_6mtuto_60.png]]<br />
<br />
<br />
Create a Begin and in, a Create Instance to create a new Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_61.png]]<br />
<br />
<br />
Create a Set, to set name of the new Woman Created<br />
<br />
<br />
[[File:Sirius_6mtuto_62.png]]<br />
<br />
<br />
Do the same thing for button create Man<br />
<br />
<br />
[[File:Sirius_6mtuto_63.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_64.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412935Sirius/Tutorials/PropertiesViewTutorial2016-12-16T13:48:26Z<p>Julien.dupont.obeo.fr: /* Widget Text */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Widget Checkbox==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
==Widget List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]<br />
<br />
<br />
=Create a new Group for Family=<br />
<br />
This group allow to display properties view for the root element Family. The user have to click on diagram to activate this properties view.<br />
Before to create the new Group Family it's necessary to create a new Page and named it FamilyPage.<br />
<br />
<br />
[[File:Sirius_6mtuto_50.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_51.png]]<br />
<br />
<br />
Create a new Group for Family<br />
<br />
<br />
[[File:Sirius_6mtuto_52.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_53.png]]<br />
<br />
<br />
Add the Group Family to the Family Page<br />
<br />
<br />
Create a Text widget to display the name of the family<br />
<br />
<br />
[[File:Sirius_6mtuto_54.png]]<br />
<br />
<br />
Add a Begin and a Set to modify the name of the Family. Do same things as previously do for Widget Text.<br />
Add a Conditional Style to check if the family name = null. If it's true put the background color field to red.<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_55.png]]<br />
<br />
<br />
==Widget Reference==<br />
<br />
The Reference widget allow to have a List with 4 defautl button (up, down, add and remove). <br />
Create a Reference widget to display family members<br />
<br />
<br />
[[File:Sirius_6mtuto_56.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_57.png]]<br />
<br />
<br />
==Widget Label==<br />
<br />
Create a label to display the number of person in the familly<br />
<br />
<br />
[[File:Sirius_6mtuto_58.png]]<br />
<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_59.png]]<br />
<br />
<br />
==Widget Button==<br />
<br />
This widget allow to add a button in the properties view.<br />
We will create 2 buttons, one to add Woman to Family and one to add Man to Family.<br />
Create a new Button<br />
<br />
<br />
[[File:Sirius_6mtuto_60.png]]<br />
<br />
<br />
Create a Begin and in, a Create Instance to create a new Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_61.png]]<br />
<br />
<br />
Create a Set, to set name of the new Woman Created<br />
<br />
<br />
[[File:Sirius_6mtuto_62.png]]<br />
<br />
<br />
Do the same thing for button create Man<br />
<br />
<br />
[[File:Sirius_6mtuto_63.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_64.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412934Sirius/Tutorials/PropertiesViewTutorial2016-12-16T13:47:36Z<p>Julien.dupont.obeo.fr: /* Create a Properties View Description */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Widget Checkbox==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
==Widget List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]<br />
<br />
<br />
=Create a new Group for Family=<br />
<br />
This group allow to display properties view for the root element Family. The user have to click on diagram to activate this properties view.<br />
Before to create the new Group Family it's necessary to create a new Page and named it FamilyPage.<br />
<br />
<br />
[[File:Sirius_6mtuto_50.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_51.png]]<br />
<br />
<br />
Create a new Group for Family<br />
<br />
<br />
[[File:Sirius_6mtuto_52.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_53.png]]<br />
<br />
<br />
Add the Group Family to the Family Page<br />
<br />
<br />
Create a Text widget to display the name of the family<br />
<br />
<br />
[[File:Sirius_6mtuto_54.png]]<br />
<br />
<br />
Add a Begin and a Set to modify the name of the Family. Do same things as previously do for Widget Text.<br />
Add a Conditional Style to check if the family name = null. If it's true put the background color field to red.<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_55.png]]<br />
<br />
<br />
==Widget Reference==<br />
<br />
The Reference widget allow to have a List with 4 defautl button (up, down, add and remove). <br />
Create a Reference widget to display family members<br />
<br />
<br />
[[File:Sirius_6mtuto_56.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_57.png]]<br />
<br />
<br />
==Widget Label==<br />
<br />
Create a label to display the number of person in the familly<br />
<br />
<br />
[[File:Sirius_6mtuto_58.png]]<br />
<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_59.png]]<br />
<br />
<br />
==Widget Button==<br />
<br />
This widget allow to add a button in the properties view.<br />
We will create 2 buttons, one to add Woman to Family and one to add Man to Family.<br />
Create a new Button<br />
<br />
<br />
[[File:Sirius_6mtuto_60.png]]<br />
<br />
<br />
Create a Begin and in, a Create Instance to create a new Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_61.png]]<br />
<br />
<br />
Create a Set, to set name of the new Woman Created<br />
<br />
<br />
[[File:Sirius_6mtuto_62.png]]<br />
<br />
<br />
Do the same thing for button create Man<br />
<br />
<br />
[[File:Sirius_6mtuto_63.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_64.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412933Sirius/Tutorials/PropertiesViewTutorial2016-12-16T13:46:02Z<p>Julien.dupont.obeo.fr: /* Create a new Group for Family */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Widget Checkbox==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
==Widget List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]<br />
<br />
<br />
=Create a new Group for Family=<br />
<br />
This group allow to display properties view for the root element Family. The user have to click on diagram to activate this properties view.<br />
Before to create the new Group Family it's necessary to create a new Page and named it FamilyPage.<br />
<br />
<br />
[[File:Sirius_6mtuto_50.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_51.png]]<br />
<br />
<br />
Create a new Group for Family<br />
<br />
<br />
[[File:Sirius_6mtuto_52.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_53.png]]<br />
<br />
<br />
Add the Group Family to the Family Page<br />
<br />
<br />
Create a Text widget to display the name of the family<br />
<br />
<br />
[[File:Sirius_6mtuto_54.png]]<br />
<br />
<br />
Add a Begin and a Set to modify the name of the Family. Do same things as previously do for Widget Text.<br />
Add a Conditional Style to check if the family name = null. If it's true put the background color field to red.<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_55.png]]<br />
<br />
<br />
==Widget Reference==<br />
<br />
The Reference widget allow to have a List with 4 defautl button (up, down, add and remove). <br />
Create a Reference widget to display family members<br />
<br />
<br />
[[File:Sirius_6mtuto_56.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_57.png]]<br />
<br />
<br />
==Widget Label==<br />
<br />
Create a label to display the number of person in the familly<br />
<br />
<br />
[[File:Sirius_6mtuto_58.png]]<br />
<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_59.png]]<br />
<br />
<br />
==Widget Button==<br />
<br />
This widget allow to add a button in the properties view.<br />
We will create 2 buttons, one to add Woman to Family and one to add Man to Family.<br />
Create a new Button<br />
<br />
<br />
[[File:Sirius_6mtuto_60.png]]<br />
<br />
<br />
Create a Begin and in, a Create Instance to create a new Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_61.png]]<br />
<br />
<br />
Create a Set, to set name of the new Woman Created<br />
<br />
<br />
[[File:Sirius_6mtuto_62.png]]<br />
<br />
<br />
Do the same thing for button create Man<br />
<br />
<br />
[[File:Sirius_6mtuto_63.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_64.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_64.png&diff=412932File:Sirius 6mtuto 64.png2016-12-16T13:45:27Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_63.png&diff=412931File:Sirius 6mtuto 63.png2016-12-16T13:44:06Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_62.png&diff=412930File:Sirius 6mtuto 62.png2016-12-16T13:41:20Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_61.png&diff=412929File:Sirius 6mtuto 61.png2016-12-16T13:39:53Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_60.png&diff=412928File:Sirius 6mtuto 60.png2016-12-16T13:37:47Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_59.png&diff=412927File:Sirius 6mtuto 59.png2016-12-16T13:34:32Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_58.png&diff=412926File:Sirius 6mtuto 58.png2016-12-16T13:32:39Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412925Sirius/Tutorials/PropertiesViewTutorial2016-12-16T13:10:10Z<p>Julien.dupont.obeo.fr: /* Create a new Group for Family */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Widget Checkbox==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
==Widget List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]<br />
<br />
<br />
=Create a new Group for Family=<br />
<br />
This group allow to display properties view for the root element Family. The user have to click on diagram to activate this properties view.<br />
Before to create the new Group Family it's necessary to create a new Page and named it FamilyPage.<br />
<br />
<br />
[[File:Sirius_6mtuto_50.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_51.png]]<br />
<br />
<br />
Create a new Group for Family<br />
<br />
<br />
[[File:Sirius_6mtuto_52.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_53.png]]<br />
<br />
<br />
Add the Group Family to the Family Page<br />
<br />
<br />
Create a Text widget to display the name of the family<br />
<br />
<br />
[[File:Sirius_6mtuto_54.png]]<br />
<br />
<br />
Add a Begin and a Set to modify the name of the Family. Do same things as previously do for Widget Text.<br />
Add a Conditional Style to check if the family name = null. If it's true put the background color field to red.<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_55.png]]<br />
<br />
<br />
==Widget Reference==<br />
<br />
The Reference widget allow to have a List with 4 defautl button (up, down, add and remove). <br />
Create a Reference widget to display family members<br />
<br />
<br />
[[File:Sirius_6mtuto_56.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_57.png]]<br />
<br />
<br />
==Widget Label==</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_57.png&diff=412922File:Sirius 6mtuto 57.png2016-12-16T11:13:59Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_56.png&diff=412921File:Sirius 6mtuto 56.png2016-12-16T11:11:38Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412920Sirius/Tutorials/PropertiesViewTutorial2016-12-16T11:08:28Z<p>Julien.dupont.obeo.fr: /* Add Widgets to the Group Person */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Widget Checkbox==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
==Widget List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]<br />
<br />
<br />
=Create a new Group for Family=<br />
<br />
This group allow to display properties view for the root element Family. The user have to click on diagram to activate this properties view.<br />
Before to create the new Group Family it's necessary to create a new Page and named it FamilyPage.<br />
<br />
<br />
[[File:Sirius_6mtuto_50.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_51.png]]<br />
<br />
<br />
Create a new Group for Family<br />
<br />
<br />
[[File:Sirius_6mtuto_52.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_53.png]]<br />
<br />
<br />
Add the Group Family to the Family Page<br />
<br />
<br />
Create a Text widget to display the name of the family<br />
<br />
<br />
[[File:Sirius_6mtuto_54.png]]<br />
<br />
<br />
Add a Begin and a Set to modify the name of the Family. Do same things as previously do for Widget Text.<br />
Add a Conditional Style to check if the family name = null. If it's true put the background color field to red.<br />
<br />
Expected result<br />
<br />
<br />
[[File:Sirius_6mtuto_55.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_55.png&diff=412919File:Sirius 6mtuto 55.png2016-12-16T11:08:05Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_54.png&diff=412918File:Sirius 6mtuto 54.png2016-12-16T11:02:12Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_53.png&diff=412917File:Sirius 6mtuto 53.png2016-12-16T10:59:37Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_52.png&diff=412916File:Sirius 6mtuto 52.png2016-12-16T10:59:11Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_51.png&diff=412915File:Sirius 6mtuto 51.png2016-12-16T10:56:54Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_50.png&diff=412914File:Sirius 6mtuto 50.png2016-12-16T10:56:28Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412902Sirius/Tutorials/PropertiesViewTutorial2016-12-15T16:53:18Z<p>Julien.dupont.obeo.fr: /* Checkbox List */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Widget Checkbox==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
==Widget List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412901Sirius/Tutorials/PropertiesViewTutorial2016-12-15T16:52:51Z<p>Julien.dupont.obeo.fr: /* Checkbox Widget */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Widget Checkbox==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
==Checkbox List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412900Sirius/Tutorials/PropertiesViewTutorial2016-12-15T16:52:04Z<p>Julien.dupont.obeo.fr: /* Add Widgets to the Group Person */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Checkbox Widget==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
<br />
==Checkbox List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null, the reference parent should be set with same value.<br />
<br />
<br />
[[File:Sirius_6mtuto_46.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_47.png]]<br />
<br />
<br />
Create un Fix and named it ''"Add father to parents"'' and created in a Begin.<br />
In the Begin create a Set<br />
<br />
<br />
[[File:Sirius_6mtuto_48.png]]<br />
<br />
<br />
Create a same thing to check that the mother is set in mother and in parents.<br />
<br />
<br />
[[File:Sirius_6mtuto_49.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_49.png&diff=412898File:Sirius 6mtuto 49.png2016-12-15T16:49:43Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_48.png&diff=412897File:Sirius 6mtuto 48.png2016-12-15T16:46:41Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_47.png&diff=412896File:Sirius 6mtuto 47.png2016-12-15T16:44:06Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412895Sirius/Tutorials/PropertiesViewTutorial2016-12-15T16:32:00Z<p>Julien.dupont.obeo.fr: /* Add Widgets to the Group Person */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Checkbox Widget==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
<br />
==Checkbox List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
The first validation rule check that if the reference father is not null the reference parent should be set with same value.</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=Sirius/Tutorials/PropertiesViewTutorial&diff=412879Sirius/Tutorials/PropertiesViewTutorial2016-12-15T15:14:56Z<p>Julien.dupont.obeo.fr: /* Add Widgets to the Group Person */</p>
<hr />
<div>=Overview=<br />
<br />
This tutorial explains how to create your first properties view with Sirius.<br />
<br />
The instructions start from the result of the Sirius [[Sirius/Tutorials/4MinTutorial | 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. <br />
<br />
[[File:Sirius_4mtuto_01.png]]<br />
<br />
<br />
The advanced modeling tool that you will create is based on the same simple Domain Model which describes basic concepts about families.<br />
<br />
[[File:Sirius_4mtuto_02.png]]<br />
<br />
<br />
'''Note''': If you need to learn how to define such a Domain Model, just follow the [[Sirius/Tutorials/DomainModelTutorial|Domain Model tutorial]]<br />
<br />
'''Note:''' The screenshots have been created with [http://www.obeodesigner.com Obeo Designer 8.1] (based on Sirius 3.1).<br />
<br />
=Install the basic modeling tool=<br />
<br />
If you have followed the [[Sirius/Tutorials/StarterTutorial | Starter Tutorial]] already, you are ready! Directly go to next section: [[#Start_extending_the_basic_modeling_tool |Start extending the basic modeling tool]].<br />
<br />
Otherwise, start by following the instructions to install the sample Domain Model:<br />
* [[Sirius/Tutorials/StarterTutorial#Import_the_projects_containing_the_sample_Domain_Model | Import the projects containing the sample Domain Model]]<br />
* [[Sirius/Tutorials/StarterTutorial#Launch_a_new_runtime_from_your_Eclipse | Launch a new runtime from your Eclipse]]<br />
* [[Sirius/Tutorials/StarterTutorial#Select_the_Sirius_perspective | Select the Sirius perspective]]<br />
* [[Sirius/Tutorials/StarterTutorial#Import_a_sample_model | Import a sample model]]<br />
<br />
<br />
Now, you should have an Eclipse runtime (started from your first Eclipse) with a sample ''Family'' model installed in your workspace.<br />
<br />
[[File:sirius_4mtuto_05-2.png]]<br />
<br />
<br />
Then, install the solution of the ''Starter Tutorial''. It is implemented by a ''Viewpoint Specification Project'' that you need to import into your workspace.<br />
<br />
This project can be easily installed from the provided examples (menu '''File > New > Example...''' : select '''Basic Family Sample Modeler Definition''').<br />
<br />
[[File:Sirius_tuto2_02-04.png]]<br />
<br />
<br />
Once the modeler imported in your workspace, activate the ''persons'' viewpoint by selecting the menu '''Viewpoint Selection'''.<br />
<br />
[[File:sirius_4mtuto_27.png]]<br />
<br />
<br />
You must activate the ''persons'' viewpoint to be able to create the representations which are defined by this viewpoint.<br />
<br />
[[File:sirius_4mtuto_28.png]]<br />
<br />
<br />
Then right-click on the sample model and select the menu '''New Representation / new Persons diagram'''.<br />
<br />
[[File:sirius_4mtuto_29.png]]<br />
<br />
<br />
Sirius should create and open a diagram describing the men and women contained in the sample model.<br />
<br />
[[File:sirius_4mtuto_01.png]]<br />
<br />
=Start create properties view for basic modeling tool=<br />
Let’s start creating your frist properties view.<br />
<br />
In this tutorial, we will create a custom properties view.<br />
<br />
The sample model imported previously will be used to test this editor.<br />
<br />
=Create a Properties View Description=<br />
<br />
The Properties View Description is available from the Viewpoint directory<br />
<br />
<br />
[[File:Sirius_6mtuto_01.png]]<br />
<br />
<br />
The Properties View Description is composed of a Page and a Group.<br />
The page corresponding to the tab of the properties view. The group corresponding to the part in the tab of the properies view.<br />
[[File:Sirius_6mtuto_02.png]]<br />
<br />
By default a Page and a Group is created in the Properties View Description.<br />
In the tab Advanced of the Properties View Description inform the Identifier field<br />
<br />
<br />
[[File:Sirius_6mtuto_03.png]]<br />
<br />
<br />
Inform the fields of the Page<br />
<br />
<br />
[[File:Sirius_6mtuto_04.png]]<br />
<br />
[[File:Sirius_6mtuto_05.png]]<br />
<br />
Inform the fields of the Group<br />
<br />
<br />
[[File:Sirius_6mtuto_06.png]]<br />
<br />
[[File:Sirius_6mtuto_07.png]]<br />
<br />
<br />
=Add Widgets to the Group Person=<br />
<br />
==Widget Text==<br />
<br />
Create a new Text widget in the Group Person to display the name of the persons.<br />
<br />
<br />
[[File:Sirius_6mtuto_08.png]]<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_09.png]]<br />
<br />
<br />
Add a begin in the Widget Text and create a Set to can modify person's name<br />
<br />
<br />
[[File:Sirius_6mtuto_10.png]]<br />
<br />
<br />
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.<br />
Add a Style in the Conditional Style.<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_11.png]]<br />
<br />
<br />
[[File:-File-Sirius_6mtuto_12.png]]<br />
<br />
<br />
The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_13.png]]<br />
<br />
<br />
If you delete the name of "Lea" the field is filled in red<br />
<br />
<br />
[[File:Sirius_6mtuto_14.png]]<br />
<br />
==Container==<br />
<br />
We create a container to display a selection list of father and mother on the same line<br />
<br />
<br />
[[File:Sirius_6mtuto_15.png]]<br />
<br />
<br />
Add a Fill Layout with HORIZONTAL properties check<br />
<br />
<br />
[[File:Sirius_6mtuto_15_1.png]]<br />
<br />
==Widget Select==<br />
<br />
<br />
Create a new Select Widget to allow change relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_16.png]]<br />
<br />
<br />
Create a Begin and add it a Set to enabled to final user to change reference mother from a selection list<br />
<br />
<br />
[[File:Sirius_6mtuto_17.png]]<br />
<br />
<br />
Create a style to change the selection label foreground<br />
<br />
<br />
[[File:Sirius_6mtuto_18.png]]<br />
<br />
<br />
Do the same thing for relation father. The result should be<br />
<br />
<br />
[[File:Sirius_6mtuto_19.png]]<br />
<br />
==Checkbox Widget==<br />
<br />
Create a Container for display properties for children<br />
Add A Fill Layout Horizontal as previously.<br />
<br />
<br />
[[File:Sirius_6mtuto_20.png]]<br />
<br />
<br />
Create in the container a new Checkbox widget<br />
<br />
<br />
[[File:Sirius_6mtuto_21.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_22.png]]<br />
<br />
<br />
Create a Begin and in, an If operation with value "''aql:newValue=false''"<br />
After we use a Switch for the 2 cases Man and Woman<br />
<br />
<br />
[[File:Sirius_6mtuto_23.png]]<br />
<br />
<br />
For each children <br />
<br />
<br />
[[File:Sirius_6mtuto_24.png]]<br />
<br />
<br />
Unset the relation mother<br />
<br />
<br />
[[File:Sirius_6mtuto_25.png]]<br />
<br />
<br />
Do same thing for relation father.<br />
<br />
<br />
Create a Select widget to add potential child to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_26.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_27.png]]<br />
<br />
<br />
Create a Begin and add it a Set Operation<br />
<br />
<br />
[[File:Sirius_6mtuto_28.png]]<br />
<br />
<br />
Result of children container<br />
<br />
<br />
<br />
[[File:Sirius_6mtuto_29.png]]<br />
<br />
<br />
==Checkbox List==<br />
<br />
<br />
Create a List to display children of selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_30.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_31.png]]<br />
<br />
<br />
Create an Action to add a button to the List. This button allow to create a new son to the selected person<br />
<br />
<br />
[[File:Sirius_6mtuto_32.png]]<br />
<br />
<br />
Create a Begin and add a change context to call the service createSon<br />
<br />
<br />
[[File:Sirius_6mtuto_33.png]]<br />
<br />
<br />
Do the same thing for createDaughter<br />
<br />
<br />
[[File:Sirius_6mtuto_34.png]]<br />
<br />
<br />
Create an Action to unset the relation children. <br />
For this case we should manage case for Woman and Man<br />
<br />
<br />
[[File:Sirius_6mtuto_35.png]]<br />
<br />
<br />
[[File:Sirius_6mtuto_36.png]]<br />
<br />
<br />
Do the same thing to unset a son<br />
<br />
<br />
[[File:Sirius_6mtuto_37.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_38.png]]<br />
<br />
<br />
==Widget Label==<br />
<br />
Create a container to display number of sisters and brothers<br />
This container is named ''"Sister&Brother"''<br />
<br />
Create a Label widget to display number of sisters<br />
<br />
<br />
[[File:Sirius_6mtuto_39.png]]<br />
<br />
<br />
Create a style to display the number of sister in gray if number of sister equals 0<br />
<br />
<br />
[[File:Sirius_6mtuto_40.png]]<br />
<br />
<br />
Create a conditional Style to display number of sister in purple if number od sister is greater than 0<br />
<br />
<br />
[[File:Sirius_6mtuto_41.png]]<br />
<br />
<br />
Do the same thing for number of brother<br />
<br />
<br />
[[File:Sirius_6mtuto_42.png]]<br />
<br />
Expected result <br />
<br />
<br />
[[File:Sirius_6mtuto_43.png]]<br />
<br />
<br />
==Widget Radio Button==<br />
<br />
Create a Radio button to display the type (Woman of Man) of the selected person<br />
<br />
<br />
==Group Validation==<br />
<br />
The group validation enabled to define validation rules for properties view<br />
<br />
[[File:Sirius_6mtuto_44.png]]<br />
<br />
<br />
Expected Result<br />
<br />
<br />
[[File:Sirius_6mtuto_45.png]]</div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_45.png&diff=412878File:Sirius 6mtuto 45.png2016-12-15T15:13:07Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_44.png&diff=412877File:Sirius 6mtuto 44.png2016-12-15T15:10:33Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_43.png&diff=412876File:Sirius 6mtuto 43.png2016-12-15T14:51:12Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_42.png&diff=412875File:Sirius 6mtuto 42.png2016-12-15T14:48:31Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_41.png&diff=412874File:Sirius 6mtuto 41.png2016-12-15T14:46:38Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_40.png&diff=412873File:Sirius 6mtuto 40.png2016-12-15T14:41:13Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_39.png&diff=412872File:Sirius 6mtuto 39.png2016-12-15T14:38:35Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_38.png&diff=412871File:Sirius 6mtuto 38.png2016-12-15T14:33:38Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_37.png&diff=412870File:Sirius 6mtuto 37.png2016-12-15T14:30:24Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_36.png&diff=412869File:Sirius 6mtuto 36.png2016-12-15T14:28:28Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_35.png&diff=412868File:Sirius 6mtuto 35.png2016-12-15T14:27:54Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_34.png&diff=412867File:Sirius 6mtuto 34.png2016-12-15T14:23:38Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_33.png&diff=412866File:Sirius 6mtuto 33.png2016-12-15T14:17:46Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_32.png&diff=412865File:Sirius 6mtuto 32.png2016-12-15T14:16:19Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.frhttps://wiki.eclipse.org/index.php?title=File:Sirius_6mtuto_31.png&diff=412861File:Sirius 6mtuto 31.png2016-12-15T11:08:02Z<p>Julien.dupont.obeo.fr: </p>
<hr />
<div></div>Julien.dupont.obeo.fr