|
|
| Line 1: |
Line 1: |
| − | =Sirius Advanced Tutorial=
| |
| | | | |
| − | ==Overview==
| |
| − |
| |
| − | This tutorial explains how to use advanced features of Sirius:
| |
| − | * "Edge Creation Tool with preconditions":#Edge_Creation_Tool
| |
| − | * "Reconnect Edge Tool":#Reconnect_Edge_Tool
| |
| − | * "Delete Element Tool":#Delete_Element_Tool
| |
| − | * "Direct Edit Label Tool":#Direct_Edit_Label_Tool
| |
| − | * "SVG images":#SVG
| |
| − | * "Style Customization":#Style_Customization
| |
| − | * "Layers":#Layers
| |
| − | * "Filters":#Filters
| |
| − | * "Validation rules and Quick fixes":#Validation
| |
| − | * "Container with Sub Nodes and Bordered Nodes":#Container
| |
| − | * "Navigation through Double-click":#Double_Click
| |
| − | * "Table":#Table
| |
| − | * "Java Services":#Service
| |
| − |
| |
| − | The instructions will guide you extending the basic modeling tool that is the result of the Sirius "Starter Tutorial":https://wiki.eclipse.org/Sirius/Tutorials/4MinTutorial. This starting modeling tool just allows you to create diagrams which represent Men and Women linked by parental relationships. From this diagram you can also use the palette to create Men. The advanced modeling workbench created with this new tutorial will complete the diagrams with many edition and visualization tools and new kinds of representations.
| |
| − |
| |
| − | These instructions are based on the same simple Domain Model which describes basic concepts about families.
| |
| − |
| |
| − | The modeling workbench created with this tutorial will allow users to visualize the members of a family and their parental relationships on a graphical diagram. It will also provide tools to edit the model from the diagram.
| |
| − |
| |
| − | !https://wiki.eclipse.org/images/1/16/Sirius_4mtuto_01.png]]
| |
| − |
| |
| − | Before starting the tutorial have a look to the "installation procedure":https://github.com/mbats/econfr2015/blob/master/tutorial/Before.html.
| |
| − |
| |
| − |
| |
| − | ==Start the tutorial==
| |
| − |
| |
| − | ===Creation tool===
| |
| − |
| |
| − | The first step of this tutorial consists in completing the basic modeler with a tool to create ''Women'' also.
| |
| − |
| |
| − | Copy and paste the tool ''CreateMan'', then replace Man by ''Woman'':
| |
| − | * in the *Id* of the tool
| |
| − | * in the *Node Mappings* of the tool (use the wizard to select WomanNode)
| |
| − | * in the *Create Instance* operation (under the Begin section)
| |
| − | * in the *Value Expression* of the Set @name@ (under the Create instance)
| |
| − |
| |
| − | [[File:sirius_tuto2_03-01.png]]
| |
| − |
| |
| − | To see the "result":#differences, have a look on the "tag":#tag : @creation@
| |
| − |
| |
| − | ===Edge Creation Tool===
| |
| − |
| |
| − | An ''Edge Creation'' tool allows the user to create relationships directly from the diagram, by using the palette.
| |
| − |
| |
| − | Let's use this tool to allow the user to set the father and the mother of a Person.
| |
| − |
| |
| − | Right click on the ''Section'' and select the menu 'New Element Creation > Edge Creation'
| |
| − |
| |
| − | [[File:sirius_tuto2_04-01.png]]
| |
| − |
| |
| − | Give an Id to this tool (setFather) and associate it to ''fatherEdge'', the ''Edge Mapping'' which defines the father graphical relation.
| |
| − |
| |
| − | [[File:sirius_tuto2_04-02.png]]
| |
| − |
| |
| − | Then define the operations that will be performed by this tool each time the user will click on it. These operations can use four variables that are automatically set by Sirius:
| |
| − | * **source**: the first object on which the user has clicked (the source of the relation he is going to create)
| |
| − | * **target**: the second object on which the user has clicked (the target of the relation he is going to create)
| |
| − | * **sourceView**: the graphical object representing the source
| |
| − | * **targetView**: the graphical object representing the target
| |
| − |
| |
| − | Under the ''Begin'' object, create a ''Change Context'' and set its ''Browse Expression'' to @var:source@ in order to define the execution context of the next operations.
| |
| − |
| |
| − | [[File:sirius_tuto2_04-03.png]]
| |
| − |
| |
| − | [[File:sirius_tuto2_04-04.png]]
| |
| − |
| |
| − | Under the ''Change Context'' create a ''Set'' which will set the ''father'' of the first Person clicked (source) to the second Person clicked (target):
| |
| − | * Feature Name: father
| |
| − | * value Expression: var:target
| |
| − |
| |
| − | [[File:sirius_tuto2_04-05.png]]
| |
| − |
| |
| − | [[File:sirius_tuto2_04-06.png]]
| |
| − |
| |
| − | Save the ''odesign'' file and you will see a new tool ''setFather'' in the palette.
| |
| − |
| |
| − | [[File:sirius_tuto2_04-07.png]]
| |
| − |
| |
| − | ==== Precondition===
| |
| − |
| |
| − | To prevent the user to create a father relationship from a person to itself, or to one of its children, you can add a precondition expression (written in Acceleo 3).
| |
| − |
| |
| − | [[File:sirius_tuto2_04-08.png]]
| |
| − |
| |
| − | This expression uses to new variables:
| |
| − | * **preSource**: the object on which the user has clicked first
| |
| − | * **preTarget**: the object under the cursor
| |
| − |
| |
| − | With this precondition, the tool will prevent the creation of forbidden links by showing a specific icon.
| |
| − |
| |
| − | [[File:sirius_tuto2_04-09.png]]
| |
| − |
| |
| − | Then copy, paste and update this tool to create the ''setMother'' tool.
| |
| − |
| |
| − | ===Reconnect Edge Tool===
| |
| − |
| |
| − | A ''Reconnect Edge'' tool allows the user to change the end of a relationship by moving it directly from the diagram.
| |
| − |
| |
| − | Let's create a ''Reconnect Edge'' tool to change the ''father'' and the ''mother'' of a Person.
| |
| − |
| |
| − | Right click on the ''Section'' and select the menu New Element Edition > Reconnect Edge
| |
| − |
| |
| − | [[File:sirius_tuto2_05-01.png]]
| |
| − |
| |
| − | Associate the ''fatherEdge'' to this reconnect tool.
| |
| − |
| |
| − | [[File:sirius_tuto2_05-02.png]]
| |
| − |
| |
| − | This tool comes with six variables:
| |
| − | * **source**: the object currently attached to the moved end
| |
| − | * **target**: the object going to be attached to the moved end
| |
| − | * **sourceView**: the graphical object representing source
| |
| − | * **targetView**: the graphical object representing target
| |
| − | * **element**: the object attached to the other end
| |
| − | * **elementView**: the graphical object representing element
| |
| − |
| |
| − | Then create a ''Change Context'' and set its expression to ''var:element'' (the person who will change his father)
| |
| − |
| |
| − | Finally, create a ''Set'' to assign the new selected parent (''var:target'') as ''father'' of this person.
| |
| − |
| |
| − | [[File:sirius_tuto2_05-03.png]]
| |
| − |
| |
| − | Copy, paste and update this tool to create a reconnect tool for ''mother'' relationship.
| |
| − |
| |
| − | A Reconnect Edge tool allows the user to change the end of a relationship by moving it directly from the diagram.
| |
| − |
| |
| − | Let's create a reconnect edge tool to change the father and the mother of a person.
| |
| − |
| |
| − | Right click on the Section and select the menu New Element Edition > Reconnect Edge
| |
| − |
| |
| − | [[File:sirius_tuto2_05-01.png]]
| |
| − |
| |
| − | Associate the fatherEdge to this reconnect tool.
| |
| − |
| |
| − | [[File:sirius_tuto2_05-02.png]]
| |
| − |
| |
| − | This tool comes with six variables:
| |
| − | * **source**: the object currently attached to the moved end
| |
| − | * **target**: the object going to be attached to the moved end
| |
| − | * **sourceView**: the graphical object representing source
| |
| − | * **targetView**: the graphical object representing target
| |
| − | * **element**: the object attached to the other end
| |
| − | * **elementView**: the graphical object representing element
| |
| − |
| |
| − | Then create a ''Change Context'' and set its expression to ''var:element'' (the person who will change his father)
| |
| − |
| |
| − | Finally, create a ''Set'' to assign the new selected parent (''var:target'') as ''father'' of this person.
| |
| − |
| |
| − | [[File:sirius_tuto2_05-03.png]]
| |
| − |
| |
| − | Copy, paste and update this tool to create a reconnect tool for ''mother'' relationship.
| |
| − |
| |
| − | ===Delete Element Tool===
| |
| − |
| |
| − | A ''Delete Element'' tool specifies which actions have to be performed when the user hits the delete key on an diagram element.
| |
| − |
| |
| − | It is necessary on elements which deletion can't be interpreted by Sirius (for example edges) or if you need to perform specific actions.
| |
| − |
| |
| − | Let's create a ''Delete Element'' tool to specify what to do when the user deletes a paretal relation.
| |
| − |
| |
| − | Right click on the ''Section'' and select the menu 'New Element Edition > Delete Element'
| |
| − |
| |
| − | [[File:sirius_tuto2_06-01.png]]
| |
| − |
| |
| − | Associate the ''fatherEdge'' to this Delete tool.
| |
| − |
| |
| − | [[File:sirius_tuto2_06-02.png]]
| |
| − |
| |
| − | When deleting an edge, the variable **element** refers to the source of the relationship.
| |
| − |
| |
| − | So, create a ''Change Context'' and set its expression to @var:element@ (the person which is the children). Then create a ''Unset'' on the feature ''father'' to remove this relation.
| |
| − |
| |
| − | [[File:sirius_tuto2_06-03.png]]
| |
| − |
| |
| − | Copy, paste and update this tool to create a delete tool for ''mother'' relationship.
| |
| − |
| |
| − | ====Direct Edit Label Tool===
| |
| − |
| |
| − | A ''Direct Edit Label'' specifies how to interpret the modification of graphical object's label in order to modify the model.
| |
| − |
| |
| − | Let's create a ''Direct Edit Label'' to change the name of a Person directly from the diagram.
| |
| − |
| |
| − | Right click on the ''Section'' and select the menu 'New Element Edition > Direct Edit Label'
| |
| − |
| |
| − | [[File:sirius_tuto2_07-01.png]]
| |
| − |
| |
| − | Associate this tool to the objects which have a name: ''ManNode'' and ''WomanNode''
| |
| − |
| |
| − | [[File:sirius_tuto2_07-02.png]]
| |
| − |
| |
| − | This tool comes with a mask that creates variables depending on the label's value. By default, the mask is set to @{0}@, which means that the variable named ''0'' will contain the full value of the label.
| |
| − |
| |
| − | Create a ''Set'' to indicate the feature of the edited object that will be modified (name) and the value to assign (var:0).
| |
| − |
| |
| − | [[File:sirius_tuto2_07-03.png]]
| |
| − |
| |
| − | ===SVG===
| |
| − |
| |
| − | Sirius supports SVG images to improve the quality of the diagrams.
| |
| − |
| |
| − | Because the current designer uses PNG images, resizing a Man or Woman on a diagram causes the pixelation of images.
| |
| − |
| |
| − | [[File:sirius_tuto2_08-01.png]]
| |
| − |
| |
| − | There is ''man.svg'' and ''woman.svg'' in the ''icons'' folder.
| |
| − |
| |
| − | [[File:sirius_tuto2_08-02.png]]
| |
| − |
| |
| − | In the ''Workspace Path'' property of the ''Workspace Images'' associated to ''ManNode'' and ''WomanNode'', replace the PNG images by these SVG images.
| |
| − |
| |
| − | [[File:sirius_tuto2_08-03.png]]
| |
| − |
| |
| − | Finally, set a predefined size to adapt the SVG image to the same size than the 32x32 PNG image (here enter @4@).
| |
| − |
| |
| − | [[File:sirius_tuto2_08-04.png]]
| |
| − |
| |
| − | Close and re-open the diagram to allow Sirius to take the modification into account: now the images are no more pixelated.
| |
| − |
| |
| − | [[File:sirius_tuto2_08-05.png]]
| |
| − |
| |
| − | ===Style Customization===
| |
| − |
| |
| − | Style Customizations change graphical properties of diagram elements (color, label, size, ...) depending on conditions.
| |
| − | For example, let's change the label of a Person depending on the number of its children:
| |
| − | * Person without children => color label in gray
| |
| − | * Person having more than one children => set label size to 12
| |
| − | * Person having grandchildren => prefix label with ''Grandpa'' or ''Grandma''
| |
| − |
| |
| − | Right click on the ''Default Layer'' and select the menu ''New Customization > Style Customizations''. It will group all the different customizations.
| |
| − |
| |
| − | [[File:sirius_tuto2_09-01.png]]
| |
| − |
| |
| − | Right click on the ''Style Customizations'' and select the menu ''New Customization > Style Customization'' to create the first customization.
| |
| − |
| |
| − | [[File:sirius_tuto2_09-02.png]]
| |
| − |
| |
| − | Enter the Acceleo3 expression associated to this customization:
| |
| − | @[children->size()=0/]@
| |
| − |
| |
| − | Then define the graphical properties that will change if the condition is met.
| |
| − |
| |
| − | Right click on the ''Style Customization'' and select the menu ''New Customization''. To change the label color, create a ''Property Customization (by selection)''.
| |
| − |
| |
| − | [[File:sirius_tuto2_09-03.png]]
| |
| − |
| |
| − | On this ''Property Customization'', select the two Workspace Images for the ''Applied On'' field (they hold the label to change), enter ''labelColor'' in the Property Name field, then select the ''gray'' color.
| |
| − |
| |
| − | Note that you can use the automatic-completion to select the applicable property.
| |
| − |
| |
| − | [[File:sirius_tuto2_09-04.png]]
| |
| − |
| |
| − | Create a second ''Style Customizations'' with the condition:
| |
| − | @[children->size()>1/]@
| |
| − | and add a ''Style Customization (by expression)'' to set the ''labelSize'' to @12@.
| |
| − |
| |
| − | [[File:sirius_tuto2_09-05.png]]
| |
| − |
| |
| − | Finally, create a third ''Style Customizations'' with the condition:
| |
| − | @[children.children->size()>0/]@
| |
| − |
| |
| − | Add a ''Style Customization (by expression)'' for the ''Workspace Image'' corresponding to the Man, enter the property name ''labelExpression'' and the expression @['Grandpa '+name/]@ (to prefix the person name with ''Grandpa'').
| |
| − |
| |
| − | [[File:sirius_tuto2_09-06.png]]
| |
| − |
| |
| − | Do the same with the Woman image and the expression @['Grandma '+name/]@.
| |
| − |
| |
| − | Save the ''odesign'' file and see the result on the diagram.
| |
| − |
| |
| − | [[File:sirius_tuto2_09-07.png]]
| |
| − |
| |
| − | ===Layers===
| |
| − |
| |
| − | With Sirius it is possible to allocate specific graphical elements to layers that can be activated/deactivated on demand by the user.
| |
| − |
| |
| − | Let's create two layers: one for the Men and one for the Women.
| |
| − |
| |
| − | Right click on ''Persons diagram'' and select the menu ''New Diagram Element > Additional Layer''.
| |
| − |
| |
| − | [[File:sirius_tuto2_10-03.png]]
| |
| − |
| |
| − | Call this ''Layer'' @Men@ and check the option ''Active by default''.
| |
| − |
| |
| − | [[File:sirius_tuto2_10-02.png]]
| |
| − |
| |
| − | Create a ''Section'' in this layer then drag and drop all the elements related to the Man type into this layer.
| |
| − |
| |
| − | [[File:sirius_tuto2_10-01.png]]
| |
| − |
| |
| − | Create a second ''Layer'' @Women@ and drag and drop all the elements related to the Woman type.
| |
| − |
| |
| − | Re-open the sample diagram. You can see the two optional layers Men and Women (selected by default).
| |
| − |
| |
| − | [[File:sirius_tuto2_10-04.png]]
| |
| − |
| |
| − | If you de-activate the ''Men'' layer, only women remain on the diagram. Note that the tools related to men have been hidden too.
| |
| − |
| |
| − | [[File:sirius_tuto2_10-05.png]]
| |
| − |
| |
| − | ===Filters===
| |
| − |
| |
| − | With ''Filters'', Sirius provides an additional mechanism to automatically show or hide elements of a diagram: a condition determines which elements remain visible.
| |
| − |
| |
| − | Let's create a ''Filter'' to hide Persons without children.
| |
| − |
| |
| − | Right click on ''Persons diagram'' and select the menu ''New Filter > Composite Filter''.
| |
| − |
| |
| − | [[File:sirius_tuto2_11-01.png]]
| |
| − |
| |
| − | Set the ''id'' to @childrenFilter@.
| |
| − |
| |
| − | Then create a ''Mapping Filter''.
| |
| − |
| |
| − | [[File:sirius_tuto2_11-02.png]]
| |
| − |
| |
| − | Associate ''ManNode'' and ''WomanNode'' to this filter and define the ''Semantic Condition Expression'' : @[children->size()>0/]@
| |
| − |
| |
| − | [[File:sirius_tuto2_11-03.png]]
| |
| − |
| |
| − | On the diagram, you can now select the filter ''childrenFilter'' and see that only persons with children remain visible.
| |
| − |
| |
| − | [[File:sirius_tuto2_11-04.png]]
| |
| − |
| |
| − | ===Validation Rules and Quick Fixes===
| |
| − |
| |
| − | Validation rules allow the user to evaluate the quality of a model.
| |
| − |
| |
| − | For example, despite the precondition we have created on the edge creation tool, users can still create circular parental relations between two persons by using the Properties View.
| |
| − |
| |
| − | Let's create a ''Validation Rule'' to detect this problem.
| |
| − |
| |
| − | Right click on ''Persons diagram'' and select the menu ''New Validation > Validation''.
| |
| − |
| |
| − | [[File:sirius_tuto2_12-01.png]]
| |
| − |
| |
| − | Set the name 'FamilyValidation' to this ''Validation''. Then create a ''Semantic Validation Rule''.
| |
| − |
| |
| − | [[File:sirius_tuto2_12-02.png]]
| |
| − |
| |
| − | Set the properties of this rule:
| |
| − | * *Level*: @Error@
| |
| − | * *Target Class*: @basicfamily.Person@
| |
| − | * *Message*: @['Children of '+name+' should not include his father ('+father.name+')'/]@
| |
| − |
| |
| − | [[File:sirius_tuto2_12-03.png]]
| |
| − |
| |
| − | Then create an ''Audit'' (a condition corresponding to this rule) with the expression @[not children->includes(father)/]@.
| |
| − |
| |
| − | [[File:sirius_tuto2_12-04.png]]
| |
| − |
| |
| − | To test this rule, introduce an error in the model with the ''Property View'': set the father of a Man to its son.
| |
| − |
| |
| − | [[File:sirius_tuto2_12-05.png]]
| |
| − |
| |
| − | Then right-click on the diagram and select the menu ''Validate diagram''.
| |
| − |
| |
| − | [[File:sirius_tuto2_12-06.png]]
| |
| − |
| |
| − | The circular father relationship is detected and a decorator (corresponding to the rule level) is displayed on the persons with this problem. A tootip contains the error message.
| |
| − |
| |
| − | [[File:sirius_tuto2_12-07.png]]
| |
| − |
| |
| − | ==== Fix====
| |
| − |
| |
| − | ''Fixes'' can be provided to the user for solving the problem automatically.
| |
| − |
| |
| − | For example, we can propose to unset one of the two ''father'' relations.
| |
| − |
| |
| − | Right-click on the ''Rule'' and select the menu 'New > Fix'.
| |
| − |
| |
| − | [[File:sirius_tuto2_13-01.png]]
| |
| − |
| |
| − | Set the ''name'' @Unset father@ to this ''Fix'' and create a ''Begin''. Then create a ''Unset'' and enter @father@ in the ''Feature name''.
| |
| − |
| |
| − | [[File:sirius_tuto2_13-02.png]]
| |
| − |
| |
| − | If you open the ''Problems View'', you can right-click on one of the errors and select the menu ''Quick Fix''.
| |
| − |
| |
| − | [[File:sirius_tuto2_13-03.png]]
| |
| − |
| |
| − | A dialog opens which proposes the available fixes.
| |
| − |
| |
| − | [[File:sirius_tuto2_13-04.png]]
| |
| − |
| |
| − | Select ''Unset father'' and click on ''Finish'': the father of the selected person is automatically unset and the problem is solved.
| |
| − |
| |
| − | [[File:sirius_tuto2_13-05.png]]
| |
| − |
| |
| − | === Object-Centered Diagram===
| |
| − |
| |
| − | The ''Persons diagram'' is a representation related to the whole model: it displays all the members of the family. This is the reason why it belongs to the Family instance, as you can see in the Model Explorer.
| |
| − |
| |
| − | [[File:sirius_tuto2_14-01.png]]
| |
| − |
| |
| − | With Sirius, you can create a representation on any instance of the model. For example, let's create a person-centered diagram to show only the relationships of a given person.
| |
| − |
| |
| − | Right-click on the ''persons'' viewpoint and select the menu 'New Representation > Diagram Description'.
| |
| − |
| |
| − | [[File:sirius_tuto2_14-02.png]]
| |
| − |
| |
| − | Set these properties to this representation:
| |
| − | * **Name**: @Relationships diagram@
| |
| − | * **Domain Class**: @basicfamily.Person@
| |
| − |
| |
| − | [[File:sirius_tuto2_14-03.png]]
| |
| − |
| |
| − | In the ''Advanced'' tab, set the **Title Expression** to @['Relations of '+name/]@ in order to customize the name of the diagram with the person's name.
| |
| − |
| |
| − | [[File:sirius_tuto2_14-04.png]]
| |
| − |
| |
| − | Add a ''Default Layer'' to this diagram and save the ''odesign'' file. Now, you can right click on a person in the ''Model Explorer'' and create a new representation of type ''Relationships diagram''.
| |
| − |
| |
| − | [[File:sirius_tuto2_14-05.png]]
| |
| − |
| |
| − | The result is a blank diagram, since we have not yet specified its content.
| |
| − |
| |
| − | ====Container====
| |
| − |
| |
| − | A ''Container'' is a kind of diagram element that can contain other diagram elements.
| |
| − |
| |
| − | On the ''Relationships diagram'', let's use two containers to represent:
| |
| − | * The current person (who owns the diagram) with:
| |
| − | ** each children in a list
| |
| − | ** its parents as border nodes
| |
| − | * The siblings of the current person:
| |
| − | ** each sibling in a list
| |
| − |
| |
| − | Right-click on the ''Layer'' and select the menu 'New Diagram Element > Container'.
| |
| − |
| |
| − | [[File:sirius_tuto2_15-01.png]]
| |
| − |
| |
| − | For this first container, set these properties:
| |
| − | * *Name*: @Person Container@
| |
| − | * *Domain Class*: @basicfamily.Person@
| |
| − | * *Semantic Candidate Expression*: @var:self@ (the current person)
| |
| − | * *Children Presentation*: @List@
| |
| − |
| |
| − | [[File:sirius_tuto2_15-02.png]]
| |
| − |
| |
| − | To define the graphical rendering of this container, right-click on it and select the menu 'New Style > Gradient'.
| |
| − |
| |
| − | [[File:sirius_tuto2_15-03.png]]
| |
| − |
| |
| − | On this style, set these properties:
| |
| − | * Label Tab:
| |
| − | ** *Label Size*: @12@
| |
| − | ** *Label Format*: @bold@
| |
| − |
| |
| − | [[File:sirius_tuto2_15-04.png]]
| |
| − |
| |
| − | * Color Tab:
| |
| − | ** *Foreground Color*: @light_green@
| |
| − |
| |
| − | [[File:sirius_tuto2_15-05.png]]
| |
| − |
| |
| − | Save the ''odesign'' file and you see a green container appear on the diagram that you have created for a person.
| |
| − |
| |
| − | [[File:sirius_tuto2_15-06.png]]
| |
| − |
| |
| − | ==== Sub Nodes====
| |
| − |
| |
| − | Now, to display children inside this container, right-click on the container definition and click on the menu 'New Diagram Element > Sub Node'.
| |
| − |
| |
| − | [[File:sirius_tuto2_16-01.png]]
| |
| − |
| |
| − | On the ''Sub Node'' set these properties:
| |
| − | * *Id*: @ChildrenNode@
| |
| − | * *Domain Class*: @basicfamily.Person@
| |
| − | * *Semantic Candidate Expression*: @feature:children@
| |
| − |
| |
| − | [[File:sirius_tuto2_16-02.png]]
| |
| − |
| |
| − | Then create a style. Note that the kind of style is not important here: for elements in a list, the style is used only to specify the label.
| |
| − |
| |
| − | [[File:sirius_tuto2_16-03.png]]
| |
| − |
| |
| − | Save the ''odesign'' file, and now you can see the children listed inside the container.
| |
| − |
| |
| − | [[File:sirius_tuto2_16-04.png]]
| |
| − |
| |
| − | Copy paste ''PersonContainer'' to create the container for siblings.
| |
| − |
| |
| − | Change these properties on this new container description:
| |
| − | * Container > *Name*: @SiblingsContainer@
| |
| − | * Gradient > *Label Size*: @10@
| |
| − | * Gradient > *Label Expression*: @Siblings@
| |
| − | * Gradient > *Foreground Color*: @light_yellow@
| |
| − |
| |
| − | And these properties on the ''Sub Node'':
| |
| − | * *Id*: @Sibling Node@
| |
| − | * *Semantic Candidates Expression*: @[parents.children->excluding(self)/]@
| |
| − |
| |
| − | [[File:sirius_tuto2_16-05.png]]
| |
| − |
| |
| − | Save the ''odesign'' file, and now you can see the siblings listed inside a second container.
| |
| − |
| |
| − | [[File:sirius_tuto2_16-06.png]]
| |
| − |
| |
| − | ==== Border Node====
| |
| − |
| |
| − | Now let's add ''Border Nodes'' to the first container to display the parents of the current person.
| |
| − |
| |
| − | Right-click on ''PersonContainer'' and select the menu 'New Diagram Element > Border Node':
| |
| − |
| |
| − | [[File:sirius_tuto2_17-01.png]]
| |
| − |
| |
| − | Set these properties to the border node:
| |
| − | * *Id*: @ParentNode@
| |
| − | * *Domain Class*: @basicfamily.Person@
| |
| − | * *Semantic Candidate Expression*: @feature:parents@
| |
| − |
| |
| − | [[File:sirius_tuto2_17-02.png]]
| |
| − |
| |
| − | Add a ''Square'' as style, and set these properties:
| |
| − | * *Label Position*: @Node@
| |
| − | * *Color*: @white@
| |
| − |
| |
| − | Save the ''odesign'' file, and now you can see the parents attached on the border of the first container:
| |
| − |
| |
| − | [[File:sirius_tuto2_17-03.png]]
| |
| − |
| |
| − | ==== Edge between containers====
| |
| − |
| |
| − | Like nodes, ''Containers'' can be linked with ''Edges''.
| |
| − |
| |
| − | Right-click on the ''Default'' container and select the menu 'New Diagram Element > Relation Based Edge'.
| |
| − |
| |
| − | [[File:sirius_tuto2_18-01.png]]
| |
| − |
| |
| − | Set these properties to the edge:
| |
| − |
| |
| − | * *Id*: @SiblingsEdge@
| |
| − | * *Source Mapping*: @PersonContainer@
| |
| − | * *Target Mapping*: @SiblingsContainer@
| |
| − | * *Target Finder Expression*: @var:self@ (the second container represents the current person also)
| |
| − |
| |
| − | [[File:sirius_tuto2_18-02.png]]
| |
| − |
| |
| − | On the style of the edge (automatically created), you can specify the end's decorators.
| |
| − |
| |
| − | [[File:sirius_tuto2_18-03.png]]
| |
| − |
| |
| − | Save the ''odesign'' file, and now you can see a link between the two containers.
| |
| − |
| |
| − | [[File:sirius_tuto2_18-04.png]]
| |
| − |
| |
| − | ===Double-click===
| |
| − |
| |
| − | Now we can create a specific diagram for each person. To facilitate the navigation between all these diagrams, let's create a ''Double Click'' tool that allows the user to navigate from any person on a diagram to its dedicated diagram.
| |
| − |
| |
| − | Go back to the first diagram, right click on the ''Section'' in the first ''Layer'' and select the menu 'New Element Edition > Double Click'.
| |
| − |
| |
| − | [[File:sirius_tuto2_19-01.png]]
| |
| − |
| |
| − | On the *Mappings* property of the ''Double Click'' select all the elements of the modeling tool that represent a ''Person'' (except the two containers, since it doesn't make sense to navigate to the current diagram).
| |
| − |
| |
| − | [[File:sirius_tuto2_19-02.png]]
| |
| − |
| |
| − | To specify the action of the ''Double Click'', right-click on the ''Begin'' and select the menu 'New Operation > Navigation'.
| |
| − |
| |
| − | [[File:sirius_tuto2_19-03.png]]
| |
| − |
| |
| − | Then set these properties to the ''Navigation'' :
| |
| − | * *Diagram Description*: @Relationships diagram@
| |
| − | * *Creae if not Existent*: @true@
| |
| − |
| |
| − | [[File:sirius_tuto2_19-04.png]]
| |
| − |
| |
| − | Save the ''odesign'' file, close and reopen your diagrams. Now you can double-click on persons to open their corresponding ''Relationships diagram''. If this diagram has not been created yet, Sirius will propose to create it.
| |
| − |
| |
| − | [[File:sirius_tuto2_19-05.png]]
| |
| − |
| |
| − | ===Table===
| |
| − |
| |
| − | With Sirius it is also possible to represent model elements with a ''Table''.
| |
| − |
| |
| − | Let's create a table that lists all the persons, with this information for each:
| |
| − | * father's name
| |
| − | * mother's name
| |
| − | * number of children
| |
| − |
| |
| − | Right-click on the ''Viewpoint'' and select the menu @New representation > Edition Table Description@.
| |
| − |
| |
| − | [[File:sirius_tuto2_20-01.png]]
| |
| − |
| |
| − | Set these properties to the table:
| |
| − | * ''Id'': @Persons table@
| |
| − | * ''Domain Class'': @basicfamily.Family@
| |
| − |
| |
| − | [[File:sirius_tuto2_20-02.png]]
| |
| − |
| |
| − | In this table, you need lines to represent the persons. So, right-click on the ''Table'' and select the menu 'New Table Element > Line'.
| |
| − |
| |
| − | [[File:sirius_tuto2_20-03.png]]
| |
| − |
| |
| − | Set these properties to the line:
| |
| − | * ''Id'': @PersonLine@
| |
| − | * ''Domain Class'': @basicfamily.Person@
| |
| − | * ''Header Label Expression'' (tab ''Label''): @feature:name@
| |
| − |
| |
| − | [[File:sirius_tuto2_20-04.png]]
| |
| − |
| |
| − | Save the ''odesign'' file then right-click on the ''Family'' instance in the ''Model Browser'' and click on the menu 'New Representation. You can see a new menu 'new Persons table'.
| |
| − |
| |
| − | [[File:sirius_tuto2_20-05.png]]
| |
| − |
| |
| − | If you select this menu, Sirius creates and opens a table with all the family's members.
| |
| − |
| |
| − | [[File:sirius_tuto2_20-06.png]]
| |
| − |
| |
| − | Now, let's add columns to this table to display more information for each person. So, right-click on the ''Table'' and select the menu 'New Table Element > Feature Column'.
| |
| − |
| |
| − | [[File:sirius_tuto2_20-07.png]]
| |
| − |
| |
| − | Set these properties to the column:
| |
| − | * ''Id'': @fatherCol@
| |
| − | * ''Feature Name'': @father@
| |
| − |
| |
| − | [[File:sirius_tuto2_20-08.png]]
| |
| − |
| |
| − | Select the ''Label'' tab and set these properties:
| |
| − | * ''Header Label Expression'': @Father@
| |
| − | * ''label Expression'': @[if father.oclIsUndefined() then '' else father.name endif/]@
| |
| − |
| |
| − | [[File:sirius_tuto2_20-09.png]]
| |
| − |
| |
| − | Copy and paste 'fatherCol' then rename @father@ by @mother@ in all the properties.
| |
| − |
| |
| − | [[File:sirius_tuto2_20-10.png]]
| |
| − |
| |
| − | Save the ''odesign'' file and see the two new columns.
| |
| − |
| |
| − | [[File:sirius_tuto2_20-11.png]]
| |
| − |
| |
| − | Finally, add a new ''Feature Column'' to display the number of children.
| |
| − |
| |
| − | Set these properties to the column:
| |
| − | * ''Id'': @childrenCol@
| |
| − | * ''Feature Name'': @children@
| |
| − |
| |
| − | [[File:sirius_tuto2_20-12.png]]
| |
| − |
| |
| − | Select the ''Label'' tab and set these properties:
| |
| − | * ''Header Label Expression'': @Children@
| |
| − | * ''label Expression'': @[children->size()/]@
| |
| − |
| |
| − | [[File:sirius_tuto2_20-13.png]]
| |
| − |
| |
| − | Save the ''odesign'' file and see the third column.
| |
| − |
| |
| − | [[File:sirius_tuto2_20-14.png]]
| |
| − |
| |
| − | ===Java Services===
| |
| − |
| |
| − | When ''Acceleo 3'' expressions become complex, you should write ''Java Services'' instead.
| |
| − |
| |
| − | For example, let's create a ''Java Service'' to compute the number of cousins and display this information in the table.
| |
| − |
| |
| − | Open the ''Java Class'' named @FamilyServices@ in your ''Viewpoint Specification Project'' (which contains the ''odesign'' file). Have a look to the method named @getCousinsNumber@.
| |
| − |
| |
| − | [[File:sirius_tuto2_21-01.png]]
| |
| − |
| |
| − | You can use the code below to complete this class:
| |
| − |
| |
| − | <pre>
| |
| − | package org.eclipse.sirius.sample.basicfamily.design;
| |
| − |
| |
| − | import java.util.ArrayList;
| |
| − | import java.util.List;
| |
| − |
| |
| − | import org.eclipse.sirius.sample.basicfamily.Person;
| |
| − |
| |
| − | public class FamilyServices {
| |
| − |
| |
| − | public int getCousinsNumber(Person person) {
| |
| − | List<Person> cousins=new ArrayList<Person>();
| |
| − | List<Person> parents=person.getParents();
| |
| − |
| |
| − | for (Person parent: parents) {
| |
| − | for (Person grandParent: parent.getParents()) {
| |
| − | for (Person uncleOrAunt: grandParent.getChildren()) {
| |
| − | if (!parents.contains(uncleOrAunt)) {
| |
| − | for (Person cousin:uncleOrAunt.getChildren()) {
| |
| − | if (!cousins.contains(cousin))
| |
| − | cousins.add(cousin);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | return cousins.size();
| |
| − | }
| |
| − | }
| |
| − | </pre>
| |
| − |
| |
| − | To be able to use the Java methods as ''Services'', the class must be declared in the ''odesign'' file.
| |
| − |
| |
| − | Right-click on the ''Viewpoint'' then select the menu @New Extension > Java Extension@.
| |
| − |
| |
| − | [[File:sirius_tuto2_21-02.png]]
| |
| − |
| |
| − | Then, set the ''Qualified Class Name'' property to @org.eclipse.sirius.sample.basicfamily.services.FamilyServices@.
| |
| − |
| |
| − | To use the service ''getCousinsNumber'' in the table, create a new ''Feature Column'' named @cousinsCol@ and invoke the service in the expression (@service:getCousinsNumber@).
| |
| − |
| |
| − | [[File:sirius_tuto2_21-04.png]]
| |
| − |
| |
| − | With Sirius 2.0, Java services can't be tested from the same runtime: you need to launch a **new runtime**.
| |
| − |
| |
| − | Create and launch a new ''Run Configuration'' of type ''Eclipse Application'' and set the arguments @-XX:MaxPermSize=256m@.
| |
| − |
| |
| − | [[File:sirius_tuto2_21-05.png]]
| |
| − |
| |
| − | In the new runtime, import the ''basicfamily.sample'' project and create a diagram and a table on Family.
| |
| − |
| |
| − | In this table, you can see a new column ''Cousins'' containing the number of cousins for each person (0). Use the diagram to create more persons such as some of them have cousins: Sirius will automatically update the number of cousins in the table.
| |
| − |
| |
| − | [[File:sirius_tuto2_21-06.png]]
| |
