Domain Diagram Type II

• Prepare a new actifsource Project named ch.actifsource.tutorial.diagramm.ports as seen in the Actifsource Tutorial Simple Service
• Use the following package structure

• Create a ClassDiagram named Design in the Package generic using the DiagramEditor

• Create the following Classes

  • System Process Port Port_Out

• Insert an Composition between

  • System and Process

  • Process and Port_In

  • Process and Port_Out

• Insert a Association between

  • Port_Out and Port_In

• Adjust the Cardinalities as shown above

• Create a new Resource of type System in the package ch.actifsource.tutorial.diagramm.ports.specific (Right-click on the package and choose New->Resource from the menu)

• Give the name SystemA to the the newly created resource in the New Resource Wizard

We create a new Diagram Type called System in order to define properties of Domain Diagrams of Systems:

• Select the resource System in the package ch.actifsource.tutorial.diagramm.ports.generic and choose New -> Diagram Type from the menu

Define a new Diagram Type

• Enter SystemDiagram as name for the newly created DiagramType in the New DiagramType Wizard

• Make sure that ch.actifsource.tutorial.diagramm.ports.generic.System has (automatically) been chosen as RootClass

We create a new Domain Diagram for the resource SystemA

• Select the resource SystemA and choose New ->Domain Diagram from the menu

• Enter SystemA as the name of the new diagram in the New Domain Diagram Wizard

• Click Finish

Next, we create a shape and a figure for the class Process in order to define how elements of type Process are displayed and handled in the Diagram Editor:

• Open SystemDiagram in the Resource Editor

• Create a statement allowedClass refering to an AllowedClass with class ch.actifsource.tutorial.diagramm.ports.generic.Process

• As paletteEntry choose the type ShowPaletteEntry

• Create a new ClassStyle as style and add a new ModelShape as shape to it

• Choose ProcessShape as name of the new ModelShape

• Create a statement figure that refers to a new ch.actifsource.ui.diagram.figure.CompactFigure

• Choose ProcessFigure as name of the new CompactFigure

• Create a new drawElement and choose the type DrawRectangle from the Type Selection dialog

• Define a fillColor by choosing DarkGray with the help of the Content Assist

• Create a position (x=0, y=0) and a size (width = 100%, height=100%) statement as shown above

We define a childContainer for the ProcessShape

• Create a ChildContainer
• In the newly created ChildContainer define a Point as position with x = 0% and y = 20% (the container should not cover the uppermost rectangular section of the shape)
• Define a Size with width=100% and height=100%

We define the label of a process shape to be the name of the corresponding Process choose the initialization properties of a process shape and define a minimum size of process shapes:

• Create a labelSelector of type FigureEditableLabelSelector (this allows us to edit the name of a Process directly from the Diagram Editor)
• Create a minShapeSize with width = 100 and height = 100 (size in Pixels)
• Create a ShapeInitialization and change its show Part not hide its parts when newly created

We create two Process instances, ProcessA and ProcessB in the Domain Diagram Editor:

• Open the DomainDiagram SystemA in the Diagram Editor
• Select Process from the Palette
• Left-Click in the diagram to open the New Resource Wizard and choose ProcessA as the name of the new Process resource
• Repeat the previous step and choose ProcessB as the name of the second resource

Check and inspect the newly created resources:

• Check that Ctrl+Click on the label of a Process opens the corresponding process in the Resource Editor
• Choose Edit from the Palette and edit the name of a process shape by left-clicking on its label.

Next, we define a shape and figure for Port_Ins:

• Add a new AllowedClass with class Port_In and define a palleteEntry of type ShowPaletteEntry
• Add a statement style and then create a new shape statement refering to a new ModelShape
• Give the name PortInShape to the new resource

• Create a figure of type CompactFigure with the name PortInFigure

• Add a drawElement of type DrawArc to the PortInFigure
• Define the fillColor as White and the lineColor as Black
• Create a position with x=60% and y=0%
• Create a statement size refering to a resource of type Size with width=40% and height=90%
• Define an offset with startArc=90 and endArc=180 (degrees)

• Add a second drawElement of type DrawLine to the PortInFigure
• Create a startPosition with x=30% and y=50%
• Create an endPosition with x=60% and y=50%

• Add a third drawElement of type DrawRecangle to the PortInFigure
• Create a statement position and set x=0% and y=0%
• Create a statement size and set width=40% and height=100%

• Open SystemDiagram in the Resource Editor
• Create a new AllowedClass that refers to the class Port_Out
• Create a new ClassStyle that refers to a new ModelShape. Give the name PortOutShape to the newly created ModelShape.

• Add a CompactFigure with the name PortOutFigure to PortOutShape as shown above

• Add a drawElement of type DrawRecangle to the PortOutFigure
• Create a statement position and set x=0% and y=0%
• Create a statement size and set width=40% and height=100%

• Add a second drawElement of type DrawLine to the PortInFigure
• Create a startPosition with x=30% and y=50%
• Create an endPosition with x=60% and y=50%

• Add a second drawElement of type DrawLine to the PortInFigure
• Create a startPosition with x=30% and y=50%
• Create an endPosition with x=60% and y=50%

• Add a third drawElement of type DrawOval to the PortOutFigure
• Define the fillColor as White and the lineColor as Black
• Define the position with x=60% and y=0%
• Define the size with width=40% and height=100%

We define the position of ports relative to their process shapes and their behavior:

• Create a MovablePortShape in the ProcessShape

• Define an anchorPoint with x=20% and y=0%

• Define a movableRange with a position with x=0% and y=0% and a size with width=100% and height=100% (meaning that a port can be moved to any point on the boundary of the rectangular process shape)

• We do not define an orientation (the shape of a port is thus rotated when moved along the boundary of its parent shape)

We define a selector for all the allowed Port figures:

• Open the SystemDiagram in the Resource Editor and create a ChildFigureSelector as Decorator for portFigureSelector[Port]
• Define the selector Process.port_In union Process.port_Out which selects all ports of type Port_In and Port_Out that belong to a Process

Next, we a PortIn and PortOut to each of our two Processes:

• Open the Domain Diagram SystemA in the Diagram Editor (Note: If the diagram is still open, close it first and then re-open it in order to update the behavior of the diagram)
• Choose Port_In from the Palette and left-click on ProcessA
• Choose the name in_a in the opened New Resource Wizard
• In the same way create a Port*In with name in_b for ProcessB
• Choose Port_Out from the Palette and left-click on ProcessA
• Choose the name out_a in the opened New Resource Wizard
• In the same way create a Port*In with name out_b for ProcessB

• Open the Domain Diagram SystemA in the Diagram Editor and position the newly created ports by selecting them and moving them on the boundary of their process shapes.

Finally, we want to be able to connect outgoing ports Port_Out to ingoing ports Por_In by the relation Port_Out.port_In

• Open the SystemDiagram in the Resource Editor
• In the allowedClass for Port_Out create an allowedRelation of type AllowedDirectRelation and define the selector Port_Out.port_In

We connect out_a with in_b as follows:

• Choose Relation from the Palette
• Click on the port out_a. Then drag the mouse to the port in_b and click on port in_b
• In the same way connect out_b to in_a
• Open and inspect the newly created statements by opening SystemA in the Resource Editor as well:

Next, we want the Process shape to change its color when its parts are hidden:

• Open ProcessFigure in the Resource Editor and add a third drawElement of type DrawRectangle and define the properties size and position as above (Note that you can also simply copy and paste the existing DrawRectangle).
• Define the fillColor as ActifsourceForeground
• Create a condition by using the Content Assist and choosing ShowContainerCondition (i.e., the shape should have the color ActifsourceForeground when its container is not hidden)

Add conditions to figures

• Add a condition HideContainerCondition to the first drawElement of type DrawRectangle of the ProcessFigure (thus, the shape will be DarkGray when its container is hidden).

• Open the Domain Diagram SystemA in the Diagram Editor and righ-click on one of the Process shapes
• Select Show/Hide Resource Part color of the shape changes accordingly

• Open the SystemDiagram in the Resource Editor
• Create a TypeStyle
• Create a NoteStyle for the new TypeStyle
• Choose NoteClipFigure as figure
• Define a labelSelector of type FigureEditableLabelSelector and add the placementSelector NoteItem:NoteItem and the propertySelector NoteItem.nodeText

• Open the Domain Diagram SystemA in the Diagram Editor
• Select New Note from the Palette
• Right-click on the shape ProcessB to place the note

• Select Edit from the Palette
• Right-click on the note and edit the text
• Write a note (such as This shape represents ProcessB)

We add a search function to our Domain Diagrams that allows us to search for all Processes

• Open SystemDiagram in the Resource Editor
• Create a SearchPath in the AllowedClass for class Process and define the selector Process:Process as path

• Close and re-open the Domain Diagram SystemA in the Diagram Editor
• Open the Content Assist in the search field and select ProcessA from the proposals

Finally, we want to display the name of a port as label in the Domain Diagram Editor:

• Open PortOutShape in the Resource Editor
• Use the Content Assist to add a borderShape statement that refers to NameBorderShape

• Open SystemDiagram in the Resource Editor
• Add a FigureLabelSelector with the selector Port_Out.name as Decorator to labelSelector

• Open SystemA in the Diagram Editor
• Check that the name of outgoing ports are now displayed as labels next to their ports
• Try to move and re-position the labels (in the Select Mode)

• We want to specify the behavior of our coummicating processes: ProcessA should be a simple coin machine that is connected to a dispenser ProcessB
• We create an UML State Machine that defines the behavior of ProcessA and link the state machine to our Domain Diagram

First, we make all (built-in) resources needed to build UML diagrams available in our project:

• Right-click on the project ch.actifsource.tutorial.diagramm.ports and choose Properties from the menu
• Select actifsource in the opened Properties dialog and click on Add Builtin
• Select UML from the opened built-in dependency Selection dialog and close both dialogs by clicking OK

We create a ch.actifsource.solution.uml.statediagram.generic.simple.Statemachine called ProcessA_State_Machine as described in Actifsource Tutorial – UML Statemachine in the package ch.actifsource.tutorial.diagramm.ports.specific.

We add a reference to an UML state machine (that describes the behavior of the Process) to Process

• Open Process in the Resource Editor
• Add a UseRelation called statemachine to Process
• Define the range of the relation as ch.actifsource.solution.uml.statediagram.generic.simple.Statemachine

• Open SystemA in the Resource Editor
• Create a statemachine statement that referers to ProcessA_State_Machine to ProcessA

We define an action that is triggered by double-clicking on a process shape in our Domain Diagram and opens the UML state machine associated with the corresponding Process

• Open SystemDiagram in the Resource Editor
• With the help of the Content Assist, add an OpenDiagram_DoubleClickAction to the AllowedClass for the class Process
• Create a DiagramSelectorActionProperty as Decorator for shapeActionProperty and define the selector Process.statemachine.stateDiagram (i.e., the action should open the selected diagram)

• Open the Domain Diagram SystemA in the Diagram Editor
• Double-Click on ProcessA and make sure that the diagram ProcessA_State_Machine is automatically opened in the Diagram Editor