Skip to content
Snippets Groups Projects
Commit be189229 authored by Saad bin Abid's avatar Saad bin Abid
Browse files

layout fixed for component_architecture.html 

Issue-Ref: 4007
Issue-Url: https://af3-developer.fortiss.org/issues/4007



Signed-off-by: default avatarSaad bin Abid <abid@fortiss.org>
parent cb61d717
No related branches found
No related tags found
1 merge request!31Task 4006 online help content
Hide whitespace changes
Inline Side-by-side
org.fortiss.af3.rcp.help/html/ModandSim/component_architecture.html
+ 113
− 103
View file @ be189229
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--
Documentation of Creating a Component Architecture.
@author becker
@ConQAT.Rating GREEN Hash: 589F754EB8ACFD8E12013E9DBE185BCA
-->
<!-- Documentation of MIRA - Model-based Integrated Requirements. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../layout/stylesheet.css">
<title>Creating a Component Architecture using AutoFOCUS3 (AF3)</title>
</head>
<body>
<h2><u><font color="#336699">Creating a Component Architecture</font></u></h2>
<body>
<div class="header">
<div class="box">
<div class="navbar">
<!--a href="https://www.fortiss.org/" align="left">
<img src="fortiss-logo.png" width="90px" height="20px" align="left">
</a-->
<div class="dropdown">
<button class="btn" id="hamburger">
<label for="hamburger" class="hamburger">
<span class="hamburgerLine"></span>
<span class="hamburgerLine"></span>
<span class="hamburgerLine"></span>
</label>
</button>
<div class="dropdown-content">
<a href="../getting_started.html"> Main Page</a>
<a href="../requirements/MIRA.requirements.html">Requirements Engineering</a>
<a href="#">Deployment and Code Generation</a>
<a href="#">Design Space Exploration (DSE)</a>
<a href="#">Assurance Case Modeling</a>
<a href="#">Further Resources</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Modeling and Simulation <i class="triangle"></i></button>
<div class="dropdown-content">
<a href="model_element_attributes.html">Introduction to Graphical Modeling Interface</a>
<a href="data_dictionary.html">Data Dictionary: Types and Functions</a>
<a href="code_specification.html">Behavior Modeling -> Code Specifications</a>
<a href="state_automaton.html">Behavior Modeling -> State Automata</a>
<a href="hierarchical_state_automaton.html">Behavior Modeling -> Hierarchical State Automata</a>
<a href="mode_automaton.html">Behavior Modeling -> Mode Automata</a>
<a href="simulation_with_af3.html">Simulation -> Simulation</a>
<a href="operatorpanels.html">Simulation -> Operator Panels</a>
<a href="operatorpanels_advanced.html">Simulation -> Advanced interface</a>
<a href="cosimulation_with_af3.html">Simulation -> Co-Simulation and FMI Support</a>
<a href="refactoring.html">Refactoring</a>
<a href="model_markers_view.html">On-the-fly Checks</a>
</div>
</div>
<div class="topnav-right">
<a href="mailto:af_user@lists.fortiss.org?subject=Reporting 'component_architecture.html' Documentation Problem!&body= Dear Af3 team, I am reporting an issue related to 'modelling and simulation'.
{Please specify the problem precisely here.}.">Report a Problem?</a>
</div>
</div>
</head>
</div>
</div>
<div class="box">
<h4><font color="#336699">Introduction</font></h4>
<h2>Creating a Component Architecture</h2>
To create a component architecture inside an empty new project, open the context menu of the project and select <i>Component Architecture</i>.
<p>Following sub-sections discuss the creation of <i>Component Architecture</i></p>
<br><br>
<img src="./pictures/components_new-architecture.png">
<br><br>
<h3>Introduction</h3>
In the same way, you can add more component architectures to your project.
<p> Create a component architecture inside an empty new project, open the context menu of the project and select <i>Component Architecture</i>.</p>
<h4><font color="#336699">Modeling a Component Architecture</font></h4>
<img src="./pictures/components_new-architecture.png">
Once you have created a component architecture, you can specify the contained components as well as channels between them.
<p>In the same way, you can add more component architectures to your project.</p>
To add a component, drag &amp; drop a component from the <i>Model Elements</i> view on the right side to your diagram. In the same way, you can add Input or Output-Ports to your components.
<h3>Modeling a Component Architecture</h3>
<br><br>
<p>Once you have created a component architecture, you can specify the contained components as well as channels between them. To add a component, drag &amp; drop a component from the <i>Model Elements</i> view on the right side to your diagram. In the same way, you can add Input or Output-Ports to your components.</p>
<img src="./pictures/components_add-component.png">
<br><br>
To move a component, just pick the component somewhere in the middle and move.
To resize a component, pick it in the lower right corner and move the mouse to resize.
<br><br>
<p> move a component, just pick the component somewhere in the middle and move. To resize a component, pick it in the lower right corner and move the mouse to resize. Channels can be created by dragging from one port to the other.
When starting the drag, potential target ports are highlighted with green color, while unavailable or incompatible ones are marked red. Channels will only be created when dropping over compatible ports.</p>
Channels can be created by dragging from one port to the other.
When starting the drag, potential target ports are highlighted with green color, while unavailable or incompatible ones are marked red.
Channels will only be created when dropping over compatible ports.
<br><br>
<img src="./pictures/components_channels.png">
<br><br>
To support the drag &amp; drop actions the interactive areas around elements can be displayed via the respective option in the editor's context menu:
<p>To support the drag &amp; drop actions the interactive areas around elements can be displayed via the respective option in the editor's context menu:</p>
<br><br>
<img src="./pictures/components_interactive-area-shading.png">
<br><br>
These are the areas within which an element can be dragged. Where areas are overlapping, the action applies to the topmost element.
<br><br>
<p>These are the areas within which an element can be dragged. Where areas are overlapping, the action applies to the topmost element. Notice that Input-Ports of Sub-Components have a different color than Input-Ports of the Parent-Component.
This is, because from the inner point of view, the Input-Ports of the Parent-Component are sending (delegating) data. Hence, these Input-Ports are black (like the Output-Ports of Sub-Components).</p>
Notice that Input-Ports of Sub-Components have a different color than Input-Ports of the Parent-Component.
This is, because from the inner point of view, the Input-Ports of the Parent-Component are sending (delegating) data.
Hence, these Input-Ports are black (like the Output-Ports of Sub-Components).
<br><br>
<img src="./pictures/components_ports.png">
<br><br>
The shape and route of channels can be modified by adding and moving bend points.
<p>The shape and route of channels can be modified by adding and moving bend points.
Bend points can be added by clicking on a point along the channel while pressing the <b>&lt;ctrl&gt;-key</b>.
The bend points can then be moved by dragging &amp; dropping the red squares around them.
To remove a bend point, right-click on it while pressing the <b>&lt;ctrl&gt;-key</b>.
To remove a bend point, right-click on it while pressing the <b>&lt;ctrl&gt;-key</b>.</p>
<br><br>
<img src="./pictures/components_bend-points.png">
<br><br>
In the <i>Properties View</i>, you can edit the names of selected components, channels and ports. You can also specify comments.
<p>In the <i>Properties View</i>, you can edit the names of selected components, channels and ports. You can also specify comments.</p>
<br><br>
<img src="./pictures/components_properties.png" height="500" width="900">
<br><br>
<img src="./pictures/components_properties.png" height="500" width="900">
<h4><font color="#336699">Causality</font></h4>
<h3>Causality</h3>
Each component is declared to be <i>weakly causal</i> or <i>strongly causal</i>.
<p>Each component is declared to be <i>weakly causal</i> or <i>strongly causal</i>.
Weak causality models instantaneous reaction, while strong causality models a delayed reaction.
This means that in a weak causal component a value arrived at an Input-Port is directly accessible in the same time step,
whereas in a strongly causal component such an input value is accessible only at the next time step.
This indicates that for a strongly causal component, there is a delay of at least one time step before input has any effect on output.
<br><br>
This indicates that for a strongly causal component, there is a delay of at least one time step before input has any effect on output.</p>
If you add a component, it is per default weakly causal. You can change the causality in the Properties-View of a component.
<p>If you add a component, it is per default weakly causal. You can change the causality in the Properties-View of a component.</p>
<br><br>
<img src="./pictures/components_causality.png">
<br><br>
The color of a component indicates its causality. There is also a difference in the colors of composite components and atomic components.
However the causality of a composite component depends on its sub-components, therefore composite components all have the same color.
<p>The color of a component indicates its causality. There is also a difference in the colors of composite components and atomic components.
However the causality of a composite component depends on its sub-components, therefore composite components all have the same color.</p>
<h4><font color="#336699">Causality and Cycles</font></h4>
<h3>Causality and Cycles</h3>
Cycles which contain only weakly causal components can entail infinitely many system state modifications at once:
<p>Cycles which contain only weakly causal components can entail infinitely many system state modifications at once:
one component of the cycle makes a change, which triggers <i>immediately</i> (due to weak causality)
a change in the next component, which also immediately triggers a change in the next component, etc.
Since we have a cycle, these changes will at one point reach the first component,
......@@ -111,76 +128,66 @@ thus yielding an infinite loop of changes.
This can be the source of many theoretical and practical problems, therefore,
to avoid this, AF3 only allows cycles which contain <i>at least one strongly causal component:</i>
this way, the infinite loop of changes cannot occur during a single time unit,
but instead spreads on several time instants.
but instead spreads on several time instants.</p>
<p>
When a cycle does not have this property, one gets the error "Component ... is part of a weakly causal cycle":
When a cycle does not have this property, one gets the error "Component ... is part of a weakly causal cycle":</p>
<br><br>
<img src="./pictures/components_decorations_weak-cycle.png">
<br><br>
If it is indeed a property of the model to have such a cycle then one has no other choice than modifying
<p> If it is indeed a property of the model to have such a cycle then one has no other choice than modifying
the design of the model so as to satisfy the strong-causal-cycle requirements.
However, most of the time, the error happens in the process of building a model, when the components are not marked yet
as strongly causal, or when they are composite components whose (not yet provided) implementation is intended to be
made only of strongly causal components.
In such cases one can either accept the error until one provides a strongly-causal implementation, or fix the error
by just marking (at least) one of the components among the path as strongly causal:
made only of strongly causal components. </p>
<p>In such cases one can either accept the error until one provides a strongly-causal implementation, or fix the error
by just marking (at least) one of the components among the path as strongly causal:</p>
<br><br>
<img src="./pictures/components_decorations_strong-cycle.png">
<br><br>
<h4><font color="#336699">Initial Message</font></h4>
<h3>Initial Message</h3>
The field initial message provides the first message delivered by the port.
If a port is of type array, it can be initialized by the expression "[value_0, value_1, ..., value_N]".
If a port is of type structure, it can be initialized by the expression "{MEMBER_x:value_x, MEMBER_y:value_y, ..., MEMBER_z:value_z}".
<p> The field initial message provides the first message delivered by the port.
If a port is of type array, it can be initialized by the expression "<tt>[value_0, value_1, ..., value_N]</tt>".
If a port is of type structure, it can be initialized by the expression "<tt>{MEMBER_x:value_x, MEMBER_y:value_y, ..., MEMBER_z:value_z}</tt>". </p>
<h4><font color="#336699">Propagate Data</font></h4>
<h3>Propagate Data</h3>
AutoFOCUS provides some mechanisms to make development easier and faster.
<p> AutoFOCUS provides some mechanisms to make development easier and faster.
For instance, if you have already connected two Ports by a Channel and want subsequently change the type of the Ports,
you have to do this only at one of the both connected Ports.
Instead of doing the same at the other Port again, you should use the <i>backward</i> and <i>forward</i> buttons in the Properties-View of a Port.
<br><br>
Instead of doing the same at the other Port again, you should use the <i>backward</i> and <i>forward</i> buttons in the Properties-View of a Port.</p>
<i>Forward</i> copies the Port-Settings (Name, Type and initial message) to all Ports connected by an outgoing channel.<br>
<i>Backward</i> copies the Port-Settings to all Ports connected by an incoming channel.<br>
<br><br>
<img src="./pictures/components_propagation.png" height="400" width="950">
<br><br>
In the shown example the settings of the selected Output-Port are propagated to the connected Input-Port. Also the channel is renamed by this.
<p> In the shown example the settings of the selected Output-Port are propagated to the connected Input-Port. Also the channel is renamed by this.</p>
<h4><font color="#336699">Behavior</font></h4>
In order to specify the behavior of your components, you might add either <a href="code_specification.html"><i>Code Specifications</i></a> or <a href="state_automaton.html"><i>Automaton Specifications</i></a> to these.
<h3>Behavior</h3>
<br><br>
<p> In order to specify the behavior of your components, you might add either <a href="code_specification.html"><i>Code Specifications</i></a> or <a href="state_automaton.html"><i>Automaton Specifications</i></a> to these.</p>
<h4><font color="#336699">Selecting Multiple Elements</font></h4>
<h3>Selecting Multiple Elements</h3>
Multiple elements of a component architecture can be selected by pressing the <b>&lt;ctrl&gt;-key</b> while selecting components:
<br><br>
<img src="./pictures/components_multi-select.png">
<h4><font color="#336699">Copy &amp; Paste Components</font></h4>
<h3>Copy &amp; Paste Components</h3>
Components can be copied and pasted via the respective entry in the context menu of the model navigator:
<br><br>
<p> Components can be copied and pasted via the respective entry in the context menu of the model navigator:</p>
<img src="./pictures/components_copy-paste.png">
<h4><font color="#336699">Moving Ports</font></h4>
<h3>Moving Ports</h3>
Ports attached to components can be manually moved by
<p> Ports attached to components can be manually moved by</p>
<ol>
<li>
clicking on the port first to select it and<br>
......@@ -189,25 +196,28 @@ Ports attached to components can be manually moved by
<li>dragging and dropping it at any point along the component's border.</li>
</ol>
<h4><font color="#336699">Zoom</font></h4>
<h3>Zoom</h3>
<p>
Rolling the mouse wheel while hovering over the component architecture editor and holding the <b>&lt;ctrl&gt;-key</b> zooms in or out, allowing the inspection parts of the model in detail or providing an overview over large models.
<br><br>
</p>
<img src="./pictures/components_zoom.png" height="350" width="1050">
<h4><font color="#336699">Auto-Layout</font></h4>
<h3>Auto-Layout</h3>
<p>
A component architecture can be automatically organized using the <i>Auto-Layout</i> feature found in the conext menu of the respective architecture in the model viewer:
<br><br>
</p>
<img src="./pictures/components_auto-layout_context-menu.png">
<br><br>
The components of the architecture are then automatically reorganized like so:
<br><br>
<p> The components of the architecture are then automatically reorganized like so: </p>
<img src="./pictures/components_auto-layout_architecture.png" height="350" width="1150">
</div>
<script src="../layout/jsscript/topBtn.js">
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment