Commit feb4d11e authored by Kai-Holger Brassel's avatar Kai-Holger Brassel
Browse files

Update HTML, but remove PDF from repository, since it a binary file

parent 32c9f80e
......@@ -484,14 +484,14 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>This work by Kai-Holger Brassel, Hamburg, is licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0"">CC BY-NC-ND 4.0</a>
<p>This work by Kai-Holger Brassel, Hamburg, is licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0">CC BY-NC-ND 4.0</a>
<span class="image"><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="cc" width="20"></span>
<span class="image"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="by" width="20"></span>
<span class="image"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="nc" width="20"></span>
<span class="image"><img src="https://mirrors.creativecommons.org/presskit/icons/nd.svg" alt="nd" width="20"></span></p>
</div>
<div class="paragraph">
<p>Version: October 19<sup>th</sup>, 2020.</p>
<p>Version: November 9<sup>th</sup>, 2020.</p>
</div>
</div>
</div>
......@@ -1026,16 +1026,103 @@ It contains links to exhaustive documentation on concept, features and usage of
</ul>
</div>
<div class="paragraph">
<p>For now, you can dismiss the welcome screen. It can be opened anytime by executing <code>Help &#8594; Welcome</code></p>
<p>For now, you can dismiss the welcome screen. It can be opened anytime by executing <code>Help &#8594; Welcome</code>.
Now you should see the initial layout of Eclipse with <em>Model Explorer</em> and <em>Outline</em> on the left and a big empty editing area to the right with a <em>Properties</em> view below.</p>
</div>
</div>
<div class="sect2">
<h3 id="truemodeling-parameter-catalogs-for-simulation-with-ecore"><a class="anchor" href="#truemodeling-parameter-catalogs-for-simulation-with-ecore"></a>Modeling Parameter Catalogs for Simulation with Ecore</h3>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
<p>Now you should see the initial layout of Eclipse with <em>Model Explorer</em> and <em>Outline</em> on the left and a big empty editing area with <em>Properties</em> view below to the right.</p>
<p>There are two hard problems in computer science: cache invalidation, naming things, and off-by-1 errors.</p>
</div>
</blockquote>
<div class="attribution">
&#8212; Phil Karlton / N.N.
</div>
</div>
<div class="paragraph">
<p>Since we will use Ecore diagrams for data modeling, create your first Ecore modeling project now:</p>
<p>It takes time and effort to come along with good names for model entities, projects, files, and so on.
Also, specific naming conventions are in place to enhance readability of models and program code.
Since it is not always clear where names provided during modeling are used later, I compiled a list of names important in Ecore projects and added examples and comments to elucidate their meaning and naming conventions.</p>
</div>
<table class="tableblock frame-all grid-all stretch">
<caption class="title">Table 1. Naming</caption>
<colgroup>
<col style="width: 33.3333%;">
<col style="width: 33.3333%;">
<col style="width: 33.3334%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Name</th>
<th class="tableblock halign-left valign-top">Demo Catalog Example</th>
<th class="tableblock halign-left valign-top">Real World Expample</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Namespace URI</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://example.org/democatalog" class="bare">http://example.org/democatalog</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://hft-stuttgart.de/buildingphysics" class="bare">http://hft-stuttgart.de/buildingphysics</a></p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Namespace Prefix</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">democat</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">buildphys</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Base Package (reverse domain)<sup class="footnote">[<a id="_footnoteref_8" class="footnote" href="#_footnotedef_8" title="View footnote.">8</a>]</sup></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">org.example</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">hft-stuttgart.de</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Main Package</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">democatalog</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">buildingphysics</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Eclipse Project<sup class="footnote">[<a id="_footnoteref_9" class="footnote" href="#_footnotedef_9" title="View footnote.">9</a>]</sup></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">org.example.democatalog</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">de.hft-stuttgart.buildingphysics</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Class Prefix</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Democatalog</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Buildingphysics</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">XML File Suffix</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">democatalog</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">buildingphysics</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Classes</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">e.g. SolarPanel</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">e.g. WindowType</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Attributes</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">e.g. nominalPower</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">e.g. id</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Associations</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">e.g. solarPanels</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">e.g. windowTypes</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>Classes are written in <a href="https://en.wikipedia.org/wiki/Camel_case">Camel case notation</a> starting with an upper case letter. Associations and attributes are written the same way, but starting with a lower case letter.</p>
</div>
<div class="paragraph">
<p>All other names should be derived from the globally unique <em>name space</em> of the project, in our example: <code>example.org/democatalog</code>.
It consists of a global unique domain name and a path to the project, unique within that domain.</p>
</div>
<div class="paragraph">
<p>Use the names of example <em>Demo Catalog</em> to create your first Ecore modeling project:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
......@@ -1043,13 +1130,13 @@ It contains links to exhaustive documentation on concept, features and usage of
<p>Execute <code>File &#8594; New &#8594; Ecore Modeling Project</code> from main menu&#8201;&#8212;&#8201;not <code>Modeling Project</code>!</p>
</li>
<li>
<p>Name it <code>demo.catalog</code> and click <code>Next &gt;</code></p>
<p>Name the project <code>org.example.democatalog</code> and uncheck <code>Use default location</code> so that the new project is <strong>not</strong> stored in workspace but a different directory you create/choose, then click <code>Next &gt;</code></p>
</li>
<li>
<p>Uncheck <code>Use Default Location</code> so that the new project is <strong>not</strong> stored in workspace, but a different directory you create/choose, then click <code>Next &gt;</code></p>
<p>Provide <code>democatalog</code> as main Java package name, uncheck <code>Use default namespace parameter</code> and provide <code><a href="http://example.org/democatalog" class="bare">http://example.org/democatalog</a></code> as <em>Ns URI</em> and <code>democat</code> as <em>Ns prefix</em></p>
</li>
<li>
<p>Provide <code>democatalog</code> as main Java package name and click <code>Finish</code>.</p>
<p>Click <code>Finish</code>.</p>
</li>
</ol>
</div>
......@@ -1149,7 +1236,7 @@ Instead of artificial example classes like <em>Foo</em> and <em>Bar</em> it show
</div>
<div class="imageblock thumb">
<div class="content">
<img src="http://localhost:56397/afx/cache/8068a4d732d1847a062d97696687b38f.png" alt="8068a4d732d1847a062d97696687b38f">
<img src="http://localhost:49441/afx/cache/28c119036261e39473751e5cb111acc9.png" alt="28c119036261e39473751e5cb111acc9">
</div>
<div class="title">Figure 4. Principle Structure of a Parameter Catalog</div>
</div>
......@@ -1174,7 +1261,8 @@ Compositions are depicted as a link with a diamond shape attached to the contain
</td>
<td class="content">
<div class="paragraph">
<p>Note that class names&#8201;&#8212;&#8201;despite the fact that they model a set of similar objects&#8201;&#8212;&#8201;are always written in <em>singular</em>! They are written in <a href="https://en.wikipedia.org/wiki/Camel_case">Camel case notation</a> starting with an upper case letter. Associations and attributes are written the same way, but starting with a lower case letter. Names for list-like associations and attributes usually are written in plural form.</p>
<p>Note that class names&#8201;&#8212;&#8201;despite the fact that they model a set of similar objects&#8201;&#8212;&#8201;are always written in <em>singular</em>!
Names for list-like associations and attributes usually are written in plural form.</p>
</div>
</td>
</tr>
......@@ -1188,7 +1276,8 @@ Instead, we add a <em>super class</em> to define common attributes and associati
</div>
<div class="paragraph">
<p>In our example above, common to all four energy components are attributes <code>modelName</code> and <code>revisionYear</code>, thus these are modeled by class <code>EnergyComponent</code> that is directly or indirectly a super class of <em>Boiler</em>, <em>CombinedHeatPower</em>, <em>SolarPanel</em>, and <em>Inverter</em>.
Similar, <em>Boiler</em> and <em>CombinedHeatPower</em> share attribute <code>installedThermalPower</code> factored out by class <em>ChemicalEnergyDevice</em>.</p>
Similar, <em>Boiler</em> and <em>CombinedHeatPower</em> share attribute <code>installedThermalPower</code> factored out by class <em>ChemicalDevice</em>.
<em>SolarPanel</em> and <em>Inverter</em> share attribute <code>nominalPower</code> modeled in abstract class <em>ElectricalDevice</em>.</p>
</div>
<div class="paragraph">
<div class="title">Associations</div>
......@@ -1407,7 +1496,7 @@ Note that Eclipse synchronizes different editors of the same content automatical
</div>
<div id="fig-example-model" class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/Homework.gif" alt="Homework">
<img src="ParameterCatalogs2Images/Homework.png" alt="Homework">
</div>
<div class="title">Figure 8. Example Model (Homework)</div>
</div>
......@@ -1421,10 +1510,10 @@ I would like to tell you that this is done with just one click but, actually, yo
<p>Make sure all files are saved (<code>File &#8594; Save All</code>)</p>
</li>
<li>
<p>Execute <code>Generate &#8594; Model Code</code> from context menu over <code>democatalog.ecore</code></p>
<p>Execute <code>Generate &#8594; Model Code</code> from the context menu of Ecore editor <code>democatalog</code></p>
</li>
<li>
<p>Execute <code>Generate &#8594; Edit Code</code> from context menu over <code>democatalog.ecore</code></p>
<p>Execute <code>Generate &#8594; Edit Code</code> from the same context menu</p>
</li>
</ol>
</div>
......@@ -1445,7 +1534,7 @@ I would like to tell you that this is done with just one click but, actually, yo
</div>
<div class="paragraph">
<p>This would create code for a simple user interface, but we use more advanced EMF Forms for that later.
If, by mistake, project <code>demo.catalog.editor</code> was created, just delete it from <em>Model Explorer</em> and do not forget to check <code>Delete project contents on disk</code> in confirmation dialog.</p>
If, by mistake, project <code>org.example.democatalog.editor</code> was created, just delete it from <em>Model Explorer</em> and do not forget to check <code>Delete project contents on disk</code> in confirmation dialog.</p>
</div>
</td>
</tr>
......@@ -1460,10 +1549,10 @@ If, by mistake, project <code>demo.catalog.editor</code> was created, just delet
<div class="title">Figure 9. Generated Classes</div>
</div>
<div class="paragraph">
<p><code>Generate &#8594; Model Code</code> creates classes that represent the modeled data in code. These classes are located in three packages under directory <code>src-gen</code> in <code>demo.catalog</code>.</p>
<p><code>Generate &#8594; Model Code</code> creates classes that represent the modeled data in code. These classes are located in three packages under directory <code>src-gen</code> in <code>org.example.democatalog</code>.</p>
</div>
<div class="paragraph">
<p><code>Generate &#8594; Edit Code</code> creates a whole new Eclipse project named <code>demo.catalog.edit</code>, again with generated classes under directory <code>src-gen</code>.</p>
<p><code>Generate &#8594; Edit Code</code> creates a whole new Eclipse project named <code>org.example.democatalog.edit</code>, again with generated classes under directory <code>src-gen</code>.</p>
</div>
<div class="paragraph">
<p>You may have a look at some Java classes for curiosity by double clicking at them in <em>Model Explorer</em>. There is no point in trying to understand the code in detail, but observe token <code>@generated</code> present in the comments of all classes, fields and methods. Classes, fields and methods marked with this token are (re)generated whenever above commands are executed.</p>
......@@ -1495,10 +1584,10 @@ To find out what user interface controls and layouts are provided by this framew
<div class="olist arabic">
<ol class="arabic">
<li>
<p>From context menu over <code>democatalog.ecore</code> execute <code>EMF Forms &#8594; Create View Model Project</code></p>
<p>In the <em>Model Explorer</em> execute <code>EMF Forms &#8594; Create View Model Project</code> from context menu over <code>democatalog.ecore</code></p>
</li>
<li>
<p>Leave project name <code>demo.catalog.viewmodel</code> as is but uncheck <code>Use default location</code>&#8201;&#8212;&#8201;as we always do&#8201;&#8212;&#8201;and browse to the directory containing <code>demo.catalog</code></p>
<p>Leave project name <code>org.example.democatalog.viewmodel</code> as is but uncheck <code>Use default location</code>&#8201;&#8212;&#8201;as we always do&#8201;&#8212;&#8201;and browse to the directory containing <code>org.example.democatalog</code></p>
</li>
<li>
<p>Click <code>Next &gt;</code> and select <code>EnergyComponentsCatalog</code> as data element we want to create a user interface for</p>
......@@ -1509,7 +1598,7 @@ To find out what user interface controls and layouts are provided by this framew
</ol>
</div>
<div class="paragraph">
<p>According to these inputs a new project is created with file <code>EnergyComponentsCatalog.view</code> under directory <code>view models</code>.
<p>According to these inputs a new project is created with file <code>EnergyComponentsCatalog.view</code> under directory <code>viewmodels</code>.
This file opens automatically in a special <em>View Editor</em>.</p>
</div>
<div class="imageblock thumb">
......@@ -1564,7 +1653,7 @@ You can even create new boilers or other objects in lists provided, with all for
</div>
<div class="paragraph">
<p>Of course, such automatic approach has its limits.
In our case, to have a long list of lists is not very user-friendly, because one has to scroll up and down to find a specific list.
In our case, a long list of lists is not very user-friendly, because one has to scroll up and down to find a specific list.
Also, no specific object data are shown in the list and data can only be edited in a pop-up form (no inline editing).</p>
</div>
<div class="paragraph">
......@@ -1716,7 +1805,7 @@ So, saving a form before the focus has shifted from the last edited field won&#8
Alas, instead a list of lists we have got an even bigger list of tables.</p>
</div>
<div class="paragraph">
<p>High time to introduce a master-detail view that presents categories of object types in a master view and, after one is selected, the according object table as detail.</p>
<p>High time to introduce a master-detail view that presents categories of object types in a master view and, after one is selected, the according object table in the detail view.</p>
</div>
<div class="openblock float-group">
<div class="content">
......@@ -1786,8 +1875,8 @@ In fact, this feature gives us a fully functional prototype.
At least during refinement of model and UI, data sets can be created, edited, and tested for usability without the need to built a full blown, deployable application&#8201;&#8212;&#8201;see parts <em>Accessing and Using Parameter Catalogs</em> and <em>Build (Parameter Catalog) Applications with Eclipse Tycho</em> below.</p>
</div>
<div class="paragraph">
<p>Be aware that in some cases the view model must adapt to changes in the data model, e.g. a new leaf category and table component has to be created for a new catalog object type.
Other changes are automatically reflected in the generated UI, at least for default forms and other UI elements.
<p>Be aware that in some cases the view model must adapt to changes in data model, e.g. a new leaf category and table component must be created for a new catalog object type.
Other changes are automatically reflected in the generated UI, at least for default forms and default table columns.
To our convenience, view model specifications incompatible with data model are indicated by error badges in the <em>View Editor</em>.</p>
</div>
<div class="paragraph">
......@@ -1801,15 +1890,15 @@ To our convenience, view model specifications incompatible with data model are i
</div>
<div class="paragraph">
<p>We created a graphical Ecore data model with a catalog class and five classes/types of objects therein.
Classes have been defined by name, attributes, and relations between, often with cardinalities.
Classes have been defined by name, attributes, and relations between them, often with cardinalities.
Whenever classes shared some attributes or references we factored these out into super classes.
An enumeration introduced a new attribute type from a set of named values.</p>
An enumeration introduced a new attribute type as a set of named values.</p>
</div>
<div class="paragraph">
<p>From this data model, we issued commands to create matching Java code for representing the data in memory as well as to store and retrieve them on and from disk. Methods to create, read, update and delete data objects (CRUD) were generated, too.</p>
<p>From this data model, we issued commands to create Java code for representing the data in memory as well as to store and retrieve them on and from disk. Methods to create, read, update and delete data objects (CRUD) were generated, too.</p>
</div>
<div class="paragraph">
<p>Lastly, we thought about a good user interface for this data and used <em>EMF Forms</em> to model and prototype it.</p>
<p>Lastly, we thought about a good user interface for this data and used <em>EMF Forms</em> to model it resulting in a full functional prototype.</p>
</div>
</div>
</div>
......@@ -2077,10 +2166,16 @@ Verify that Maven version 3.6.3 or above is now installed in <code>Window &#8594
<div class="footnote" id="_footnotedef_7">
<a href="#_footnoteref_7">7</a>. Please stay away from version 2020-03 and 2020-06 of Eclipse Modeling Tools, since these came with a bug preventing the user from editing data in table cells within the generated UI.
</div>
<div class="footnote" id="_footnotedef_8">
<a href="#_footnoteref_8">8</a>. <a href="https://en.wikipedia.org/wiki/Reverse_domain_name_notation" class="bare">https://en.wikipedia.org/wiki/Reverse_domain_name_notation</a>
</div>
<div class="footnote" id="_footnotedef_9">
<a href="#_footnoteref_9">9</a>. <a href="https://wiki.eclipse.org/Naming_Conventions#Eclipse_Workspace_Projects" class="bare">https://wiki.eclipse.org/Naming_Conventions#Eclipse_Workspace_Projects</a>
</div>
</div>
<div id="footer">
<div id="footer-text">
Last updated 2020-10-19 09:27:19 +0200
Last updated 2020-11-09 12:04:23 +0100
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css">
......
Markdown is supported
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