simon
/
AToMPM


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
							

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>Overview &mdash; AToMPM 0.6 documentation</title>
    
    <link rel="stylesheet" href="_static/classic.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/mystyle.css" type="text/css" />
    
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    './',
        VERSION:     '0.6',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="_static/jquery.js"></script>
    <script type="text/javascript" src="_static/underscore.js"></script>
    <script type="text/javascript" src="_static/doctools.js"></script>
    <link rel="top" title="AToMPM 0.6 documentation" href="index.html" />
    <link rel="next" title="Creating a Modelling Language" href="new_language.html" />
    <link rel="prev" title="Installation" href="installation.html" /> 
  </head>
  <body role="document">
    <div class="related" role="navigation" aria-label="related navigation">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             accesskey="I">index</a></li>
        <li class="right" >
          <a href="new_language.html" title="Creating a Modelling Language"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="installation.html" title="Installation"
             accesskey="P">previous</a> |</li>
        <li class="nav-item nav-item-0"><a href="index.html">AToMPM 0.6 documentation</a> &raquo;</li> 
      </ul>
    </div>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <div class="section" id="overview">
<span id="id1"></span><h1>Overview<a class="headerlink" href="#overview" title="Permalink to this headline">¶</a></h1>
<p>This section presents an overview of AToMPM&#8217;s user interface: how to create an account, and the different parts of the user interface (toolbars, canvas, and console).</p>
<div class="section" id="first-usage">
<h2>First Usage<a class="headerlink" href="#first-usage" title="Permalink to this headline">¶</a></h2>
<p>When first opening the user interface at <cite>localhost:8124/atompm</cite>, the user is presented with a login screen.</p>
<a class="reference internal image-reference" href="_images/first_login_screen.png"><img alt="_images/first_login_screen.png" src="_images/first_login_screen.png" style="width: 960.5px; height: 518.5px;" /></a>
<p>Click the <em>create one now</em> link, which will allow you to create a new account with a user name and password. Fill out the form and click <em>Create new account</em>.</p>
<a class="reference internal image-reference" href="_images/create_new_account.png"><img alt="_images/create_new_account.png" src="_images/create_new_account.png" style="width: 165.0px; height: 151.5px;" /></a>
<p>AToMPM will initialize the account (by creating a user folder under the <cite>users/</cite> folder) and switch to the main user interface view. When you revisit the AToMPM webpage or create a new AToMPM instance, the tool will remember your username and password and automatically log you in. You can log out by clicking the <em>logout</em> link at the top right of the user interface.</p>
</div>
<div class="section" id="the-atompm-user-interface">
<h2>The AToMPM User Interface<a class="headerlink" href="#the-atompm-user-interface" title="Permalink to this headline">¶</a></h2>
<p>When logged in, the AToMPM user interface is initialized with four button toolbars: <em>MainMenu</em>, <em>CompileMenu</em>, <em>TransformationController</em>, and <em>TransformationEditor</em>. They allow a langugage developer and a language user to perform most activities and are heavily used in the next sections of the documentation.</p>
<a class="reference internal image-reference" href="_images/user_interface.png"><img alt="_images/user_interface.png" src="_images/user_interface.png" style="width: 959.5px; height: 519.5px;" /></a>
<p>The user interface of AToMPM consists of three areas: the <em>toolbar area</em>, contained in the <em>canvas area</em>, and the <em>console</em>. To bring up the console, in Google Chrome press the F12 key. These areas are explained in more details in the next sections.</p>
<div class="section" id="toolbars">
<h3>Toolbars<a class="headerlink" href="#toolbars" title="Permalink to this headline">¶</a></h3>
<p>There are two types of toolbars that can be loaded: button toolbars consist of a number of buttons that each perform a certain action, while formalism toolbars allow to instantiate language elements. A new toolbar can be loaded using the <strong>(re)load a toolbar</strong> button of the <em>MainMenu</em> toolbar. Toolbar models that can be loaded either have the <em>.buttons.model</em> extension (for button toolbars) or the <em>.metamodel</em> extension (for formalism toolbars).</p>
<div class="section" id="button-toolbars">
<h4>Button Toolbars<a class="headerlink" href="#button-toolbars" title="Permalink to this headline">¶</a></h4>
<p>All button toolbar models can be found under the <em>/Toolbars/</em> user folder. A button toolbar consists of a number of buttons that, when clicked, execute a particular action. Four button toolbar are loaded by default, explained below.</p>
<img alt="_images/main_toolbar.png" src="_images/main_toolbar.png" />
<ol class="arabic simple">
<li>Launch a new AToMPM user interface in a new tab.</li>
<li>(Re-)open a button or formalism toolbar.</li>
<li>Close an opened toolbar. If this is a formalism toolbar, the model elements conforming to that formalism are removed from the model.</li>
<li>Create a new formalism under the <em>/Formalisms/</em> user folder with the given name.</li>
<li>Open a model.</li>
<li>Insert the elements of a model into the currently opened model.</li>
<li>Save current model.</li>
<li>Save current model as...</li>
<li>Undo the last performed action.</li>
<li>Redo the last undone action.</li>
<li>Copy the selected elements on canvas.</li>
<li>Paste the copied elements on the canvas (copy/paste also works across AToMPM tabs).</li>
<li>Verify whether the constraints of the current model are satisfied.</li>
<li>Show or hide entities of a particular formalism (but do not remove them from the model).</li>
<li>Open the manual.</li>
</ol>
<p>Most of these actions are intuitive. Others are explained in more detail in the next sections.</p>
<img alt="_images/compilation_toolbar.png" src="_images/compilation_toolbar.png" />
<ol class="arabic simple">
<li>Compile the current model (conforming to the <em>ConcreteSyntax</em> formalism) to a formalism toolbar.</li>
<li>Compile the current model (conforming to the <em>SimpleClassDiagram</em> formalism) to a metamodel.</li>
<li>Compile a metamodel to a pattern metamodel (and associated formalism toolbar(s)), used in model transformation rules.</li>
</ol>
<p>More information on these buttons can be found in <a class="reference internal" href="new_language.html#creating-a-modelling-language"><span class="std std-ref">Creating a Modelling Language</span></a> and <a class="reference internal" href="modelling_transformation.html#modelling-a-model-transformation"><span class="std std-ref">Modelling a Model Transformation</span></a>.</p>
<img alt="_images/transformation_controller.png" src="_images/transformation_controller.png" />
<ol class="arabic simple">
<li>Load a transformation.</li>
<li>Run the currently loaded transformation until the end.</li>
<li>Execute one step of the currently loaded transformation.</li>
<li>Pause the running transformation.</li>
<li>Stop the running transformation.</li>
<li>Enable debugging, which opens a debug window when the transformation is executed that shows the transformation schedule and highlights the currently executing step.</li>
</ol>
<p>More information on these buttons can be found in <a class="reference internal" href="executing_transformation.html#executing-a-model-transformation"><span class="std std-ref">Executing a Model Transformation</span></a>.</p>
<img alt="_images/transformation_editor.png" src="_images/transformation_editor.png" />
<ol class="arabic simple">
<li>Open a rule model.</li>
<li>Open a transformation model.</li>
<li>Open a formalism toolbar of a pattern metamodel.</li>
<li>Create a new transformation model, and open it in a new tab.</li>
<li>Create a new rule model, and open it in a new tab.</li>
</ol>
<p>More information on these buttons can be found in <a class="reference internal" href="modelling_transformation.html#modelling-a-model-transformation"><span class="std std-ref">Modelling a Model Transformation</span></a>.</p>
</div>
<div class="section" id="formalism-toolbars">
<span id="id2"></span><h4>Formalism Toolbars<a class="headerlink" href="#formalism-toolbars" title="Permalink to this headline">¶</a></h4>
<p>Loading a formalism toolbar allows you to create elements on the canvas conforming to that formalism. Multiple formalism toolbars can be loaded, which allows a model to contain elements conforming to multiple formalisms.</p>
<p>As an example, we show the formalism toolbar of the <em>TrafficLight</em> language, which is used throughout the readme as an example.</p>
<img alt="_images/trafficlight_toolbar.png" src="_images/trafficlight_toolbar.png" />
<p>Each button of a formalism toolbar corresponds to an icon in the concrete syntax definition of the formalism. Links are not shown. Clicking a button will select that particular type to be instantiated. Right-clicking on the canvas instantiates the icon on the canvas. More information on how to use a formalism toolbar to model can be found in <a class="reference internal" href="using_language.html#using-a-modelling-language"><span class="std std-ref">Using a Modelling Language</span></a>.</p>
</div>
</div>
<div class="section" id="canvas">
<h3>Canvas<a class="headerlink" href="#canvas" title="Permalink to this headline">¶</a></h3>
<p>Below is a list of various states the Canvas can be in along with lists of actions available in each state and their corresponding shortcut(s).</p>
<p>When in the <strong>DEFAULT</strong> state,</p>
<table border="1" class="table-with-borders docutils">
<colgroup>
<col width="30%" />
<col width="70%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Action</th>
<th class="head">Shortcut(s)</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>Choose an entity type to create</td>
<td>Left-click on desired type from a loaded formalism toolbar.</td>
</tr>
<tr class="row-odd"><td>Create an entity</td>
<td>Right-click anywhere on the canvas.</td>
</tr>
<tr class="row-even"><td>Select an entity</td>
<td>Left-click any entity. This will also select the entity&#8217;s contents, if
any. To select a container without selecting its contents, SHIFT-Left-click
it.</td>
</tr>
<tr class="row-odd"><td>Select one or more entity</td>
<td>Left-press anywhere on Canvas, drag selection box around desired
entity or entities and release.</td>
</tr>
<tr class="row-even"><td>Connect entities</td>
<td>Right-press an entity, drag to-be edge to target entity and release.</td>
</tr>
<tr class="row-odd"><td>Edit icon text</td>
<td>SHIFT-Middle-click any text from any icon on the Canvas (this
will display a very simple text editor).</td>
</tr>
<tr class="row-even"><td>Edit entity</td>
<td>Middle-click or SHIFT-Left-click any entity on the Canvas (this will
display the abstract attribute editor).</td>
</tr>
</tbody>
</table>
<p>When in the <strong>SOMETHING SELECTED</strong> state (<em>i.e.</em>, when one or more entity is selected), <img alt="something_selected" class="inline-image" src="_images/something_selected.png" /></p>
<table border="1" class="table-with-borders docutils">
<colgroup>
<col width="33%" />
<col width="67%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Action</th>
<th class="head">Shortcut(s)</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>Unselect selection</td>
<td>Right-/Left-/Middle-click anywhere on the Canvas, or click ESC.</td>
</tr>
<tr class="row-odd"><td>Move selection</td>
<td>Left-press selection, drag preview overlay to desired position and
release.</td>
</tr>
<tr class="row-even"><td>Delete selection</td>
<td>Press DELETE.</td>
</tr>
<tr class="row-odd"><td>Edit first entity in selection</td>
<td>Click INSERT, or click COMMAND (this will display the abstract attribute
editor).</td>
</tr>
<tr class="row-even"><td>Enter geometry editing mode</td>
<td>Click CTRL (this will display geometry controls).</td>
</tr>
<tr class="row-odd"><td>Enter edge editing mode</td>
<td>Click SHIFT (this will display editable edge control points).</td>
</tr>
<tr class="row-even"><td>Snap selection to nearest grid point</td>
<td>Click TAB.</td>
</tr>
</tbody>
</table>
<p>When in the <strong>DRAGGING SELECTION</strong> state (<em>i.e.</em>, when left-dragging one or more selected entity), <img alt="dragging_selection" class="inline-image" src="_images/dragging_selection.png" /></p>
<table border="1" class="table-with-borders docutils">
<colgroup>
<col width="33%" />
<col width="67%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Action</th>
<th class="head">Shortcut(s)</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>Insert selection into container</td>
<td>Left-release on top of the target entity.</td>
</tr>
<tr class="row-odd"><td>Remove selection from container</td>
<td>Left-release outside of current container. Containment relationships can
also be deleted manually if visible.</td>
</tr>
<tr class="row-even"><td>Confirm motion</td>
<td>Left-release on the Canvas.</td>
</tr>
<tr class="row-odd"><td>Cancel motion</td>
<td>Click ESC.</td>
</tr>
</tbody>
</table>
<p>When in the <strong>DRAWING EDGE</strong> state (<em>i.e.</em>, when dragging to-be edge from source to target entities), <img alt="drawing_edge" class="inline-image" src="_images/drawing_edge.png" /></p>
<table border="1" class="table-with-borders docutils">
<colgroup>
<col width="34%" />
<col width="66%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Action</th>
<th class="head">Shortcut(s)</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>Make current line horizontal/vertical</td>
<td>Click TAB.</td>
</tr>
<tr class="row-odd"><td>Create control point</td>
<td>Left-click anywhere, or click CTRL.</td>
</tr>
<tr class="row-even"><td>Delete last control point</td>
<td>Middle-click anywhere, or click ALT.</td>
</tr>
<tr class="row-odd"><td>Cancel current edge</td>
<td>Left-release anywhere on the Canvas.</td>
</tr>
</tbody>
</table>
<p>When in the <strong>EDGE EDITING</strong> state, <img alt="edge_editing" class="inline-image" src="_images/edge_editing.png" /></p>
<table border="1" class="table-with-borders docutils">
<colgroup>
<col width="34%" />
<col width="66%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Action</th>
<th class="head">Shortcut(s)</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>Move control point</td>
<td>Left-press any control point, drag it to desired position and release.</td>
</tr>
<tr class="row-odd"><td>Vertically/Horizontally align control
point to previous control point</td>
<td>Left-click any control point and click TAB.</td>
</tr>
<tr class="row-even"><td>Clone control point</td>
<td>Right-click any control point.</td>
</tr>
<tr class="row-odd"><td>Delete control point</td>
<td>Middle-click any control point (extremities and the central control
point cannot be removed).</td>
</tr>
</tbody>
</table>
<p>When in the <strong>GEOMETRY EDITING</strong> state, <img alt="geometry_editing" class="inline-image" src="_images/geometry_editing.png" /></p>
<table border="1" class="table-with-borders docutils">
<colgroup>
<col width="34%" />
<col width="66%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Action</th>
<th class="head">Shortcut(s)</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td>Scale</td>
<td>Mouse-wheel up/down on scale icon until preview overlay reaches desired
shape.</td>
</tr>
<tr class="row-odd"><td>Scale vertically only</td>
<td>Mouse-wheel up/down on vertical scale icon until preview overlay reaches
desired shape.</td>
</tr>
<tr class="row-even"><td>Scale horizontally only</td>
<td>Mouse-wheel up/down on horizontal scale icon until preview overlay reaches
desired shape.</td>
</tr>
<tr class="row-odd"><td>Rotate</td>
<td>Mouse-wheel up/down on rotation icon until preview overlay reaches desired
shape.</td>
</tr>
<tr class="row-even"><td>Cancel changes</td>
<td>Right-/Left-/Middle-click anywhere on the Canvas, or click ESC.</td>
</tr>
<tr class="row-odd"><td>Confirm changes</td>
<td>Left-click confirmation icon.</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="console">
<h3>Console<a class="headerlink" href="#console" title="Permalink to this headline">¶</a></h3>
<p>The developer console (press F12 in Chrome/Firefox) contains many useful debugging messages. Especially when <a class="reference internal" href="executing_transformation.html#executing-a-model-transformation"><span class="std std-ref">Executing a Model Transformation</span></a>, the console contains useful information on which rules were executed and whether they failed or succeeded.</p>
<img alt="_images/console.png" src="_images/console.png" />
</div>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper">
  <h3><a href="index.html">Table Of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">Overview</a><ul>
