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

Major rewrite

* Changes in "Setup Obeo Designer"
(was "Setup Eclipse Modeling Tools")
* "Making an Application to Create and Edit Data"
replaces "Generation and Tweaking of User Interface"
since we abandoned the EMF Forms framework for
UI generation in favour of Eclipse Sirius.
* "Working with Git Hosted Parameter Catalogs"
replaces "Add Units to the Mix"
parent f091d2ff
Pipeline #4813 passed with stage
in 14 seconds
......@@ -10,9 +10,9 @@ image:https://mirrors.creativecommons.org/presskit/icons/by.svg[by,20]
image:https://mirrors.creativecommons.org/presskit/icons/nc.svg[nc,20]
image:https://mirrors.creativecommons.org/presskit/icons/nd.svg[nd,20]
Non-final version: August 1^st^, 2021.
Non-final version: September 7^st^, 2021.
Go to link:ParameterCatalogs.pdf[PDF-Version as of April 20^th^, 2021]
Go to link:ParameterCatalogs.pdf[PDF-Version as of September 7^th^, 2021]
include::ParameterCatalogs1Overview.adoc[]
......
......@@ -456,11 +456,10 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
<li><a href="#truehow-to-implement-parameter-catalogs-with-eclipse">How to Implement Parameter Catalogs with Eclipse</a>
<ul class="sectlevel2">
<li><a href="#trueeclipse-basics">Eclipse Basics</a></li>
<li><a href="#truesetup-eclipse-modeling-tools">Setup Eclipse Modeling Tools</a></li>
<li><a href="#truemodeling-parameter-catalogs-for-simulation-with-ecore">Modeling Parameter Catalogs for Simulation with Ecore</a></li>
<li><a href="#truegeneration-of-java-code-from-data-model">Generation of Java Code from Data Model</a></li>
<li><a href="#truegeneration-and-tweaking-of-user-interface">Generation and Tweaking of User Interface</a></li>
<li><a href="#trueadd-units-to-the-mix">Add Units to the Mix</a></li>
<li><a href="#truesetup-obeo-designer">Setup Obeo Designer</a></li>
<li><a href="#trueexercise-modeling-a-parameter-catalog-with-ecore">Exercise: Modeling a Parameter Catalog with Ecore</a></li>
<li><a href="#truemaking-an-application-to-create-and-edit-data">Making an Application to Create and Edit Data</a></li>
<li><a href="#trueworking-with-git-hosted-parameter-catalogs">Working with Git Hosted Parameter Catalogs</a></li>
<li><a href="#truesummary">Summary</a></li>
</ul>
</li>
......@@ -493,10 +492,10 @@ body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-b
<span class="image"><img src="https://mirrors.creativecommons.org/presskit/icons/nd.svg" alt="nd" width="20"></span></p>
</div>
<div class="paragraph">
<p>Non-final version: August 1<sup>st</sup>, 2021.</p>
<p>Non-final version: September 7<sup>st</sup>, 2021.</p>
</div>
<div class="paragraph">
<p>Go to <a href="ParameterCatalogs.pdf">PDF-Version as of April 20<sup>th</sup>, 2021</a></p>
<p>Go to <a href="ParameterCatalogs.pdf">PDF-Version as of September 7<sup>th</sup>, 2021</a></p>
</div>
</div>
</div>
......@@ -709,7 +708,7 @@ It uses four technologies to replace manual coding by code generation from model
<p><em>Ecore</em> to model the catalog&#8217;s data and generate Java classes and persistence layer from it.</p>
</li>
<li>
<p><em>EMF Forms</em> for modeling and generating tables, forms and buttons to <strong>c</strong>reate, <strong>r</strong>ead, <strong>u</strong>pdate, and <strong>d</strong>elete data (CRUD).</p>
<p><em>Eclipse Sirius</em> for modeling and generating tables, forms and buttons to <strong>c</strong>reate, <strong>r</strong>ead, <strong>u</strong>pdate, and <strong>d</strong>elete data (CRUD).</p>
</li>
<li>
<p><em>E4</em>, the Eclipse way of modeling the application user interface itself, e.g. the placement and behavior of views, editors, toolbars, menus, and more.</p>
......@@ -748,20 +747,20 @@ E.g., a user could drag an electric system component from a catalog onto an INSE
<p>IDE support for important general purpose languages like Java, <a href="https://marketplace.eclipse.org/content/pydev-python-ide-eclipse">Python</a>, Ruby, C, Fortran, C++</p>
</li>
<li>
<p>Support for creating textual and graphical DSLs (<a href="https://www.eclipse.org/Xtext">XText</a>, <a href="https://www.eclipse.org/sirius">Sirius</a>)</p>
</li>
<li>
<p>Industry proven DSLs and code generators for data models and form based UIs via the <a href="https://www.eclipse.org/modeling/emf"><em>Eclipse Modeling Framework</em></a> (EMF) providing:</p>
<p>Industry proven DSLs and code generators for data models and UIs based on the <a href="https://www.eclipse.org/modeling/emf"><em>Eclipse Modeling Framework</em></a> (EMF):</p>
<div class="ulist">
<ul>
<li>
<p><a href="https://www.eclipse.org/ecoretools"><em>Ecore</em></a> for model driven generation of Java classes and persistence layers for XML or data bases</p>
</li>
<li>
<p><a href="https://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements"><em>EMF Forms</em></a> for describing and generating form based UIs</p>
<p><a href="https://www.eclipse.org/sirius/"><em>Eclipse Sirius</em></a> for describing and generating graphical and form based UIs</p>
</li>
<li>
<p><a href="https://www.eclipse.org/Xtext">XText</a>: Support for creating textual DSLs.</p>
</li>
<li>
<p>Mechanisms to adapt or extend data models and forms to special needs (e.g., we added quantities&#8201;&#8212;&#8201;that is numbers <em>with units</em>&#8201;&#8212;&#8201;to Ecore and EMF Forms, a feature very important for parameter catalogs)</p>
<p>Mechanisms to adapt or extend data models and forms to specific needs (e.g., we added quantities&#8201;&#8212;&#8201;that is numbers <em>with units</em>&#8201;&#8212;&#8201;to Ecore, a feature very important for parameter catalogs)</p>
</li>
</ul>
</div>
......@@ -780,7 +779,7 @@ E.g., a user could drag an electric system component from a catalog onto an INSE
<p>GIS: storage, processing, and visualization of geographical data (list of projects under the umbrella <a href="https://projects.eclipse.org/projects/locationtech">LocationTech</a>, e.g. user-friendly desktop internet GIS <a href="http://udig.refractions.net">uDig</a>)</p>
</li>
<li>
<p>workbench for traffic simulation (<a href="https://www.eclipse.org/sumo">SUMO</a>)</p>
<p>traffic simulation (<a href="https://www.eclipse.org/sumo">SUMO</a>)</p>
</li>
<li>
<p>spatial multi-agent-simulation (<a href="https://gama-platform.github.io/wiki/Home">GAMA-Platform</a>)</p>
......@@ -838,8 +837,8 @@ Eclipse RCP is foundation of a plethora of general-purpose applications, too.</p
<div class="title">Eclipse Packages</div>
<p>An Eclipse package is an Eclipse distribution dedicated to a specific type of task.<sup class="footnote">[<a id="_footnoteref_3" class="footnote" href="#_footnotedef_3" title="View footnote.">3</a>]</sup>
A list of packages is available at <a href="https://www.eclipse.org/downloads/packages/">eclipse.org</a>.
Beside others it contains <em>Eclipse IDE for Java Developers</em>, <em>Eclipse IDE for Scientific Computing</em>, and the package we will use: <em>Eclipse Modeling Tools</em>.
Note that third parties offer many other packages, e.g. <em>GAMA</em> for multi-agent-simulation or <em>Obeo Designer Community</em> for creating Sirius diagram editors.</p>
Beside others it contains <em>Eclipse IDE for Java Developers</em>, <em>Eclipse IDE for Scientific Computing</em>, and <em>Eclipse Modeling Tools</em>.
Note that third parties offer many other packages, e.g. <em>GAMA</em> for multi-agent-simulation or <em>Obeo Designer Community</em> for creating diagram and form editors. This is the package we will use later.</p>
</div>
<div class="admonitionblock note">
<table>
......@@ -952,13 +951,11 @@ That way, we can follow the convention that local Git repositories should all be
</div>
</div>
<div class="sect2">
<h3 id="truesetup-eclipse-modeling-tools"><a class="anchor" href="#truesetup-eclipse-modeling-tools"></a>Setup Eclipse Modeling Tools</h3>
<h3 id="truesetup-obeo-designer"><a class="anchor" href="#truesetup-obeo-designer"></a>Setup Obeo Designer</h3>
<div class="paragraph">
<div class="title">Install Java</div>
<p>Eclipse runs on 64-bit versions of Windows, Linux, and macOS and requires an according Java Development Kit (JDK), version 11 or higher, to be installed on your machine.
Even if such JDK already exists, please download OpenJDK, version <strong>16</strong> or newer for your operating system from <a href="https://adoptopenjdk.net">AdoptOpenJDK</a>.
<sup class="footnote">[<a id="_footnoteref_6" class="footnote" href="#_footnotedef_6" title="View footnote.">6</a>]</sup>
Choose <code>HotSpot</code> as Java Virtual Machine.
Even if such JDK is already installed on your machine, please download the OpenJDK version <strong>16</strong> or newer for your operating system from <a href="https://adoptium.net">Adoptium</a>.
Installation process is straight forward, but you can also find links to exhaustive instructions for your operating system.</p>
</div>
<div class="paragraph">
......@@ -969,21 +966,28 @@ However, actual version 16 conforms to the latest security measures built into m
<p>Note that different versions of Java coexist peacefully.</p>
</div>
<div class="paragraph">
<div class="title">Install Eclipse Modeling Tools</div>
<p>Now its time to download and install the correct Eclipse package <em>Eclipse Modeling Tools</em>, version 2021-06 or newer.
Please go to <a href="https://www.eclipse.org/downloads/packages">Eclipse download page for packages</a>.
On this page you may see <em>"Try the Eclipse Installer"</em> or similar.
Do <strong>not</strong> follow this advice, since we want more control over what versions of Java and Eclipse shall be installed.
Instead, look for package <em>Eclipse Modeling Tools</em> and follow the link for your operating system on the right:</p>
<div class="title">Install Obeo Designer, Community Edition</div>
<p>Our graphical and form based modeling tools, e.g. Insel 9.0 and Parameter Catalogs, run on top of <a href="https://www.obeodesigner.com/en/product/sirius">Eclipse Sirius</a>.
Technically, the Eclipse Sirius project provides a set of open source features and plugins that can be added to any Eclipse package to transform it into a very flexible modeling workbench.
Instead of adding these software components manually, we start with a pre-configured Eclipse package named <em>Obeo Designer</em>.
Please download and install the latest version (11.5 at the time of writing) available at <a href="https://www.obeodesigner.com/en/download">Download Obeo Designer Community</a>.</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/EclipseDownload.gif" alt="EclipseDownload">
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
<div class="paragraph">
<p>Depending on the operating system, several security dialogs have to be acknowledged during installation and first launch of Obeo Designer.</p>
</div>
<div class="title">Figure 1. Download links for Eclipse Modeling Tools package</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Finally, you can click on <code>Download</code> and wait for the 400 something MB package to arrive.</p>
<p>After the 400 something MB package has arrived, unzip the downloaded file and move the resulting application named <code>ObeoDesigner-Community</code> into <code>Applications</code> on macOS, <code>Programs</code> on Windows, or similar on Linux.</p>
</div>
<div class="admonitionblock note">
<table>
......@@ -993,73 +997,115 @@ Instead, look for package <em>Eclipse Modeling Tools</em> and follow the link fo
</td>
<td class="content">
<div class="paragraph">
<p>Depending on the operating system, several security dialogs have to be acknowledged during installation and first launch of Eclipse.</p>
<p>Special installation note for macOS: As Obeo Designer currently is not code-signed, macOS consideres it as damaged. To work around this security feature, remove the quarantine status of the program like so:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Open a terminal in the folder containing the .app file</p>
</li>
<li>
<p>Execute: xattr -d com.apple.quarantine ObeoDesigner-Community.app</p>
</li>
<li>
<p>Double click the app to start.</p>
</li>
</ol>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>The downloaded installation file contains the application simply named <code>Eclipse</code> ready to be copied into <code>Applications</code> on macOS or be installed in <code>Programs</code> on Windows.
Since later you may add other Eclipse packages&#8201;&#8212;&#8201;or different versions of the same package&#8201;&#8212;&#8201;I suggest to rename the application more significantly to <code>EclipseModeling2106</code> or similar.</p>
</div>
<div class="paragraph">
<p>After installation has finished launch Eclipse for the first time and you will see a dialog for choosing a new empty directory as its workspace.</p>
<p>After installation has finished launch the application for the first time and you will see a dialog for choosing a new empty directory as its workspace.</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/SelectWorkspaceDirectory.gif" alt="SelectWorkspaceDirectory" width="500">
</div>
<div class="title">Figure 2. Initial Dialog to Choose a Workspace Directory</div>
<div class="title">Figure 1. Initial Dialog to Choose a Workspace Directory</div>
</div>
<div class="paragraph">
<p>Again, more workspaces might come into existence later, so replace the proposed generic directory path and name with a more specific one, e.g.<code>EclipseModelingWS</code>.
The Eclipse main window appears with a Welcome Screen open.
It contains links to exhaustive documentation on concept, features and usage of Eclipse that might be of interest later, especially:</p>
<p>More workspaces might come into existence later, so replace the proposed generic directory path and name with a more specific one, e.g.<code>ObeoDesignerWS</code>.
The main window appears with a Welcome Screen open.
Especially under <code>Documentation</code> you will find exhaustive documentation on Eclipse that might be of interest later, e.g.:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Overview</p>
<p>Workbench User Guide</p>
<div class="ulist">
<ul>
<li>
<p>Workbench basics</p>
<div class="ulist">
<ul>
<li>
<p>Concepts: features, resources, perspectives, views, editors</p>
<p>Concepts: perspectives, projects, views, editors, features, resources, &#8230;&#8203;</p>
</li>
<li>
<p>Opening perspectives and views</p>
</li>
<li>
<p>Installing new software manually</p>
<p>Tasks: Working with perspectives, views and editors, installing new software. &#8230;&#8203;</p>
</li>
</ul>
</div>
</li>
<li>
<p>Team support with Git</p>
<p>EGit Documentation</p>
<div class="ulist">
<ul>
<li>
<p>Git for Eclipse Users</p>
</li>
<li>
<p>EGit User Guide</p>
</li>
</ul>
</div>
</li>
<li>
<p>Learn how to use the Ecore diagram editor</p>
</li>
<li>
<p>Launch the Eclipse Marketplace</p>
<p>Ecore Tools User Manual: Learn how to use the Ecore diagram editor.</p>
</li>
</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>.
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>
<p>For now, you can dismiss the welcome screen. It can be opened anytime by executing <code>Help &#8594; Welcome</code>.</p>
</div>
<div class="paragraph">
<p>Now you should see the initial window layout 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 id="quantity-plug-ins" class="paragraph">
<div class="title">Add Plug-ins to deal with Quantities and Units</div>
<p>Parameter catalogs should be able to represent quantities, not just bare numbers.
See <a href="https://onlinelibrary.wiley.com/doi/full/10.1002/spe.2926">Unit of measurement libraries, their popularity and suitability</a> for a systematic account of open source solutions in the this area.</p>
</div>
<div class="paragraph">
<p>Java provides an extensive framework to deal with quantities and their units defined in <a href="https://docs.google.com/document/d/12KhosAFriGCczBs6gwtJJDfg_QlANT92_lhxUWO2gCY/edit#heading=h.6698n7erex5o">Java Specification Request (JSR) 385</a>.
The reference implementation for this framework is <a href="https://unitsofmeasurement.github.io/indriya/">Indriya</a>. Demos of its usage can be found at <a href="https://unitsofmeasurement.github.io/uom-demos/" class="bare">https://unitsofmeasurement.github.io/uom-demos/</a>.</p>
</div>
<div class="paragraph">
<p>To make Indriya available for use in Ecore data models, the author has created two plug-ins that can easily be added to Eclipse. To do so, open dialog <code>Help &#8594; Install New Software&#8230;&#8203;</code> and enter site <code><a href="https://transfer.hft-stuttgart.de/pages/neqmodplus/indriya-p2/release_target_211/" class="bare">https://transfer.hft-stuttgart.de/pages/neqmodplus/indriya-p2/release_target_211/</a></code> like depicted below.</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/AddUpdateSite.png" alt="Install Plug-in" width="500">
</div>
<div class="title">Figure 2. Install Plug-in from Specific Update Site</div>
</div>
<div class="paragraph">
<p>Select Indriya plug-in, press <code>Next &gt;</code> and acknowledge all following dialogs, including security warnings.</p>
</div>
<div class="paragraph">
<p>Do the same for the City Units plug-in available at site <code><a href="https://transfer.hft-stuttgart.de/pages/neqmodplus/de.hft-stuttgart.cityunits/release_target_110/" class="bare">https://transfer.hft-stuttgart.de/pages/neqmodplus/de.hft-stuttgart.cityunits/release_target_110/</a></code>
Finally, restart Eclipse to complete plug-in installation.</p>
</div>
<div class="paragraph">
<p>While the first plug-in installs Indriya, the second plug-in adds some specific units for urban simulation and Ecore types used for modeling quantities as attributes of classes.</p>
</div>
<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 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>
<h3 id="trueexercise-modeling-a-parameter-catalog-with-ecore"><a class="anchor" href="#trueexercise-modeling-a-parameter-catalog-with-ecore"></a>Exercise: Modeling a Parameter Catalog with Ecore</h3>
<div class="paragraph">
<p>Before we start working on real catalog projects hosted in a Git repository in the next section, let us first create a demo project for playing around and learning basic modeling skills.</p>
</div>
<div class="quoteblock">
<blockquote>
<div class="paragraph">
......@@ -1101,7 +1147,7 @@ Since it is not always clear where names provided during modeling are used later
<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_7" class="footnote" href="#_footnotedef_7" title="View footnote.">7</a>]</sup></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Base Package (reverse domain)<sup class="footnote">[<a id="_footnoteref_6" class="footnote" href="#_footnotedef_6" title="View footnote.">6</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">de.hftstuttgart</p></td>
</tr>
......@@ -1111,7 +1157,7 @@ Since it is not always clear where names provided during modeling are used later
<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_8" class="footnote" href="#_footnotedef_8" title="View footnote.">8</a>]</sup></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Eclipse Project<sup class="footnote">[<a id="_footnoteref_7" class="footnote" href="#_footnotedef_7" title="View footnote.">7</a>]</sup></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">org.example.democatalog.model</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">de.hftstuttgart.buildingphysics</p></td>
</tr>
......@@ -1158,10 +1204,10 @@ It consists of a global unique domain name and a path to the project, unique wit
<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 the project <code>org.example.democatalog.model</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>
<p>Name the project <code>org.example.democatalog.model</code> and uncheck <em>Use default location</em> 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>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>
<p>Provide <code>democatalog</code> as main Java package name, uncheck <em>Use default namespace parameter</em> 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>Click <code>Finish</code>.</p>
......@@ -1173,7 +1219,7 @@ It consists of a global unique domain name and a path to the project, unique wit
The diagram is automatically named <code>democatalog</code> after the package name for the Java classes that will be generated from it (provided above).
The <em>Model Explorer</em> shows the contents of the new Ecore modeling project.</p>
</div>
<div class="imageblock thumb">
<div id="fig-ecore-modeling-project" class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/DemoCatalogEmpty.png" alt="DemoCatalogEmpty">
</div>
......@@ -1494,7 +1540,7 @@ In the Ecore editor properties view, you can specify if a class is abstract or n
</td>
<td class="content">
<div class="paragraph">
<p>An exhaustive user manual for Ecore diagram editor is available. Execute <code>Help &#8594; Welcome</code> and follow link <code>Learn how to use the diagram editor</code>.</p>
<p>An exhaustive user manual for Ecore diagram editor is available at <code>Help &#8594; Welcome &#8594; Documentation &#8594; EcoreTools User Manual</code>.</p>
</div>
</td>
</tr>
......@@ -1516,21 +1562,30 @@ Note that Eclipse synchronizes different editors of the same content automatical
</tr>
</table>
</div>
</div>
<div class="sect2">
<h3 id="truegeneration-of-java-code-from-data-model"><a class="anchor" href="#truegeneration-of-java-code-from-data-model"></a>Generation of Java Code from Data Model</h3>
<div class="paragraph">
<p>By now, your Ecore model should look like this:</p>
<p>That&#8217;s it for the data modeling part. By now, your Ecore model should look like this:</p>
</div>
<div id="fig-example-model" class="imageblock thumb">
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/Homework.png" alt="Homework">
</div>
<div class="title">Figure 8. Example Model (Homework)</div>
</div>
</div>
<div class="sect2">
<h3 id="truemaking-an-application-to-create-and-edit-data"><a class="anchor" href="#truemaking-an-application-to-create-and-edit-data"></a>Making an Application to Create and Edit Data</h3>
<div class="paragraph">
<p>In this section you will get a glimpse on how to create an application to create and edit data conforming to the Ecore data model of our demo parameters catalog.</p>
</div>
<div class="paragraph">
<p>Let us bring the model to life, that is, generate code from it that creates, reads, updates, and deletes concrete data objects of modeled classes in computers.
I would like to tell you that this is done with just one click but, actually, you need two or three:</p>
<p>Topics described here (and much more) are discussed in this <a href="https://wiki.eclipse.org/Sirius/Tutorials/StarterTutorial/">Sirius Starter Tutorial</a>.</p>
</div>
<div class="paragraph">
<p>If you are less interested in the details of UI creation, but more in working on already existing parameter catalog software and data, you may skip this section for now and proceed with <a href="#Working with Git Hosted Catalogs">[Working with Git Hosted Catalogs]</a>.</p>
</div>
<div class="paragraph">
<div class="title">Generation of Java Code from Data Model</div>
<p>Let us bring the Ecore data model to life, that is, generate code from it that allows to create, read, update, and delete (CRUD) concrete data objects of modeled classes in computers:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
......@@ -1538,36 +1593,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 the context menu of Ecore editor <code>democatalog</code></p>
</li>
<li>
<p>Execute <code>Generate &#8594; Edit Code</code> from the same context menu</p>
<p>Execute <code>Generate &#8594; All</code> from the context menu of Ecore editor <code>democatalog</code></p>
</li>
</ol>
</div>
<div class="admonitionblock warning">
<table>
<tr>
<td class="icon">
<i class="fa icon-warning" title="Warning"></i>
</td>
<td class="content">
<div class="paragraph">
<p>Please do <strong>not</strong> execute <code>Generate &#8594; All</code> or <code>Generate &#8594; Editor Code</code>.</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/GenerateMenu.png" alt="GeneratedClasses" width="260">
</div>
</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>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>
</table>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right thumb">
......@@ -1577,16 +1606,13 @@ If, by mistake, project <code>org.example.democatalog.editor</code> was created,
<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>org.example.democatalog.model</code>.</p>
</div>
<div class="paragraph">
<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>
<p><code>Generate &#8594; All</code> creates classes that represent the modeled data in code at first. These classes are located in three packages under directory <code>src-gen</code> in <code>org.example.democatalog.model</code>. Then, the command generates <code>Edit Code</code> and <code>Editor Code</code> within two new Eclipse projects named <code>org.example.democatalog.edit</code> and <code>org.example.democatalog.editor</code>, again with generated classes in <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>
</div>
<div class="paragraph">
<p>Sometimes it maybe required to manually adapt generated code&#8201;&#8212;&#8201;after all our concern is "low code", not "no code" development. In that case, we will replace <code>@generated</code> by <code>@generated NOT</code> to prevent code regeneration.</p>
<p>Sometimes it is required to manually adapt generated code&#8201;&#8212;&#8201;after all our concern is "low code", not "no code" development. In that case, we will replace <code>@generated</code> by <code>@generated NOT</code> to prevent code regeneration of the respective item.</p>
</div>
<div class="paragraph">
<p>After code generation, you may have noticed some warnings showed up in view <em>Problems</em>.</p>
......@@ -1602,427 +1628,437 @@ If, by mistake, project <code>org.example.democatalog.editor</code> was created,
</div>
</div>
</div>
</div>
<div class="sect2">
<h3 id="truegeneration-and-tweaking-of-user-interface"><a class="anchor" href="#truegeneration-and-tweaking-of-user-interface"></a>Generation and Tweaking of User Interface</h3>
<div class="paragraph">
<p>In this section you will learn how to generate and tweak a CRUD user interface based on Ecore data model and Java classes created for our demo parameters catalog above. Topics described here are discussed in more detail in tutorial <a href="https://eclipsesource.com/blogs/tutorials/getting-started-with-EMF-Forms/">Getting started with EMF Forms</a>.
To find out what user interface controls and layouts are provided by this framework have a look at <a href="https://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/">EMF Forms – View Model Elements</a>. <em>EMF Forms</em> is already part of package <em>Eclipse Modeling Tools</em>, so we can create a third Eclipse project/plugin that implements a user interface for editing catalog data without further ado:</p>
<div class="title">Create a Prototype Application for Data Editing and UI Design</div>
<p>Firstly, launch a new instance of the running <em>Obeo Designer</em> application:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<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>
<p>Execute <code>Run &#8594; Run Configurations&#8230;&#8203;</code> from the main menu and double click on <em>Eclipse Application</em> to get a <em>New_configuration</em>. You may want to rename <em>New_configuration</em> to <em>DemoCatalog</em> or the like.</p>
</li>
<li>
<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.model</code></p>
<p>Press <code>Run</code> to start the new Eclipse application that is basically a copy of your running <em>Obeo Designer</em> application but with a different workspace.</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>
</li>
<li>
<p>Leave <code>Fill view model with default layout</code> checked and click <code>Finish</code>.</p>
<p>In the new application window close the welcome screen and open the Sirius perspective using the suited button in the top right corner of the main window. This perspective provides specific Sirius menus and new project types.</p>
</li>
</ol>
</div>
<div class="paragraph">
<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>
<p>Secondly, create a project that will contain catalog data (remember Eclipse can only handle files that are part of a project):</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ViewModel.png" alt="ViewModel1">
</div>
<div class="title">Figure 11. New View Model</div>
</div>
<div class="paragraph">
<p>Like the <strong>data</strong> of our catalog are modeled as Ecore file using a dedicated graphical editor, so will our catalog’s <strong>user interface</strong> be modeled in <code>.view</code> files, again using a special editor.</p>
</div>
<div class="paragraph">
<p>Since we opted for <code>Fill view model with default layout</code> the catalog&#8217;s UI is filled initially with default controls for all data items assigned to Ecore type <code>EnergyComponentsCatalog</code> like a string control for <code>author</code> or list controls for <code>boilers</code>, <code>chps</code>, and so on.</p>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>From main menu execute <code>File &#8594; New &#8594; Modeling Project</code>&#8201;&#8212;&#8201;not <code>Ecore Modeling Project</code>!</p>
</li>
<li>
<p>Name the project <code>org.example.democatalog.data</code> and uncheck <em>Use default location</em> so that the new project&#8201;&#8212;&#8201;again&#8201;&#8212;&#8201;is <strong>not</strong> stored in workspace but a different directory you create/choose, usually a directory named like the project and sitting side by side to the model, edit and editor project directories created above.</p>
</li>
<li>
<p>Click <code>Finish</code>.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>See red arrow in the above screen-shot?
It points to a button that opens a functional preview of the modeled user interface.</p>
<p>Thirdly, create a first XML file for catalog data:</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ViewEditorPreview.png" alt="ViewModel1" width="500">
</div>
<div class="title">Figure 12. User Interface Preview</div>
</div>
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="paragraph">
<p>Double click on tab <em>EMF Forms Preview</em> to enlarge view for better handling&#8201;&#8212;&#8201;double click again to get back.</p>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>From main menu execute <code>File &#8594; New &#8594; Other&#8230;&#8203;</code> and type <code>demo</code> into search field <em>Wizards:</em></p>
</li>
<li>
<p>Select <code>Example EMF Model Creation Wizards &#8594; DemoCatalog Model</code> and click <code>Next &gt;</code></p>
</li>
<li>
<p>Select <code>org.example.democatalog.data</code> as parent directory and name the data file <code>First.democatalog</code></p>
</li>
<li>
<p>Click <code>Next &gt;</code> and choose <code>Energy Component Catalog</code> as the root data object that will be created initially</p>
</li>
<li>
<p>Click <code>Finish</code>.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Enable auto refresh mode <span class="image"><img src="ParameterCatalogs2Images/ViewModelAutomaticRefresh.gif" alt="ViewModelAutomaticRefresh" width="40"></span> to let each change in the view model instantly be reflected in the preview.</p>
<p>A new entry named <em>First.democatalog</em> should appear in the <em>Model Explorer</em>.
Double-click it and a <strong>generic</strong> editor will open.
In principle, one could use this editor to add new data to the catalog via <code>New Child &gt;</code> in the context menu over entry <code>Energy Component Catalog</code>.
Data of a selected entry can be edited in view <em>Properties</em> that is generic, too.</p>
</div>
<div class="paragraph">
<p>Given your screen is big enough, you may want to dock-out the preview by dragging tab <em>EMF Forms Preview</em> out of Eclipse&#8217;s main window.
Seeing editor and preview side by side is a great way to explore the possibilities of view models.</p>
</div>
</td>
</tr>
</table>
<p><a id="add-example-data"></a>Please add two or three boilers this way to have some data to play with below.</p>
</div>
<div class="paragraph">
<p>Red input field and exclamation mark in the preview signal missing or inconsistent data.
Ecore data model specifies attribute <code>author</code> with a lower bound of one, meaning it is a mandatory attribute.
As soon as an author&#8217;s name is provided, the error indication disappears.
This is what <em>functional</em> preview means.
You can even create new boilers or other objects in lists provided, with all forms created "automagically" with respect to our underlying Ecore data model.</p>
<p>When done, you may save <em>First.democatalog</em> so that after closing the application data will reappear if it is opened again as described above.</p>
</div>
<div class="paragraph">
<p>Of course, such automatic approach has its limits.
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>
<p>The generic editors don&#8217;t get as far. Usually, one would like to have tables, custom property sheets, input validation, and more. Well, Sirius is all about creating nice graphical and form-based editors for data models specified in Ecore. To do this we need one more Eclipse project.</p>
</div>
<div class="paragraph">
<p>How should a better UI look and feel like?</p>
<div class="title">UI Design Project</div>
<p>Like the <strong>data</strong> of our catalog is modeled as an Ecore file using a dedicated graphical editor, so will the <strong>user interface</strong> (tables, trees, diagrams, property views) be modeled in a Sirius <code>.odesign</code> file that lives in a special Eclipse project that we create while still in the (second) Eclipse application that hosts the data:</p>
</div>
<div class="paragraph">
<p>If there are many lists (types) of entities&#8201;&#8212;&#8201;the normal case for parameter catalogs&#8201;&#8212;&#8201;users should select what list they want to work with by selecting it from a list or tree view that is always visible, the <em>master view</em>.
Once a type is selected in the master view, a table with all objects of this list/type shall appear sidelong in a <em>detail view</em>, ready for editing.</p>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Execute <code>File &#8594; New &#8594; ViewPoint Specification Project</code></p>
</li>
<li>
<p>Name the project <code>org.example.democatalog.design</code>, uncheck <em>Use default location</em> as always and create/choose a directory with the same name as the project besides to the model, edit, editor, and data project directories</p>
</li>
<li>
<p>Click <code>Finish</code>.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>In <em>EMF Forms</em> master-detail-views can be modeled either with <em>Categorization</em> or <em>Tree Master Detail</em> UI components.
The latter not only allows to edit information displayed in the detail view, but also the tree of elements in the master view.
Opposed to that, a <em>Categorization</em> presents a fixed hierarchy of elements to choose from.
This is exactly what we need as there are only a fixed number of types of objects to be edited in a parameters catalog.</p>
</div>
<div class="sect3">
<h4 id="trueadding-tables-to-the-ui"><a class="anchor" href="#trueadding-tables-to-the-ui"></a>Adding Tables to the UI</h4>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ViewModelDeleteControls.gif" alt="ViewModelDeleteControls" width="300">
</div>
<div class="title">Figure 13. Delete default list controls</div>
<p>A special editor for file <code>democatalog.odesign</code> appears automatically.
In it select <code>MyViewpoint</code> and rename it in <em>Properties</em> to <code>Catalog</code>.
A viewpoint provides a set of representations (tables, trees, diagrams, property views) that end-users can instantiate.</p>
</div>
<div class="paragraph">
<p>But first, we replace the default controls for lists of boilers, chps, and so on by tables. As shown here, select all list controls in the view model and execute <code>Delete</code> from context menu. Refresh <em>View Editor Preview</em> to verify that only field <code>Author*</code> is left.</p>
<div class="title">Adding a Table to the UI</div>
<p>In what follows, we work with the <em>democatalog.odesign</em> editor.
Say, we want to add a table for boilers to the UI:</p>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ViewModelCreateTable.gif" alt="ViewModelCreateTable" width="300">
</div>
<div class="title">Figure 14. Create Table Control</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>From context menu over viewpoint <em>Catalogs</em> execute <code>New Representation &#8594; Edition Table Description</code> to create a new description that is automatically selected and shown in view <em>Properties</em></p>
</li>
<li>
<p>To connect the table with its data model, choose tab <em>Metamodels</em> in <em>Properties</em>, click on <em>Add from registry</em> and select <code><a href="http://example.org/democatalog" class="bare">http://example.org/democatalog</a></code>.</p>
</li>
<li>
<p>Go back to tab <em>General</em> and enter <code>Boiler_table</code> as <em>Id</em>.</p>
</li>
<li>
<p>In the green input field <em>Domain Class</em> press key ctrl-space and choose <code>democatalog::EnergyComponentCatalog</code> from the list.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Next, create a table that shall display all boilers in a catalog:
Select <code>EnergyComponentsCatalog</code>, activate context menu and choose <code>TableControl</code> from the list of available UI elements.
(EnergyComponentsCatalog represents the root view of the UI and, as such, accepts quite a lot of different UI components as child components.)</p>
<p>From the above <em>Boiler_tables</em> know that they present data conforming to our <code><a href="http://example.org/democatalog" class="bare">http://example.org/democatalog</a></code> data model and that boiler data are found as part&#8201;&#8212;&#8201;or "below"&#8201;&#8212;&#8201;the Energy Component Catalog.</p>
</div>
<div class="paragraph">
<p>Entry <code>TableControl</code> was inserted into the list of interface elements below <code>Control author</code>.
Checking updated preview reveals no table but a message basically saying that a reference to the domain model is missing, in other words: <em>EMF Forms</em> does not know yet what data to present in table.
Click on entry <code>TableControl</code> to see its details.
A red exclamation mark indicates the missing <code>Domain Model Reference*</code>.
Click on <span class="image"><img src="ParameterCatalogs2Images/ButtonLinkPlus.gif" alt="ButtonLinkPlus" width="40"></span> and be ready to chase a sequence of dialogs:</p>
</div>
</div>
<p>Next, specify the lines to be displayed in the table:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Click on another <span class="image"><img src="ParameterCatalogs2Images/ButtonLinkPlus.gif" alt="ButtonLinkPlus" width="40"></span> in dialog <code>Configure TableDomainModelReference</code></p>
<p>From context menu over <em>Boiler_table</em> create <code>New Table Element &#8594; Line</code></p>
</li>
<li>
<p>In wizard <code>New Reference Element</code> select <code>model &#8594; FeaturePathDomainModelReference</code> and click <code>Next &gt;</code></p>
<p>In tab <em>General</em> in <em>Properties</em>, enter <code>Boiler_line</code> as <em>Id</em>:</p>
</li>
<li>
<p>Click <code>Link Domain Model EFeature</code> and in appearing pop-up list choose reference to list of objects you want to edit in the table, e.g. <code>boilers</code>; confirm with <code>OK</code> safely ignoring warning about missing <code>PropertyDescriptor</code>.</p>
<p>In the green input field <em>Domain Class</em> press key ctrl-space and choose <code>democatalog::Boiler</code> from the list.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>And now for the columns:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>From context menu over <em>Boiler_table</em> create <code>New Table Element &#8594; Feature Column</code></p>
</li>
<li>
<p><code>Finish</code> wizard <code>New Reference Element</code></p>
<p>In tab <em>General</em> in <em>Properties</em>, enter <code>Name_col</code> as <em>Id</em>:</p>
</li>
<li>
<p><code>Finish</code> dialog <code>Configure TableDomainModelReference</code>.</p>
<p>In the green input field <em>Feature Name</em> press key ctrl-space and choose <code>modelName</code> from the list</p>
</li>
<li>
<p>Repeat the above steps for <code>boilerType</code> and <code>installedThermalPower</code> accordingly.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>This was some work, but as reward we get a fully specified table control in <em>View Editor</em> that "translates" into a preview where we can create, read, update, and delete boilers.</p>
<p>After addition of some foreground and background styles, the design of the UI looks like this.</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ViewModelWithTable.gif" alt="ViewModelWithTable.gif">
<img src="ParameterCatalogs2Images/BoilerTableDesign.png" alt="BoilerTableAndProperties">
</div>
<div class="title">Figure 15. Table for Boilers</div>
<div class="title">Figure 11. Boiler Tables Design</div>
</div>
<div class="paragraph">
<p>Moreover, clicking at a table header sorts all objects in it (rows) according to the values in this column.
Column widths can adapted, too.</p>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ViewModelTweakTable.gif" alt="ViewModelTweakTable" width="300">
</div>
<div class="title">Figure 16. Modify Table Control</div>
</div>
<div class="paragraph">
<p>Table UIs can be tweaked in many ways, e.g. selection and sequence of columns can be declared via list <code>Column Domain Model References</code>. To fill this list with defaults, execute <code>Generate Columns</code> from table control&#8217;s context menu. Reorder them as you like or delete columns that are not important to the user.</p>
<p>Save it!</p>
</div>
<div class="paragraph">
<p>Notice here an important overall feature of <em>EMF Forms</em>: If something is left unspecified, be it the view model for an Ecore object type or the specification of table columns, <em>EMF Forms</em> will always find a default solution! Applied to columns specification this means we get default columns automatically back in the moment the last column is removed from list <code>Column Domain Model References</code>.</p>
</div>
<div class="paragraph">
<p>If explicit column specifications are present further configurations can be added to a table control from its context menu, e.g. initial column widths or read-only status of columns. See <a href="https://eclipsesource.com/de/blogs/2018/01/31/emf-forms-1-15-0-feature-enhanced-table-renderer/">here</a> for details.</p>
<p>To create an instance of the table just designed double-click on <code>representations.aird</code> in the data project:</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/BoilerRepresentations.png" alt="BoilerRepresentations">
</div>
<div class="title">Figure 12. Administration of Model and Representations</div>
</div>
<div class="paragraph">
<p>By default only attributes are displayed and directly editable in tables while references to other objects&#8201;&#8212;&#8201;in our case the reference to a manufacturer&#8201;&#8212;&#8201;are not.</p>
<p>In case viewpoint <code>Catalogs</code> under header <em>Representations</em> is still disabled as shown above, select it and press <code>Enable</code>. Then:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Press <code>New&#8230;&#8203;</code> to open a <em>Create Representation Wizard</em></p>
</li>
<li>
<p>Choose <code>Boiler_table</code> and click <code>Next &gt;</code></p>
</li>
<li>
<p>Select <code>Energy Components Catalog</code> as data source and click <code>Finish</code></p>
</li>
<li>
<p>You are prompted for the new tables name: simply confirm the proposed name with <code>OK</code>.</p>
</li>
</ol>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ViewModelWithPanel.gif" alt="ViewModelWithPanel" width="300">
<img src="ParameterCatalogs2Images/BoilerTableAndProperties.png" alt="BoilerTableAndProperties" width="350">
</div>
<div class="title">Figure 17. Default Panel for Boilers</div>
<div class="title">Figure 13. Boiler Table with Properties View</div>
</div>
<div class="paragraph">
<p>To get the default (<em>sic!</em>) editing panel for an selected table row, in <em>View Editor</em> just set <code>Detail Editing*</code> from <code>None</code> to <code>WithPanel</code>, <strong>press <em>Tab</em></strong>, and save. For boilers, <em>EMF Forms</em> will create the editing panel shown here. Regardless wether users edit data in the panel or directly in the table&#8201;&#8212;&#8201;both will stay in sync any time.</p>
<p>The screenshot on the right shows <em>new Boiler_table</em> with just two entries. Details of the selected entry are editable in <em>Properties</em>.</p>
</div>
</div>
</div>
<div class="admonitionblock warning">
<table>
<tr>
<td class="icon">
<i class="fa icon-warning" title="Warning"></i>
</td>
<td class="content">
<div class="paragraph">
<p><em>View editor</em> exhibits an irritating behavior: With preview auto-refresh turned on, any change in the details view is reflected instantly in the preview, even without saving the form or leaving the edited field.</p>
<p>Is your table empty? In this case you probably did not add example data using the default editor as described <a href="#add-example-data">above</a>.
But you can add new Boilers any time via command <code>New child &#8594; Boiler</code> in the context menu of <code>Energy Component Catalog</code> in section <em>Models</em> of the representations editor depicted above.</p>
</div>
<div class="paragraph">
<p>On the other hand, <strong>saving</strong> an updated view editor only takes into account edited fields after they have lost focus, e.g. by pressing <em>Tab</em> key or clicking with the mouse into another field.
So, saving a form before the focus has shifted from the last edited field won&#8217;t honor this edit, that is you won&#8217;t necessarily get what you see.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>One last thing: Enter <code>boilers</code> as name for the table control so we can distinguish it from the other four table controls to come.</p>
<p>Note, that you can delete boilers from the table&#8217;s context menu, but currently there is no button or menu entry to create new boilers.
Such a command would have to be described in <code>democatalog.odesign</code> first.</p>
</div>
<div class="paragraph">
<p>Yes! &#8230;&#8203; Please repeat above procedure to create table controls for chps, solar panels, inverters and manufacturers, too. I did this in about 3 minutes. ;-)</p>
</div>
<p>Be aware that applications with UI design and example data launched from <em>Obeo Designer</em> are meant to be prototypes for the final software only.
In fact, any saved changes in the design file are instantly reflected in the UI.
During refinement of model and UI, data sets can be created, edited, and tested for usability without the need to built deployable software component. (On deployment, see parts <em>Accessing and Using Parameter Catalogs</em> and <em>Build (Parameter Catalog) Applications with Eclipse Tycho</em> below.)</p>
</div>
<div class="sect3">
<h4 id="truemaster-detail-view-with-categories"><a class="anchor" href="#truemaster-detail-view-with-categories"></a>Master-Detail View with Categories</h4>
<div class="paragraph">
<p>In last section we improved our catalog&#8217;s UI by replacing simple object lists by tables that can be sorted, customized and edited inline as well as in an associated panel.
Alas, instead a list of lists we have got an even bigger list of tables.</p>
<p>Iteratively the UI design must be adapted to changes in data model, although some changes are automatically reflected in the generated UI, at least for default forms.
Data model changes can also can render existing XML data incompatible. There are tools for data migration, but for now, recreation of test data or manual editing of XML file is the way to go.</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 in the detail view.</p>
<p>As you may imagine, this is just the tip of the iceberg of what can be done with the Sirius framework for designing graphical UIs.
While domain experts should be capable to create and to refine Ecore data models, the UI design of a parameter catalogs will mainly be done by software developers.
However, since the UI is not implemented by program code, but a description in an <code>.odesign</code> file, domain experts can easily enhance and tweak it, e.g. by adding or reordering columns of a table.</p>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ViewModelCatgorization1.gif" alt="ViewModelCatgorization1" width="180">
</div>
<div class="title">Figure 18. Category Tree</div>
</div>
<div class="paragraph">
<p>Add a <em>Categorization</em> view to the list of UI elements in <em>View Editor</em> by selecting <code>EnergyComponentsCatalog</code> and choose <code>Categorization</code> from its contect menu.</p>
</div>
<div class="paragraph">
<p>Now add two <code>Composite Category</code> elements and one <code>Leaf Category</code> to <code>Categorization</code> from according context menu. This gives us three top level entries in the hierarchy.</p>
</div>
<div class="sect2">
<h3 id="trueworking-with-git-hosted-parameter-catalogs"><a class="anchor" href="#trueworking-with-git-hosted-parameter-catalogs"></a>Working with Git Hosted Parameter Catalogs</h3>
<div class="paragraph">
<p>In the same way add two <code>Leaf Category</code> elements to each <code>Composite Category</code> resulting in the hierarchy depicted here.</p>
</div>
</div>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ViewModelCatgorization2.gif" alt="ViewModelCatgorization2" width="260">
</div>
<div class="title">Figure 19. Completed View Model</div>
<p>Ecore data models and Sirius based UI design are used to create parameter catalog software hosted in Git repositories.
To work with these, all you need is Jave 16 and the <em>Obeo Designer</em> with plug-ins for handling of Units installed (see <a href="#truesetup-obeo-designer">Setup Obeo Designer</a> for details.)</p>
</div>
<div class="paragraph">
<p>This screen shot shows the view model of our UI when finished. To get there:</p>
<div class="title">Import Modeling Projects from Git</div>
<p>To connect to a Git repository open the <em>Import Projects from Git</em> wizard via <code>File &#8594; Import&#8230;&#8203; &#8594; Git &#8594; Projects from Git &#8594; Clone URI</code>. Then:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Select UI element <code>Categorization</code> and rename it to <code>Categories</code></p>
<p>Copy the URI of the git repository into the according input field, e.g.:
<a href="https://rs-loy-gitlab.concordia.ca/parameter-catalogs-ecore/greenery-catalog.git" class="bare">https://rs-loy-gitlab.concordia.ca/parameter-catalogs-ecore/greenery-catalog.git</a> and provide your credentials in fields <em>User</em> and <em>Password</em>. <strong>Tick check box <em>Store in Secure Store</em> and provide a master password if required!</strong> If you don&#8217;t, be prepared to be prompted for your credentials over and over again</p>
</li>
<li>
<p>Rename composite and leaf categories as depicted here</p>
<p>Click <code>Next &gt;</code> and select a repository branch to check out, usually <em>master</em></p>
</li>
<li>
<p>Drag all table controls one by one into the suited leaf category</p>
<p>Click <code>Next &gt;</code> and choose the directory on your file system where to store the repository, e.g.
<code>&lt;user home&gt;/git/greenery-catalog</code>. Here, we adhere to the convention is to have all git repositories stored in <code>&lt;user home&gt;/git/</code></p>
</li>
<li>
<p>Confirm master-detail view works as expected in the preview.</p>
<p>After data transfer has completed, the wizard offers to <em>Import existing Eclipse projects</em>. Click <code>Next &gt;</code> and select the project with suffix <code>.model</code>, <code>.edit</code> and <code>.editor</code> for import, e.g. <code>ca.concordia.usp.greenerycatalog.model</code> etc.</p>
</li>
<li>
<p>Click <code>Finish</code>.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Now you can work on the data model like you did with the demo catalog. Find it under <code>model</code> in <code>ca.concordia.usp.greenerycatalog.model</code> (compare fig. <a href="#fig-ecore-modeling-project">New Ecore Modeling Project</a>).</p>
</div>
<div class="paragraph">
<div class="title">Catalog Data and UI Design</div>
<p>For data inspection and editing&#8201;&#8212;&#8201;and possibly modifying the UI&#8201;&#8212;&#8201;launch a new instance of the running Obeo Designer application by executing <code>Run &#8594; Run Configurations&#8230;&#8203;</code>, double-click on <em>Eclipse Application</em> to get a <em>New_configuration</em> and give it a meaningful name (e.g. <em>GreeneryCatalog</em>).
Then, press <code>Run</code> to start the application, close the welcome screen and open the Sirius perspective using the suited button in the top right corner of the main window.</p>
</div>
<div class="admonitionblock important">
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="paragraph">
<p>The UI hierarchy to access tables for entity types is independent, and usually will differ, from aggregation and inheritance hierarchies present in Ecore data model (compare fig. <a href="#fig-example-model">Example Model</a>).</p>
<p>Simply reuse the <em>Run Configuration</em> specified above, when starting the application next time!</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Note that <em>EMF Forms Preview</em> provides these buttons <span class="image"><img src="ParameterCatalogs2Images/ViewModelPersistence.gif" alt="PreviewPersistanceButtons" width="68"></span> to clear, load and store edited data.
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>
<p>Now, import the projects that contain data and UI design, respectively:</p>
</div>
<div class="paragraph">
<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 class="olist arabic">
<ol class="arabic">
<li>
<p>Execute <code>File &#8594; Import&#8230;&#8203;</code> for the import wizard</p>
</li>
<li>
<p>Browse to the directory containing the projects (e.g. <code>&lt;user home&gt;/git/greenery-catalog</code>) and check just the projects with suffixes <code>.data</code> and <code>.design</code> for import, e.g. <code>ca.concordia.usp.greenerycatalog.data</code> , <code>ca.concordia.usp.greenerycatalog.design</code></p>
</li>
<li>
<p>Click <code>Finish</code>.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Changes in data model also can make existing XML data incompatible. There are tools for data migration, but for now, recreation of test data or manual editing of XML file is the way to go.</p>
</div>
</div>
<p>When closing the application, it asks to store or dismiss any changes in data or UI design. You can also save these any time with <code>File &#8594; Save All</code>.</p>
</div>
<div class="sect2">
<h3 id="trueadd-units-to-the-mix"><a class="anchor" href="#trueadd-units-to-the-mix"></a>Add Units to the Mix</h3>
<div class="paragraph">
<p>As mentioned earlier, parameter catalogs should be able to represent quantities, not just bare numbers.
See <a href="https://onlinelibrary.wiley.com/doi/full/10.1002/spe.2926">Unit of measurement libraries, their popularity and suitability</a> for a systematic account of open source solutions in the this area.</p>
<div class="title">Declare Quantities</div>
<p>For simplicity, the demo catalog only used built-in attribute types like <code>EDouble</code>, <code>EInt</code>, or <code>EString</code>.
On the other hand, real-world parameter catalogs use a custom type named <em>Quantity</em> that combines a numerical (double) value with a unit.</p>
</div>
<div class="paragraph">
<p>Java provides an extensive framework to deal with quantities and their units defined in <a href="https://docs.google.com/document/d/12KhosAFriGCczBs6gwtJJDfg_QlANT92_lhxUWO2gCY/edit#heading=h.6698n7erex5o">Java Specification Request (JSR) 385</a>.
The reference implementation for this framework is <a href="https://unitsofmeasurement.github.io/indriya/">Indriya</a>. Demos of its usage can be found at <a href="https://unitsofmeasurement.github.io/uom-demos/" class="bare">https://unitsofmeasurement.github.io/uom-demos/</a>.</p>
<p>Symbols for defining units follow SI and other standards, including decimal prefixes like <code>m</code> for Milli or <code>G</code> for Giga as well as derived units, that is: <code>mV</code>, <code>GV</code> or <code>kW·h/m³</code> are all valid unit definitions.
This is all documented well in the resources mentioned in section <a href="#quantity-plug-ins">Add Plug-ins to deal with Quantities and Units</a> above, but for convenience, a table with valid units, including some specific units for urban simulation, is compiled in <a href="UnitsExamples.md" class="bare">UnitsExamples.md</a>.</p>
</div>
<div class="paragraph">
<p>To make Indriya available Ecore data models and EMF Forms, the author has created two plug-ins that can easily be added to Eclipse. To do so, open dialog <code>Help &#8594; Install New Software&#8230;&#8203;</code> and enter site <code><a href="https://transfer.hft-stuttgart.de/pages/neqmodplus/indriya-p2/release_target_211/" class="bare">https://transfer.hft-stuttgart.de/pages/neqmodplus/indriya-p2/release_target_211/</a></code> like depicted below.</p>
<p>To set an attribute&#8217;s type to <em>Quantity</em> just select it in the model, choose tab <em>Semantic</em> in view <em>Properties</em>, click on <em>EType</em> and select <em>Quantity</em> from the list of available types.
In the figure below, this was already done.</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/AddUpdateSite.png" alt="Install Plug-in" width="500">
<img src="ParameterCatalogs2Images/QuantityDefaultValues.png" alt="QuantityDefaultValues" width="400">
</div>
<div class="title">Figure 20. Install Plug-in from Specific Update Site</div>
<div class="title">Figure 14. Quantity Default Values</div>
</div>
<div class="paragraph">
<p>Select Indriya plug-in, press <code>Next &gt;</code> and acknowledge all following dialogs, including security warnings.</p>
<p>The red arrow shows how a unit is defined in field <em>Default Value Literal</em>. E.g., attribute <code>densityOfDrySoil</code> has unit <code>kg/m³</code> assigned to it.</p>
</div>
<div class="paragraph">
<p>Do the same for the City Units plug-in available at site <code><a href="https://transfer.hft-stuttgart.de/pages/neqmodplus/de.hft-stuttgart.cityunits/release_target_102/" class="bare">https://transfer.hft-stuttgart.de/pages/neqmodplus/de.hft-stuttgart.cityunits/release_target_102/</a></code>
Finally, restart Eclipse to complete plug-in installation.</p>
<p>Note that, for this attribute, no numerical default value is given.
In contrast, <code>conductivityOfDrySoil</code> is given a unit and a default numerical value: <code>1.0 W/(m*K)</code>.</p>
</div>
<div class="admonitionblock important">
<table>
<tr>
<td class="icon">
<i class="fa icon-important" title="Important"></i>
</td>
<td class="content">
<div class="paragraph">
<p>While the first plug-in installs Indriya, the second plug-in adds some specific units for urban simulation, EMF Forms editor fields for quantities, and Ecore types used for modeling quantities as attributes of classes.</p>
<p>The unit of a <em>Quantity</em> is definied by the sub-string that follows the first space character in the string given in <em>Default Value Literal</em>. The sub-string before that space is interpreted as default numerical value of the <em>Quantity</em>.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>Make the new Ecore types <code>QuantityLong</code> and <code>QuantityDouble</code> available like so:</p>
<p>The rules for how a <em>Quantity</em> default value is converted to its unit and default (initial) numerical value are very "forgiving":</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<div class="ulist">
<ul>
<li>
<p>Open <code>Sample Ecore Model Editor</code> from the context menu over your Ecore model</p>
<p>If no unit is given or it cannot be parsed to a valid unit, it will be regarded as <em>dimensionless</em>. E.g., index values, fractions and percentages are dimensionless quantities by purpose. While units may be displayed in the UI like <code>[kg]</code>, a dimensionless quantity will show up as <code>[]</code>, that is as the empty string.</p>
</li>
<li>
<p>From the context menu in this editor, execute <code>Load Resource&#8230;&#8203;</code> and then <code>Browse Target Platform Packages&#8230;&#8203;</code></p>
<p>If no numerical default value is present, then the numerical value is regarded as undefined.</p>
</li>
<li>
<p>Select package <code><a href="https://www.hftstuttgart.de/quantities" class="bare">https://www.hftstuttgart.de/quantities</a></code> and confirm the addition of
<code>platform:/resource/de.hftstuttgart.cityunits.model/model/Quantities.ecore</code>.</p>
<p>You may choose to specify a quantity as dimensionless and without numeric default by leaving field <em>Default Value Literal</em> empty (or provide some non-sensical string).</p>
</li>
</ol>
</ul>
</div>
<div class="paragraph">
<p>By this rules, any string&#8201;&#8212;&#8201;including the empty string&#8201;&#8212;&#8201;will be interpreted as a <em>Quantity</em> somehow.</p>
</div>
<div class="paragraph">
<div class="title">Declare Ranges</div>
<p>What is the point in declaring a dimensionless quantity for an attribute, anyway, instead of just declare it <code>EDouble</code> or <code>EInt</code>? The answer is that quantities can&#8201;&#8212;&#8201;and most of the time will&#8201;&#8212;&#8201;have a range of valid values defined.</p>
</div>
<div class="openblock float-group">
<div class="content">
<div class="imageblock right thumb">
<div class="content">
<img src="ParameterCatalogs2Images/QuantityDoubleAttributeType.png" alt="Install Plug-in" width="300">
<img src="ParameterCatalogs2Images/QuantityRange.png" alt="Quantity Range" width="250">
</div>
<div class="title">Figure 21. Set QuantityDouble Type</div>
<div class="title">Figure 15. Quantity Range Definition</div>
</div>
<div class="paragraph">
<p>From now on, the new attribute types are available to model quantities with integer or floating point values as can be seen on the screenshot to the right.</p>
<p>As you can see in the screenshot, the allowed range of attribute values is defined by a so called Ecore annotation named <code>UomQuantities</code>.
It provides the minimal and/or maximal value for the attribute, inclusively.
If a minimal or maximal value is omitted or invalid, the range is not limited on that side.</p>
</div>
<div class="paragraph">
<p>Note here, that I also changed the default value from <code>0.0</code> to <code>0.0 V</code> to indicate that <code>maxDCVoltage</code> of inverters is given in <strong>Volt</strong>.</p>
<p>Adding annotations to an attribute does not work in the graphical Ecore editor, but only with the standard editor that is opened by <code>Open With &#8594; Sample Ecore Model Editor</code> from the context menu over the Ecore model file in <em>Model Explorer</em>.</p>
</div>
<div class="paragraph">
<p>The symbols for defining units follow SI and other standards, including decimal prefixes like <code>m</code> for Milli or <code>G</code> for Giga as well as derived units, that is: <code>mV</code>, <code>GV</code> or <code>kW·h/m³</code> are all valid unit definitions. This is all documented well in the resources mentioned at the top of this section, but for convenience, a table with valid units, including some specific units for urban simulation, is compiled in <a href="UnitsExamples.md" class="bare">UnitsExamples.md</a>.</p>
</div>
<div class="paragraph">
<p>If a unit symbol cannot be interpreted, this error is not already detected while generating and compiling code from model, but not before run time when the application tries to create the default value. In that case, you will see an error message like this:</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ErrorInUnitDefinition.png" alt="Install Plug-in" width="400">
<div class="paragraph">
<p>In this editor, define a range like this:</p>
</div>
<div class="title">Figure 22. Error Message for Wrong Unit Definition</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>From the context menu of the attribute of interest execute <code>New Child &#8594; EAnnotation</code> and type <code><a href="http://www.hft-stuttgart.de/UomQuantities" class="bare">http://www.hft-stuttgart.de/UomQuantities</a></code> into field <code>Source</code> as depicted above</p>
</li>
<li>
<p>From the context menu of the new <code>UomQuantities</code> annotation execute <code>New Child &#8594; Details Entry</code> and provide values for keys <code>min</code> and <code>max</code>, respectively.</p>
</li>
</ol>
</div>
<div class="admonitionblock warning">
<div class="admonitionblock tip">
<table>
<tr>
<td class="icon">
<i class="fa icon-warning" title="Warning"></i>
<i class="fa icon-tip" title="Tip"></i>
</td>
<td class="content">
<div class="paragraph">
<p>Be told that each attribute of type <code>QuantityLong</code> or <code>QuantityDouble</code> has to have a unit defined in its <code>Default Value Literal</code>, even optional attributes that do not require a numerical value to be set. For these, too, the Ecore model must specify the unit to use.</p>
</div>
<div class="paragraph">
<p>In other words: If you do not want to preset an attribute with a numerical default, you can omit the numerical part, but still must provide the unit symbol as <code>Default Value Literal</code>, e.g. <code>V</code> will work as well as <code>1.0 V</code> but leaving the numeric value initially undefined.</p>
<p>The above typing is a one time effort only, since for defining further ranges, one simply copies an existing <code>UomQuantity</code> annotation from one attribute to another one and just edits the values for <code>min</code> and <code>max</code>.</p>
</div>
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>One last technicality. <strong>Before</strong> code from an Ecore model with attributes of type <code>QuantityLong</code> or <code>QuantityDouble</code> can be generated correctly, we must tell Eclipse to reuse the corresponding generator model from the City Units plug-in:</p>
<p>If a catalog&#8217;s end user tries to enter a number outside the given range in the UI, it will be adapted automatically to a valid value.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>In package or project explorer find your generator model, e.g. <code>democatalog.genmodel</code> and execute <code>Reload&#8230;&#8203;</code> from its context menu</p>
</li>
<li>
<p>Choose <code>Ecore model</code>, press <code>Next &gt;</code> and <code>Load</code> the model (again)</p>
</li>
<li>
<p><code>Next &gt;</code> will open the page below. In section <em>Referenced Generator Models</em> select the Quantities generator model as depicted and click on <code>Finish</code>.</p>
</li>
</ol>
<div class="paragraph">
<div class="title">Declare Tooltips for Help</div>
<p>Again, domain experts use a specific annotation to provide short help texts that inform end-users about an attribute&#8217;s purpose, range and so on.
(These texts are displayed as tooltips when the users mouse stays on top of a question mark.)
And again, this is possible only in another kind of editor&#8201;&#8212;&#8201;this time the editor that is opened on a <code>.genmodel</code> in <em>Model Explorer</em>.
Each Ecore model is accompanied by a <code>.genmodel</code> that lives besides the respective <code>.ecore</code> file. Open the required editor from its context menu with <code>Open With &#8594; EMF Generator</code>.</p>
</div>
<div class="paragraph">
<p>The picture below shows the details. Just open the <code>.genmodel</code> tree until you can select the attribute that shall be documented.</p>
</div>
<div class="imageblock thumb">
<div class="content">
<img src="ParameterCatalogs2Images/ReferenceGeneratorModel.png" alt="Install Plug-in" width="500">
<img src="ParameterCatalogs2Images/QuantityDocumentation.png" alt="Quantity Documentation">
</div>
<div class="title">Figure 23. Add Reference to Imported Generator Model</div>
<div class="title">Figure 16. Quantity Documentation</div>
</div>
<div class="paragraph">
<p>If no generator model is available for selection, press button <code>Add&#8230;&#8203;</code> to add it first (this only works if <code>QuantityLong</code> or <code>QuantityDouble</code> were used at least once in the Ecore model).</p>
<p>In its <code>Properties</code> provide the tooltip in field <code>Edit &#8594; Property Description</code>.
In this example, the same text was also copied to <code>Model &#8594; Documentation</code>.
These texts are automatically inserted into comments in the generated program code, so that they
can inform a programmer that wants to use the generated API.</p>
</div>
</div>
<div class="sect2">
......@@ -2031,19 +2067,17 @@ Finally, restart Eclipse to complete plug-in installation.</p>
<p>Congratulations on making it this far. What have we achieved?</p>
</div>
<div class="paragraph">
<p>We get to know the <em>Eclipse Modeling Tools</em> IDE and created a graphical Ecore data model with one catalog class and five classes/types of domain objects therein.
<p>We get to know the <em>Obeo Designer</em> IDE and created a graphical Ecore data model with one catalog class and five classes/types of domain objects therein.
Classes have been defined by name, attributes, and relationships between them, often with cardinalities.
Whenever classes shared some attributes or relationships we factored these out into super classes.
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 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.
We implemented a prototypical user interface for this data with <em>Eclipse Sirius</em> by providing a <code>.odesign</code> model for that very UI.</p>
</div>
<div class="paragraph">
<p>We reflected on a good user interface for this data and used <em>EMF Forms</em> to model such an interface resulting in a full functional prototype.</p>
</div>
<div class="paragraph">
<p>Lastly, we enhanced Eclipse, Ecore and <em>EMF Forms</em> with two plug-ins for modeling, editing and persisting physical quantities as numerical values with defined units.</p>
<p>Lastly, we started working on real world parameter catalogs hosted in git repositories and introduced <em>Quantity</em> as a custom attribute type to model quantities as numerical values with defined units.</p>
</div>
<div style="page-break-after: always;"></div>
</div>
......@@ -2108,7 +2142,7 @@ Sub-dialog <code>Add Repository</code> pops up.</p>
<div class="content">
<img src="ParameterCatalogs2Images/InstallMaven1.gif" alt="InstallMaven1">
</div>
<div class="title">Figure 24. Add update site m2e</div>
<div class="title">Figure 17. Add update site m2e</div>
</div>
<div class="paragraph">
<p>In there provide <code>m2e</code> as name and</p>
......@@ -2126,7 +2160,7 @@ After confirmation with <code>Add</code>, choose the new site to <code>Work with
<div class="content">
<img src="ParameterCatalogs2Images/InstallMaven2.gif" alt="InstallMaven2">
</div>
<div class="title">Figure 25. Choose features to install</div>
<div class="title">Figure 18. Choose features to install</div>
</div>
<div class="paragraph">
<p>Provided <code>Group items by category</code> is checked, above features are displayed. Check all features and confirm all following questions about licenses and security concerns.
......@@ -2137,7 +2171,7 @@ Verify that Maven version 3.6.3 or above is now installed in <code>Window &#8594
<div class="content">
<img src="ParameterCatalogs2Images/InstallMaven3.gif" alt="InstallMaven3" width="400">
</div>
<div class="title">Figure 26. Check Maven installation</div>
<div class="title">Figure 19. Check Maven installation</div>
</div>
<div class="paragraph">
<div class="title">Add third party Java libraries</div>
......@@ -2176,18 +2210,15 @@ Verify that Maven version 3.6.3 or above is now installed in <code>Window &#8594
<a href="#_footnoteref_5">5</a>. Or even work on the same workspace provided in the cloud, see <a href="https://www.eclipse.org/che/technology/">Eclipse Che</a>.
</div>
<div class="footnote" id="_footnotedef_6">
<a href="#_footnoteref_6">6</a>. AdoptOpenJDK recently joined the Eclipse foundation and soon will change its name to <em>Adoptium</em> for legal reasons.
<a href="#_footnoteref_6">6</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_7">
<a href="#_footnoteref_7">7</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_8">
<a href="#_footnoteref_8">8</a>. <a href="https://wiki.eclipse.org/Naming_Conventions#Eclipse_Workspace_Projects" class="bare">https://wiki.eclipse.org/Naming_Conventions#Eclipse_Workspace_Projects</a>
<a href="#_footnoteref_7">7</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 2021-08-01 11:20:53 +0200
Last updated 2021-09-07 09:49:25 +0200
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css">
......
No preview for this file type
......@@ -122,7 +122,7 @@ In what follows, the new technology stack used to implement (4) is documented in
It uses four technologies to replace manual coding by code generation from models:
* _Ecore_ to model the catalog's data and generate Java classes and persistence layer from it.
* _EMF Forms_ for modeling and generating tables, forms and buttons to **c**reate, **r**ead, **u**pdate, and **d**elete data (CRUD).
* _Eclipse Sirius_ for modeling and generating tables, forms and buttons to **c**reate, **r**ead, **u**pdate, and **d**elete data (CRUD).
* _E4_, the Eclipse way of modeling the application user interface itself, e.g. the placement and behavior of views, editors, toolbars, menus, and more.
* A template engine called _Handlebars_ to generate fully parameterized simulation models from textual templates without programming.
......@@ -140,18 +140,18 @@ The Eclipse application framework offers:
* _E4_ application model to declaratively describe user interface's structure
* General notion of _project_ with specific file types, help system, preferences etc.
* IDE support for important general purpose languages like Java, https://marketplace.eclipse.org/content/pydev-python-ide-eclipse[Python], Ruby, C, Fortran, C++
* Support for creating textual and graphical DSLs (https://www.eclipse.org/Xtext[XText], https://www.eclipse.org/sirius[Sirius])
* Industry proven DSLs and code generators for data models and form based UIs via the https://www.eclipse.org/modeling/emf[_Eclipse Modeling Framework_] (EMF) providing:
* Industry proven DSLs and code generators for data models and UIs based on the https://www.eclipse.org/modeling/emf[_Eclipse Modeling Framework_] (EMF):
** https://www.eclipse.org/ecoretools[_Ecore_] for model driven generation of Java classes and persistence layers for XML or data bases
** https://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements[_EMF Forms_] for describing and generating form based UIs
** Mechanisms to adapt or extend data models and forms to special needs (e.g., we added quantities -- that is numbers _with units_ -- to Ecore and EMF Forms, a feature very important for parameter catalogs)
** https://www.eclipse.org/sirius/[_Eclipse Sirius_] for describing and generating graphical and form based UIs
** https://www.eclipse.org/Xtext[XText]: Support for creating textual DSLs.
** Mechanisms to adapt or extend data models and forms to specific needs (e.g., we added quantities -- that is numbers _with units_ -- to Ecore, a feature very important for parameter catalogs)
* Rich open source eco-system with lots of plugins and projects important for an urban simulation platform:
** model server for distributed access and work on Ecore models, including model comparison and migration (https://projects.eclipse.org/projects/modeling.emf.cdo[CDO], https://www.eclipse.org/emf/compare[EMFCompare])
** a https://pyecore.readthedocs.io/en/latest[Python implementation of Ecore]
** GIS: storage, processing, and visualization of geographical data (list of projects under the umbrella https://projects.eclipse.org/projects/locationtech[LocationTech], e.g. user-friendly desktop internet GIS http://udig.refractions.net[uDig])
** workbench for traffic simulation (https://www.eclipse.org/sumo[SUMO])
** traffic simulation (https://www.eclipse.org/sumo[SUMO])
** spatial multi-agent-simulation (https://gama-platform.github.io/wiki/Home[GAMA-Platform])
** scientific workflows (https://projects.eclipse.org/projects/science.triquetrum[Triquetrum])
** visualizations (https://www.eclipse.org/nebula/widgets/visualization/visualization.php[Nebula])
......
......@@ -21,8 +21,8 @@ First time users of Eclipse better understand the following concepts.
An Eclipse package is an Eclipse distribution dedicated to a specific type of task.footnote:[The notion of an Eclipse package has nothing to do with Java packages.]
A list of packages is available at https://www.eclipse.org/downloads/packages/[eclipse.org].
Beside others it contains _Eclipse IDE for Java Developers_, _Eclipse IDE for Scientific Computing_, and the package we will use: _Eclipse Modeling Tools_.
Note that third parties offer many other packages, e.g. _GAMA_ for multi-agent-simulation or _Obeo Designer Community_ for creating Sirius diagram editors.
Beside others it contains _Eclipse IDE for Java Developers_, _Eclipse IDE for Scientific Computing_, and _Eclipse Modeling Tools_.
Note that third parties offer many other packages, e.g. _GAMA_ for multi-agent-simulation or _Obeo Designer Community_ for creating diagram and form editors. This is the package we will use later.
[NOTE]
====
......@@ -90,14 +90,12 @@ That way, we can follow the convention that local Git repositories should all be
`<userhome>/git`.
=== Setup Eclipse Modeling Tools
=== Setup Obeo Designer
.Install Java
Eclipse runs on 64-bit versions of Windows, Linux, and macOS and requires an according Java Development Kit (JDK), version 11 or higher, to be installed on your machine.
Even if such JDK already exists, please download OpenJDK, version *16* or newer for your operating system from https://adoptopenjdk.net[AdoptOpenJDK].
footnote:[AdoptOpenJDK recently joined the Eclipse foundation and soon will change its name to _Adoptium_ for legal reasons.]
Choose `HotSpot` as Java Virtual Machine.
Even if such JDK is already installed on your machine, please download the OpenJDK version *16* or newer for your operating system from https://adoptium.net[Adoptium].
Installation process is straight forward, but you can also find links to exhaustive instructions for your operating system.
New Java versions appear every six months, so one could tend to stick with older version 11 that comes with long time support (LTE) until next LTE version 17 arrives in autumn 2021.
......@@ -105,50 +103,79 @@ However, actual version 16 conforms to the latest security measures built into m
Note that different versions of Java coexist peacefully.
.Install Eclipse Modeling Tools
Now its time to download and install the correct Eclipse package _Eclipse Modeling Tools_, version 2021-06 or newer.
Please go to https://www.eclipse.org/downloads/packages[Eclipse download page for packages].
On this page you may see _"Try the Eclipse Installer"_ or similar.
Do *not* follow this advice, since we want more control over what versions of Java and Eclipse shall be installed.
Instead, look for package _Eclipse Modeling Tools_ and follow the link for your operating system on the right:
.Install Obeo Designer, Community Edition
.Download links for Eclipse Modeling Tools package
image::EclipseDownload.gif[EclipseDownload, role="thumb"]
Finally, you can click on `Download` and wait for the 400 something MB package to arrive.
Our graphical and form based modeling tools, e.g. Insel 9.0 and Parameter Catalogs, run on top of https://www.obeodesigner.com/en/product/sirius[Eclipse Sirius].
Technically, the Eclipse Sirius project provides a set of open source features and plugins that can be added to any Eclipse package to transform it into a very flexible modeling workbench.
Instead of adding these software components manually, we start with a pre-configured Eclipse package named _Obeo Designer_.
Please download and install the latest version (11.5 at the time of writing) available at https://www.obeodesigner.com/en/download[Download Obeo Designer Community].
[NOTE]
====
Depending on the operating system, several security dialogs have to be acknowledged during installation and first launch of Eclipse.
Depending on the operating system, several security dialogs have to be acknowledged during installation and first launch of Obeo Designer.
====
After the 400 something MB package has arrived, unzip the downloaded file and move the resulting application named `ObeoDesigner-Community` into `Applications` on macOS, `Programs` on Windows, or similar on Linux.
[NOTE]
====
Special installation note for macOS: As Obeo Designer currently is not code-signed, macOS consideres it as damaged. To work around this security feature, remove the quarantine status of the program like so:
The downloaded installation file contains the application simply named `Eclipse` ready to be copied into `Applications` on macOS or be installed in `Programs` on Windows.
Since later you may add other Eclipse packages -- or different versions of the same package -- I suggest to rename the application more significantly to `EclipseModeling2106` or similar.
. Open a terminal in the folder containing the .app file
. Execute: xattr -d com.apple.quarantine ObeoDesigner-Community.app
. Double click the app to start.
====
After installation has finished launch Eclipse for the first time and you will see a dialog for choosing a new empty directory as its workspace.
After installation has finished launch the application for the first time and you will see a dialog for choosing a new empty directory as its workspace.
.Initial Dialog to Choose a Workspace Directory
image::SelectWorkspaceDirectory.gif[SelectWorkspaceDirectory, 500, role="thumb"]
Again, more workspaces might come into existence later, so replace the proposed generic directory path and name with a more specific one, e.g.`EclipseModelingWS`.
The Eclipse main window appears with a Welcome Screen open.
It contains links to exhaustive documentation on concept, features and usage of Eclipse that might be of interest later, especially:
More workspaces might come into existence later, so replace the proposed generic directory path and name with a more specific one, e.g.`ObeoDesignerWS`.
The main window appears with a Welcome Screen open.
Especially under `Documentation` you will find exhaustive documentation on Eclipse that might be of interest later, e.g.:
* Overview
** Workbench basics
*** Concepts: features, resources, perspectives, views, editors
*** Opening perspectives and views
*** Installing new software manually
** Team support with Git
* Learn how to use the Ecore diagram editor
* Launch the Eclipse Marketplace
** Workbench User Guide
*** Concepts: perspectives, projects, views, editors, features, resources, ...
*** Tasks: Working with perspectives, views and editors, installing new software. ...
** EGit Documentation
*** Git for Eclipse Users
*** EGit User Guide
** Ecore Tools User Manual: Learn how to use the Ecore diagram editor.
For now, you can dismiss the welcome screen. It can be opened anytime by executing `Help -> Welcome`.
Now you should see the initial window layout with _Model Explorer_ and _Outline_ on the left and a big empty editing area to the right with a _Properties_ view below.
[[quantity-plug-ins]]
.Add Plug-ins to deal with Quantities and Units
Parameter catalogs should be able to represent quantities, not just bare numbers.
See https://onlinelibrary.wiley.com/doi/full/10.1002/spe.2926[Unit of measurement libraries, their popularity and suitability] for a systematic account of open source solutions in the this area.
Java provides an extensive framework to deal with quantities and their units defined in https://docs.google.com/document/d/12KhosAFriGCczBs6gwtJJDfg_QlANT92_lhxUWO2gCY/edit#heading=h.6698n7erex5o[Java Specification Request (JSR) 385].
The reference implementation for this framework is https://unitsofmeasurement.github.io/indriya/[Indriya]. Demos of its usage can be found at https://unitsofmeasurement.github.io/uom-demos/[].
To make Indriya available for use in Ecore data models, the author has created two plug-ins that can easily be added to Eclipse. To do so, open dialog `Help -> Install New Software...` and enter site `https://transfer.hft-stuttgart.de/pages/neqmodplus/indriya-p2/release_target_211/` like depicted below.
.Install Plug-in from Specific Update Site
image::AddUpdateSite.png[Install Plug-in , 500, role="thumb"]
Select Indriya plug-in, press `Next >` and acknowledge all following dialogs, including security warnings.
Do the same for the City Units plug-in available at site `https://transfer.hft-stuttgart.de/pages/neqmodplus/de.hft-stuttgart.cityunits/release_target_110/`
Finally, restart Eclipse to complete plug-in installation.
While the first plug-in installs Indriya, the second plug-in adds some specific units for urban simulation and Ecore types used for modeling quantities as attributes of classes.
Now you should see the initial layout of Eclipse with _Model Explorer_ and _Outline_ on the left and a big empty editing area to the right with a _Properties_ view below.
=== Modeling Parameter Catalogs for Simulation with Ecore
=== Exercise: Modeling a Parameter Catalog with Ecore
Before we start working on real catalog projects hosted in a Git repository in the next section, let us first create a demo project for playing around and learning basic modeling skills.
[quote,Phil Karlton / N.N.]
____
There are two hard problems in computer science: cache invalidation, naming things, and off-by-1 errors.
......@@ -184,14 +211,15 @@ It consists of a global unique domain name and a path to the project, unique wit
Use the names of example _Demo Catalog_ to create your first Ecore modeling project:
. Execute `File -> New -> Ecore Modeling Project` from main menu -- not `Modeling Project`!
. Name the project `org.example.democatalog.model` and uncheck `Use default location` so that the new project is *not* stored in workspace but a different directory you create/choose, then click `Next >`
. Provide `democatalog` as main Java package name, uncheck `Use default namespace parameter` and provide `http://example.org/democatalog` as _Ns URI_ and `democat` as _Ns prefix_
. Name the project `org.example.democatalog.model` and uncheck _Use default location_ so that the new project is *not* stored in workspace but a different directory you create/choose, then click `Next >`
. Provide `democatalog` as main Java package name, uncheck _Use default namespace parameter_ and provide `http://example.org/democatalog` as _Ns URI_ and `democat` as _Ns prefix_
. Click `Finish`.
Eclipse should look like below with an new empty graphical Ecore diagram editor opened.
The diagram is automatically named `democatalog` after the package name for the Java classes that will be generated from it (provided above).
The _Model Explorer_ shows the contents of the new Ecore modeling project.
[[fig-ecore-modeling-project]]
.New Ecore Modeling Project
image::DemoCatalogEmpty.png[DemoCatalogEmpty, role="thumb"]
......@@ -210,6 +238,7 @@ Technically, everything is in place now to begin modeling the data that the proj
Except ... understanding the basics of object-oriented modeling would be helpful.
This is why developers should support domain experts at this stage.
.Model Data with Class Diagrams
Ecore diagrams are simplified UML class diagrams.
......@@ -428,6 +457,7 @@ We employ this feature later to enable data models with physical units and quant
There exists one other means to define the values an attribute can take, namely enumerations of distinct literals. Take _Monday_, _Tuesday_, _Wednesday_, ... as a typical example for representing weekdays.
In our example data model you'll find one _Enumeration_ named `BoilerType` with values `LowTemperature` and `Condensing`.
.Homework
The next section deals with generation of Java code from data models. To have more to play with, please implement our example model in Ecore now.
......@@ -456,7 +486,7 @@ Two more tips and you are ready to rock and roll! -- At least with your homework
[TIP]
====
An exhaustive user manual for Ecore diagram editor is available. Execute `Help -> Welcome` and follow link `Learn how to use the diagram editor`.
An exhaustive user manual for Ecore diagram editor is available at `Help -> Welcome -> Documentation -> EcoreTools User Manual`.
====
[TIP]
......@@ -466,45 +496,38 @@ Open this kind of editor via command `Open With -> Ecore Editor` from the contex
Note that Eclipse synchronizes different editors of the same content automatically.
====
That's it for the data modeling part. By now, your Ecore model should look like this:
=== Generation of Java Code from Data Model
By now, your Ecore model should look like this:
[[fig-example-model]]
.Example Model (Homework)
image::Homework.png[Homework, role="thumb"]
Let us bring the model to life, that is, generate code from it that creates, reads, updates, and deletes concrete data objects of modeled classes in computers.
I would like to tell you that this is done with just one click but, actually, you need two or three:
. Make sure all files are saved (`File -> Save All`)
. Execute `Generate -> Model Code` from the context menu of Ecore editor `democatalog`
. Execute `Generate -> Edit Code` from the same context menu
=== Making an Application to Create and Edit Data
[WARNING]
====
Please do *not* execute `Generate -> All` or `Generate -> Editor Code`.
In this section you will get a glimpse on how to create an application to create and edit data conforming to the Ecore data model of our demo parameters catalog.
image::GenerateMenu.png[GeneratedClasses, 260, role="thumb"]
Topics described here (and much more) are discussed in this https://wiki.eclipse.org/Sirius/Tutorials/StarterTutorial/[Sirius Starter Tutorial].
This would create code for a simple user interface, but we use more advanced EMF Forms for that later.
If, by mistake, project `org.example.democatalog.editor` was created, just delete it from _Model Explorer_ and do not forget to check `Delete project contents on disk` in confirmation dialog.
If you are less interested in the details of UI creation, but more in working on already existing parameter catalog software and data, you may skip this section for now and proceed with <<Working with Git Hosted Catalogs>>.
====
.Generation of Java Code from Data Model
Let us bring the Ecore data model to life, that is, generate code from it that allows to create, read, update, and delete (CRUD) concrete data objects of modeled classes in computers:
. Make sure all files are saved (`File -> Save All`)
. Execute `Generate -> All` from the context menu of Ecore editor `democatalog`
[.float-group]
--
.Generated Classes
image::GeneratedClasses.png[GeneratedClasses, 260, float="right", role="thumb"]
`Generate -> Model Code` creates classes that represent the modeled data in code. These classes are located in three packages under directory `src-gen` in `org.example.democatalog.model`.
`Generate -> Edit Code` creates a whole new Eclipse project named `org.example.democatalog.edit`, again with generated classes under directory `src-gen`.
`Generate -> All` creates classes that represent the modeled data in code at first. These classes are located in three packages under directory `src-gen` in `org.example.democatalog.model`. Then, the command generates `Edit Code` and `Editor Code` within two new Eclipse projects named `org.example.democatalog.edit` and `org.example.democatalog.editor`, again with generated classes in `src-gen`.
You may have a look at some Java classes for curiosity by double clicking at them in _Model Explorer_. There is no point in trying to understand the code in detail, but observe token `@generated` 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.
Sometimes it maybe required to manually adapt generated code -- after all our concern is "low code", not "no code" development. In that case, we will replace `@generated` by `@generated NOT` to prevent code regeneration.
Sometimes it is required to manually adapt generated code -- after all our concern is "low code", not "no code" development. In that case, we will replace `@generated` by `@generated NOT` to prevent code regeneration of the respective item.
After code generation, you may have noticed some warnings showed up in view _Problems_.
......@@ -515,265 +538,254 @@ In general, it is highly recommended to resolve warnings, and errors of course,
--
=== Generation and Tweaking of User Interface
.Create a Prototype Application for Data Editing and UI Design
In this section you will learn how to generate and tweak a CRUD user interface based on Ecore data model and Java classes created for our demo parameters catalog above. Topics described here are discussed in more detail in tutorial https://eclipsesource.com/blogs/tutorials/getting-started-with-EMF-Forms/[Getting started with EMF Forms].
To find out what user interface controls and layouts are provided by this framework have a look at https://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/[EMF Forms – View Model Elements]. _EMF Forms_ is already part of package _Eclipse Modeling Tools_, so we can create a third Eclipse project/plugin that implements a user interface for editing catalog data without further ado:
Firstly, launch a new instance of the running _Obeo Designer_ application:
. In the _Model Explorer_ execute `EMF Forms -> Create View Model Project` from context menu over `democatalog.ecore`
. Leave project name `org.example.democatalog.viewmodel` as is but uncheck `Use default location` -- as we always do -- and browse to the directory containing `org.example.democatalog.model`
. Click `Next >` and select `EnergyComponentsCatalog` as data element we want to create a user interface for
. Leave `Fill view model with default layout` checked and click `Finish`.
. Execute `Run -> Run Configurations...` from the main menu and double click on _Eclipse Application_ to get a _New_configuration_. You may want to rename _New_configuration_ to _DemoCatalog_ or the like.
. Press `Run` to start the new Eclipse application that is basically a copy of your running _Obeo Designer_ application but with a different workspace.
. In the new application window close the welcome screen and open the Sirius perspective using the suited button in the top right corner of the main window. This perspective provides specific Sirius menus and new project types.
According to these inputs a new project is created with file `EnergyComponentsCatalog.view` under directory `viewmodels`.
This file opens automatically in a special _View Editor_.
Secondly, create a project that will contain catalog data (remember Eclipse can only handle files that are part of a project):
.New View Model
image::ViewModel.png[ViewModel1, role="thumb"]
. From main menu execute `File -> New -> Modeling Project` -- not `Ecore Modeling Project`!
. Name the project `org.example.democatalog.data` and uncheck _Use default location_ so that the new project -- again -- is *not* stored in workspace but a different directory you create/choose, usually a directory named like the project and sitting side by side to the model, edit and editor project directories created above.
. Click `Finish`.
Like the *data* of our catalog are modeled as Ecore file using a dedicated graphical editor, so will our catalog’s *user interface* be modeled in `.view` files, again using a special editor.
Thirdly, create a first XML file for catalog data:
Since we opted for `Fill view model with default layout` the catalog's UI is filled initially with default controls for all data items assigned to Ecore type `EnergyComponentsCatalog` like a string control for `author` or list controls for `boilers`, `chps`, and so on.
. From main menu execute `File -> New -> Other...` and type `demo` into search field _Wizards:_
. Select `Example EMF Model Creation Wizards -> DemoCatalog Model` and click `Next >`
. Select `org.example.democatalog.data` as parent directory and name the data file `First.democatalog`
. Click `Next >` and choose `Energy Component Catalog` as the root data object that will be created initially
. Click `Finish`.
See red arrow in the above screen-shot?
It points to a button that opens a functional preview of the modeled user interface.
A new entry named _First.democatalog_ should appear in the _Model Explorer_.
Double-click it and a *generic* editor will open.
In principle, one could use this editor to add new data to the catalog via `New Child >` in the context menu over entry `Energy Component Catalog`.
Data of a selected entry can be edited in view _Properties_ that is generic, too.
.User Interface Preview
image::ViewEditorPreview.png[ViewModel1, 500, role="thumb"]
[[add-example-data]]Please add two or three boilers this way to have some data to play with below.
[TIP]
====
Double click on tab _EMF Forms Preview_ to enlarge view for better handling -- double click again to get back.
When done, you may save _First.democatalog_ so that after closing the application data will reappear if it is opened again as described above.
Enable auto refresh mode image:ViewModelAutomaticRefresh.gif[ViewModelAutomaticRefresh, 40] to let each change in the view model instantly be reflected in the preview.
The generic editors don't get as far. Usually, one would like to have tables, custom property sheets, input validation, and more. Well, Sirius is all about creating nice graphical and form-based editors for data models specified in Ecore. To do this we need one more Eclipse project.
Given your screen is big enough, you may want to dock-out the preview by dragging tab _EMF Forms Preview_ out of Eclipse's main window.
Seeing editor and preview side by side is a great way to explore the possibilities of view models.
====
Red input field and exclamation mark in the preview signal missing or inconsistent data.
Ecore data model specifies attribute `author` with a lower bound of one, meaning it is a mandatory attribute.
As soon as an author's name is provided, the error indication disappears.
This is what _functional_ preview means.
You can even create new boilers or other objects in lists provided, with all forms created "automagically" with respect to our underlying Ecore data model.
Of course, such automatic approach has its limits.
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).
.UI Design Project
How should a better UI look and feel like?
Like the *data* of our catalog is modeled as an Ecore file using a dedicated graphical editor, so will the *user interface* (tables, trees, diagrams, property views) be modeled in a Sirius `.odesign` file that lives in a special Eclipse project that we create while still in the (second) Eclipse application that hosts the data:
If there are many lists (types) of entities -- the normal case for parameter catalogs -- users should select what list they want to work with by selecting it from a list or tree view that is always visible, the _master view_.
Once a type is selected in the master view, a table with all objects of this list/type shall appear sidelong in a _detail view_, ready for editing.
. Execute `File -> New -> ViewPoint Specification Project`
. Name the project `org.example.democatalog.design`, uncheck _Use default location_ as always and create/choose a directory with the same name as the project besides to the model, edit, editor, and data project directories
. Click `Finish`.
In _EMF Forms_ master-detail-views can be modeled either with _Categorization_ or _Tree Master Detail_ UI components.
The latter not only allows to edit information displayed in the detail view, but also the tree of elements in the master view.
Opposed to that, a _Categorization_ presents a fixed hierarchy of elements to choose from.
This is exactly what we need as there are only a fixed number of types of objects to be edited in a parameters catalog.
A special editor for file `democatalog.odesign` appears automatically.
In it select `MyViewpoint` and rename it in _Properties_ to `Catalog`.
A viewpoint provides a set of representations (tables, trees, diagrams, property views) that end-users can instantiate.
==== Adding Tables to the UI
.Adding a Table to the UI
[.float-group]
--
.Delete default list controls
image::ViewModelDeleteControls.gif[ViewModelDeleteControls, 300, float="right", role="thumb"]
In what follows, we work with the _democatalog.odesign_ editor.
Say, we want to add a table for boilers to the UI:
But first, we replace the default controls for lists of boilers, chps, and so on by tables. As shown here, select all list controls in the view model and execute `Delete` from context menu. Refresh _View Editor Preview_ to verify that only field `Author*` is left.
--
. From context menu over viewpoint _Catalogs_ execute `New Representation -> Edition Table Description` to create a new description that is automatically selected and shown in view _Properties_
. To connect the table with its data model, choose tab _Metamodels_ in _Properties_, click on _Add from registry_ and select `http://example.org/democatalog`.
. Go back to tab _General_ and enter `Boiler_table` as _Id_.
. In the green input field _Domain Class_ press key ctrl-space and choose `democatalog::EnergyComponentCatalog` from the list.
[.float-group]
--
.Create Table Control
image::ViewModelCreateTable.gif[ViewModelCreateTable, 300, float="right", role="thumb"]
Next, create a table that shall display all boilers in a catalog:
Select `EnergyComponentsCatalog`, activate context menu and choose `TableControl` from the list of available UI elements.
(EnergyComponentsCatalog represents the root view of the UI and, as such, accepts quite a lot of different UI components as child components.)
Entry `TableControl` was inserted into the list of interface elements below `Control author`.
Checking updated preview reveals no table but a message basically saying that a reference to the domain model is missing, in other words: _EMF Forms_ does not know yet what data to present in table.
Click on entry `TableControl` to see its details.
A red exclamation mark indicates the missing `Domain Model Reference*`.
Click on image:ButtonLinkPlus.gif[ButtonLinkPlus, 40] and be ready to chase a sequence of dialogs:
--
From the above _Boiler_tables_ know that they present data conforming to our `http://example.org/democatalog` data model and that boiler data are found as part -- or "below" -- the Energy Component Catalog.
. Click on another image:ButtonLinkPlus.gif[ButtonLinkPlus, 40] in dialog `Configure TableDomainModelReference`
Next, specify the lines to be displayed in the table:
. In wizard `New Reference Element` select `model -> FeaturePathDomainModelReference` and click `Next >`
. From context menu over _Boiler_table_ create `New Table Element -> Line`
. In tab _General_ in _Properties_, enter `Boiler_line` as _Id_:
. In the green input field _Domain Class_ press key ctrl-space and choose `democatalog::Boiler` from the list.
. Click `Link Domain Model EFeature` and in appearing pop-up list choose reference to list of objects you want to edit in the table, e.g. `boilers`; confirm with `OK` safely ignoring warning about missing `PropertyDescriptor`.
And now for the columns:
. `Finish` wizard `New Reference Element`
. From context menu over _Boiler_table_ create `New Table Element -> Feature Column`
. In tab _General_ in _Properties_, enter `Name_col` as _Id_:
. In the green input field _Feature Name_ press key ctrl-space and choose `modelName` from the list
. Repeat the above steps for `boilerType` and `installedThermalPower` accordingly.
. `Finish` dialog `Configure TableDomainModelReference`.
After addition of some foreground and background styles, the design of the UI looks like this.
This was some work, but as reward we get a fully specified table control in _View Editor_ that "translates" into a preview where we can create, read, update, and delete boilers.
.Boiler Tables Design
image::BoilerTableDesign.png[BoilerTableAndProperties, role="thumb"]
.Table for Boilers
image::ViewModelWithTable.gif[ViewModelWithTable.gif, role="thumb"]
Save it!
Moreover, clicking at a table header sorts all objects in it (rows) according to the values in this column.
Column widths can adapted, too.
To create an instance of the table just designed double-click on `representations.aird` in the data project:
[.float-group]
--
.Modify Table Control
image::ViewModelTweakTable.gif[ViewModelTweakTable, 300, float="right", role="thumb"]
.Administration of Model and Representations
image::BoilerRepresentations.png[BoilerRepresentations, role="thumb"]
Table UIs can be tweaked in many ways, e.g. selection and sequence of columns can be declared via list `Column Domain Model References`. To fill this list with defaults, execute `Generate Columns` from table control's context menu. Reorder them as you like or delete columns that are not important to the user.
In case viewpoint `Catalogs` under header _Representations_ is still disabled as shown above, select it and press `Enable`. Then:
Notice here an important overall feature of _EMF Forms_: If something is left unspecified, be it the view model for an Ecore object type or the specification of table columns, _EMF Forms_ will always find a default solution! Applied to columns specification this means we get default columns automatically back in the moment the last column is removed from list `Column Domain Model References`.
. Press `New...` to open a _Create Representation Wizard_
. Choose `Boiler_table` and click `Next >`
. Select `Energy Components Catalog` as data source and click `Finish`
. You are prompted for the new tables name: simply confirm the proposed name with `OK`.
If explicit column specifications are present further configurations can be added to a table control from its context menu, e.g. initial column widths or read-only status of columns. See https://eclipsesource.com/de/blogs/2018/01/31/emf-forms-1-15-0-feature-enhanced-table-renderer/[here] for details.
[.float-group]
--
.Boiler Table with Properties View
image::BoilerTableAndProperties.png[BoilerTableAndProperties, 350, float="right", role="thumb"]
By default only attributes are displayed and directly editable in tables while references to other objects -- in our case the reference to a manufacturer -- are not.
The screenshot on the right shows _new Boiler_table_ with just two entries. Details of the selected entry are editable in _Properties_.
[.float-group]
Is your table empty? In this case you probably did not add example data using the default editor as described xref:add-example-data[above].
But you can add new Boilers any time via command `New child -> Boiler` in the context menu of `Energy Component Catalog` in section _Models_ of the representations editor depicted above.
--
.Default Panel for Boilers
image::ViewModelWithPanel.gif[ViewModelWithPanel, 300, float="right", role="thumb"]
To get the default (_sic!_) editing panel for an selected table row, in _View Editor_ just set `Detail Editing*` from `None` to `WithPanel`, *press _Tab_*, and save. For boilers, _EMF Forms_ will create the editing panel shown here. Regardless wether users edit data in the panel or directly in the table -- both will stay in sync any time.
--
Note, that you can delete boilers from the table's context menu, but currently there is no button or menu entry to create new boilers.
Such a command would have to be described in `democatalog.odesign` first.
[WARNING]
====
_View editor_ exhibits an irritating behavior: With preview auto-refresh turned on, any change in the details view is reflected instantly in the preview, even without saving the form or leaving the edited field.
Be aware that applications with UI design and example data launched from _Obeo Designer_ are meant to be prototypes for the final software only.
In fact, any saved changes in the design file are instantly reflected in the UI.
During refinement of model and UI, data sets can be created, edited, and tested for usability without the need to built deployable software component. (On deployment, see parts _Accessing and Using Parameter Catalogs_ and _Build (Parameter Catalog) Applications with Eclipse Tycho_ below.)
On the other hand, *saving* an updated view editor only takes into account edited fields after they have lost focus, e.g. by pressing _Tab_ key or clicking with the mouse into another field.
So, saving a form before the focus has shifted from the last edited field won't honor this edit, that is you won't necessarily get what you see.
====
Iteratively the UI design must be adapted to changes in data model, although some changes are automatically reflected in the generated UI, at least for default forms.
Data model changes can also can render existing XML data incompatible. There are tools for data migration, but for now, recreation of test data or manual editing of XML file is the way to go.
One last thing: Enter `boilers` as name for the table control so we can distinguish it from the other four table controls to come.
As you may imagine, this is just the tip of the iceberg of what can be done with the Sirius framework for designing graphical UIs.
While domain experts should be capable to create and to refine Ecore data models, the UI design of a parameter catalogs will mainly be done by software developers.
However, since the UI is not implemented by program code, but a description in an `.odesign` file, domain experts can easily enhance and tweak it, e.g. by adding or reordering columns of a table.
Yes! ... Please repeat above procedure to create table controls for chps, solar panels, inverters and manufacturers, too. I did this in about 3 minutes. ;-)
=== Working with Git Hosted Parameter Catalogs
==== Master-Detail View with Categories
Ecore data models and Sirius based UI design are used to create parameter catalog software hosted in Git repositories.
To work with these, all you need is Jave 16 and the _Obeo Designer_ with plug-ins for handling of Units installed (see <<Setup Obeo Designer>> for details.)
In last section we improved our catalog's UI by replacing simple object lists by tables that can be sorted, customized and edited inline as well as in an associated panel.
Alas, instead a list of lists we have got an even bigger list of tables.
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.
.Import Modeling Projects from Git
[.float-group]
--
.Category Tree
image::ViewModelCatgorization1.gif[ViewModelCatgorization1, 180, float="right", role="thumb"]
To connect to a Git repository open the _Import Projects from Git_ wizard via `File -> Import... -> Git -> Projects from Git -> Clone URI`. Then:
Add a _Categorization_ view to the list of UI elements in _View Editor_ by selecting `EnergyComponentsCatalog` and choose `Categorization` from its contect menu.
. Copy the URI of the git repository into the according input field, e.g.:
https://rs-loy-gitlab.concordia.ca/parameter-catalogs-ecore/greenery-catalog.git and provide your credentials in fields _User_ and _Password_. *Tick check box _Store in Secure Store_ and provide a master password if required!* If you don't, be prepared to be prompted for your credentials over and over again
. Click `Next >` and select a repository branch to check out, usually _master_
. Click `Next >` and choose the directory on your file system where to store the repository, e.g.
`<user home>/git/greenery-catalog`. Here, we adhere to the convention is to have all git repositories stored in `<user home>/git/`
. After data transfer has completed, the wizard offers to _Import existing Eclipse projects_. Click `Next >` and select the project with suffix `.model`, `.edit` and `.editor` for import, e.g. `ca.concordia.usp.greenerycatalog.model` etc.
. Click `Finish`.
Now add two `Composite Category` elements and one `Leaf Category` to `Categorization` from according context menu. This gives us three top level entries in the hierarchy.
Now you can work on the data model like you did with the demo catalog. Find it under `model` in `ca.concordia.usp.greenerycatalog.model` (compare fig. <<fig-ecore-modeling-project>>).
In the same way add two `Leaf Category` elements to each `Composite Category` resulting in the hierarchy depicted here.
--
[.float-group]
--
.Completed View Model
image::ViewModelCatgorization2.gif[ViewModelCatgorization2, 260, float="right", role="thumb"]
.Catalog Data and UI Design
This screen shot shows the view model of our UI when finished. To get there:
For data inspection and editing -- and possibly modifying the UI -- launch a new instance of the running Obeo Designer application by executing `Run -> Run Configurations...`, double-click on _Eclipse Application_ to get a _New_configuration_ and give it a meaningful name (e.g. _GreeneryCatalog_).
Then, press `Run` to start the application, close the welcome screen and open the Sirius perspective using the suited button in the top right corner of the main window.
. Select UI element `Categorization` and rename it to `Categories`
[TIP]
====
Simply reuse the _Run Configuration_ specified above, when starting the application next time!
====
. Rename composite and leaf categories as depicted here
Now, import the projects that contain data and UI design, respectively:
. Drag all table controls one by one into the suited leaf category
. Execute `File -> Import...` for the import wizard
. Browse to the directory containing the projects (e.g. `<user home>/git/greenery-catalog`) and check just the projects with suffixes `.data` and `.design` for import, e.g. `ca.concordia.usp.greenerycatalog.data` , `ca.concordia.usp.greenerycatalog.design`
. Click `Finish`.
. Confirm master-detail view works as expected in the preview.
When closing the application, it asks to store or dismiss any changes in data or UI design. You can also save these any time with `File -> Save All`.
--
[IMPORTANT]
====
The UI hierarchy to access tables for entity types is independent, and usually will differ, from aggregation and inheritance hierarchies present in Ecore data model (compare fig. <<fig-example-model, Example Model>>).
====
.Declare Quantities
Note that _EMF Forms Preview_ provides these buttons image:ViewModelPersistence.gif[PreviewPersistanceButtons, 68] to clear, load and store edited data.
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 -- see parts _Accessing and Using Parameter Catalogs_ and _Build (Parameter Catalog) Applications with Eclipse Tycho_ below.
For simplicity, the demo catalog only used built-in attribute types like `EDouble`, `EInt`, or `EString`.
On the other hand, real-world parameter catalogs use a custom type named _Quantity_ that combines a numerical (double) value with a unit.
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 _View Editor_.
Symbols for defining units follow SI and other standards, including decimal prefixes like `m` for Milli or `G` for Giga as well as derived units, that is: `mV`, `GV` or `kW·h/m³` are all valid unit definitions.
This is all documented well in the resources mentioned in section xref:quantity-plug-ins[Add Plug-ins to deal with Quantities and Units] above, but for convenience, a table with valid units, including some specific units for urban simulation, is compiled in link:UnitsExamples.md[].
Changes in data model also can make existing XML data incompatible. There are tools for data migration, but for now, recreation of test data or manual editing of XML file is the way to go.
To set an attribute's type to _Quantity_ just select it in the model, choose tab _Semantic_ in view _Properties_, click on _EType_ and select _Quantity_ from the list of available types.
In the figure below, this was already done.
.Quantity Default Values
image::QuantityDefaultValues.png[QuantityDefaultValues , 400, role="thumb"]
=== Add Units to the Mix
The red arrow shows how a unit is defined in field _Default Value Literal_. E.g., attribute `densityOfDrySoil` has unit `kg/m³` assigned to it.
As mentioned earlier, parameter catalogs should be able to represent quantities, not just bare numbers.
See https://onlinelibrary.wiley.com/doi/full/10.1002/spe.2926[Unit of measurement libraries, their popularity and suitability] for a systematic account of open source solutions in the this area.
Note that, for this attribute, no numerical default value is given.
In contrast, `conductivityOfDrySoil` is given a unit and a default numerical value: `1.0 W/(m*K)`.
Java provides an extensive framework to deal with quantities and their units defined in https://docs.google.com/document/d/12KhosAFriGCczBs6gwtJJDfg_QlANT92_lhxUWO2gCY/edit#heading=h.6698n7erex5o[Java Specification Request (JSR) 385].
The reference implementation for this framework is https://unitsofmeasurement.github.io/indriya/[Indriya]. Demos of its usage can be found at https://unitsofmeasurement.github.io/uom-demos/[].
[IMPORTANT]
====
The unit of a _Quantity_ is definied by the sub-string that follows the first space character in the string given in _Default Value Literal_. The sub-string before that space is interpreted as default numerical value of the _Quantity_.
====
To make Indriya available Ecore data models and EMF Forms, the author has created two plug-ins that can easily be added to Eclipse. To do so, open dialog `Help -> Install New Software...` and enter site `https://transfer.hft-stuttgart.de/pages/neqmodplus/indriya-p2/release_target_211/` like depicted below.
The rules for how a _Quantity_ default value is converted to its unit and default (initial) numerical value are very "forgiving":
.Install Plug-in from Specific Update Site
image::AddUpdateSite.png[Install Plug-in , 500, role="thumb"]
* If no unit is given or it cannot be parsed to a valid unit, it will be regarded as _dimensionless_. E.g., index values, fractions and percentages are dimensionless quantities by purpose. While units may be displayed in the UI like `[kg]`, a dimensionless quantity will show up as `[]`, that is as the empty string.
* If no numerical default value is present, then the numerical value is regarded as undefined.
* You may choose to specify a quantity as dimensionless and without numeric default by leaving field _Default Value Literal_ empty (or provide some non-sensical string).
Select Indriya plug-in, press `Next >` and acknowledge all following dialogs, including security warnings.
By this rules, any string -- including the empty string -- will be interpreted as a _Quantity_ somehow.
Do the same for the City Units plug-in available at site `https://transfer.hft-stuttgart.de/pages/neqmodplus/de.hft-stuttgart.cityunits/release_target_102/`
Finally, restart Eclipse to complete plug-in installation.
While the first plug-in installs Indriya, the second plug-in adds some specific units for urban simulation, EMF Forms editor fields for quantities, and Ecore types used for modeling quantities as attributes of classes.
.Declare Ranges
Make the new Ecore types `QuantityLong` and `QuantityDouble` available like so:
What is the point in declaring a dimensionless quantity for an attribute, anyway, instead of just declare it `EDouble` or `EInt`? The answer is that quantities can -- and most of the time will -- have a range of valid values defined.
. Open `Sample Ecore Model Editor` from the context menu over your Ecore model
. From the context menu in this editor, execute `Load Resource...` and then `Browse Target Platform Packages...`
. Select package `https://www.hftstuttgart.de/quantities` and confirm the addition of
`platform:/resource/de.hftstuttgart.cityunits.model/model/Quantities.ecore`.
.Set QuantityDouble Type
image::QuantityDoubleAttributeType.png[Install Plug-in, 300, float="right", role="thumb"]
[.float-group]
--
From now on, the new attribute types are available to model quantities with integer or floating point values as can be seen on the screenshot to the right.
.Quantity Range Definition
image::QuantityRange.png[Quantity Range , 250, float="right", role="thumb"]
Note here, that I also changed the default value from `0.0` to `0.0 V` to indicate that `maxDCVoltage` of inverters is given in *Volt*.
As you can see in the screenshot, the allowed range of attribute values is defined by a so called Ecore annotation named `UomQuantities`.
It provides the minimal and/or maximal value for the attribute, inclusively.
If a minimal or maximal value is omitted or invalid, the range is not limited on that side.
The symbols for defining units follow SI and other standards, including decimal prefixes like `m` for Milli or `G` for Giga as well as derived units, that is: `mV`, `GV` or `kW·h/m³` are all valid unit definitions. This is all documented well in the resources mentioned at the top of this section, but for convenience, a table with valid units, including some specific units for urban simulation, is compiled in link:UnitsExamples.md[].
Adding annotations to an attribute does not work in the graphical Ecore editor, but only with the standard editor that is opened by `Open With -> Sample Ecore Model Editor` from the context menu over the Ecore model file in _Model Explorer_.
--
If a unit symbol cannot be interpreted, this error is not already detected while generating and compiling code from model, but not before run time when the application tries to create the default value. In that case, you will see an error message like this:
In this editor, define a range like this:
.Error Message for Wrong Unit Definition
image::ErrorInUnitDefinition.png[Install Plug-in , 400, role="thumb"]
. From the context menu of the attribute of interest execute `New Child -> EAnnotation` and type `http://www.hft-stuttgart.de/UomQuantities` into field `Source` as depicted above
. From the context menu of the new `UomQuantities` annotation execute `New Child -> Details Entry` and provide values for keys `min` and `max`, respectively.
[WARNING]
[TIP]
====
Be told that each attribute of type `QuantityLong` or `QuantityDouble` has to have a unit defined in its `Default Value Literal`, even optional attributes that do not require a numerical value to be set. For these, too, the Ecore model must specify the unit to use.
In other words: If you do not want to preset an attribute with a numerical default, you can omit the numerical part, but still must provide the unit symbol as `Default Value Literal`, e.g. `V` will work as well as `1.0 V` but leaving the numeric value initially undefined.
The above typing is a one time effort only, since for defining further ranges, one simply copies an existing `UomQuantity` annotation from one attribute to another one and just edits the values for `min` and `max`.
====
One last technicality. *Before* code from an Ecore model with attributes of type `QuantityLong` or `QuantityDouble` can be generated correctly, we must tell Eclipse to reuse the corresponding generator model from the City Units plug-in:
If a catalog's end user tries to enter a number outside the given range in the UI, it will be adapted automatically to a valid value.
.Declare Tooltips for Help
. In package or project explorer find your generator model, e.g. `democatalog.genmodel` and execute `Reload...` from its context menu
. Choose `Ecore model`, press `Next >` and `Load` the model (again)
. `Next >` will open the page below. In section _Referenced Generator Models_ select the Quantities generator model as depicted and click on `Finish`.
Again, domain experts use a specific annotation to provide short help texts that inform end-users about an attribute's purpose, range and so on.
(These texts are displayed as tooltips when the users mouse stays on top of a question mark.)
And again, this is possible only in another kind of editor -- this time the editor that is opened on a `.genmodel` in _Model Explorer_.
Each Ecore model is accompanied by a `.genmodel` that lives besides the respective `.ecore` file. Open the required editor from its context menu with `Open With -> EMF Generator`.
.Add Reference to Imported Generator Model
image::ReferenceGeneratorModel.png[Install Plug-in , 500, role="thumb"]
The picture below shows the details. Just open the `.genmodel` tree until you can select the attribute that shall be documented.
If no generator model is available for selection, press button `Add...` to add it first (this only works if `QuantityLong` or `QuantityDouble` were used at least once in the Ecore model).
.Quantity Documentation
image::QuantityDocumentation.png[Quantity Documentation, role="thumb"]
In its `Properties` provide the tooltip in field `Edit -> Property Description`.
In this example, the same text was also copied to `Model -> Documentation`.
These texts are automatically inserted into comments in the generated program code, so that they
can inform a programmer that wants to use the generated API.
=== Summary
Congratulations on making it this far. What have we achieved?
We get to know the _Eclipse Modeling Tools_ IDE and created a graphical Ecore data model with one catalog class and five classes/types of domain objects therein.
We get to know the _Obeo Designer_ IDE and created a graphical Ecore data model with one catalog class and five classes/types of domain objects therein.
Classes have been defined by name, attributes, and relationships between them, often with cardinalities.
Whenever classes shared some attributes or relationships we factored these out into super classes.
An enumeration introduced a new attribute type as a set of named values.
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.
We implemented a prototypical user interface for this data with _Eclipse Sirius_ by providing a `.odesign` model for that very UI.
We reflected on a good user interface for this data and used _EMF Forms_ to model such an interface resulting in a full functional prototype.
Lastly, we enhanced Eclipse, Ecore and _EMF Forms_ with two plug-ins for modeling, editing and persisting physical quantities as numerical values with defined units.
Lastly, we started working on real world parameter catalogs hosted in git repositories and introduced _Quantity_ as a custom attribute type to model quantities as numerical values with defined units.
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