<li><a class="reference internal" href="#first-usage">First Usage</a></li>
<li><a class="reference internal" href="#the-atompm-user-interface">The AToMPM User Interface</a><ul>
<li><a class="reference internal" href="#toolbars">Toolbars</a><ul>
<li><a class="reference internal" href="#button-toolbars">Button Toolbars</a></li>
<li><a class="reference internal" href="#formalism-toolbars">Formalism Toolbars</a></li>
</ul>
</li>
<li><a class="reference internal" href="#canvas">Canvas</a></li>
<li><a class="reference internal" href="#console">Console</a></li>
</ul>
</li>
</ul>
</li>
</ul>

  <h4>Previous topic</h4>
  <p class="topless"><a href="installation.html"
                        title="previous chapter">Installation</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="new_language.html"
                        title="next chapter">Creating a Modelling Language</a></p>
  <div role="note" aria-label="source link">
    <h3>This Page</h3>
    <ul class="this-page-menu">
      <li><a href="_sources/overview.txt"
            rel="nofollow">Show Source</a></li>
    </ul>
   </div>
<div id="searchbox" style="display: none" role="search">
  <h3>Quick search</h3>
    <form class="search" action="search.html" method="get">
      <div><input type="text" name="q" /></div>
      <div><input type="submit" value="Go" /></div>
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related" role="navigation" aria-label="related navigation">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             >index</a></li>
        <li class="right" >
          <a href="new_language.html" title="Creating a Modelling Language"
             >next</a> |</li>
        <li class="right" >
          <a href="installation.html" title="Installation"
             >previous</a> |</li>
        <li class="nav-item nav-item-0"><a href="index.html">AToMPM 0.6 documentation</a> &raquo;</li> 
      </ul>
    </div>
    <div class="footer" role="contentinfo">
        &copy; Copyright 2016, Raphael Mannadiar, Simon Van Mierlo, Huseyin Ergin, Conner Hansen, Eugene Syriani, Jonathan Corley.
      Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.4.5.
    </div>
  </body>
</html>