Commit 34dc0ca3 authored by Jens Ehlers's avatar Jens Ehlers
Browse files

Merge branch 'Lektorat'

parents a9a5490c 54aaaa1a
Pipeline #8051 passed with stage
in 1 minute and 10 seconds
......@@ -6,7 +6,7 @@
<p>Im Rahmen einer Anforderungsanalyse wird ermittelt, welche Daten für eine Anwendung relevant sind und erfasst werden müssen. Das Datenmodell speichert den Zustand einer Anwendung über ihren gesamten Lebenszyklus. In der Entwurfsphase wird üblicherweise mit Testdaten gearbeitet. Ab der Inbetriebnahme der Anwendung werden auf dem Produktivsystem dann die Echtdaten der Anwender erfasst. Da Anwendungen häufig über viele Jahre in Betrieb sind, wird es im Laufe der Zeit auch Änderungen am Datenmodell geben. In Abhängigkeit von der Stabilität der Anforderungen spielt also die Anpassungsmöglichkeit des Datenmodells eine mehr oder weniger wichtige Rolle. Da zur Laufzeit ständig Daten gelesen, geändert und hinzugefügt werden, ist es in Abhängigkeit der erwarteten Frequenz und Parallelität der Lese- und Schreibzugriffe auch erforderlich sich mit der Effizienz dieser Zugriffe zu beschäftigen.</p>
<p>Ein konzeptionelles Datenmodell ist noch nicht an eine konkrete Technologie zur Implementierung der Anwendung gebunden. Es ist eben rein konzeptioneller Entwurf, dessen Entstehung eine Tätigkeit intellektueller Modellbildung ist. In der Softwaretechnik hat sich hier die Unified Modelling Language (UML) als Standard etabliert. Wortwörtlich übersetzt ist die UML also eine vereinheitlichte Modellierungssprache. Aus Modellen in dieser Sprache ist es wiederum möglich, automatisiert Datenmodelle für konkrete Technologien abzuleiten. Das können z.B. die Datenstrukturen in Form von Klassen für eine objektorientierte Programmiersprache sein, wenn die Anwendung z.B. in Java, C# oder ähnlichen Sprachen programmiert werden soll. Es kann auch ein relationales Schema aus einem konzeptionellen Modell abgeleitet werden, wenn die Daten in einem relationalen Datenbanksystem wie MariaDB, PostgreSQL o.ä. gespeichert werden sollen.
<p>Ein konzeptionelles Datenmodell ist noch nicht an eine konkrete Technologie zur Implementierung der Anwendung gebunden. Es ist eben ein rein konzeptioneller Entwurf, dessen Entstehung eine Tätigkeit intellektueller Modellbildung ist. In der Softwaretechnik hat sich hier die Unified Modelling Language (UML) als Standard etabliert. Wortwörtlich übersetzt ist die UML also eine vereinheitlichte Modellierungssprache. Aus Modellen in dieser Sprache ist es wiederum möglich, automatisiert Datenmodelle für konkrete Technologien abzuleiten. Das können z.B. die Datenstrukturen in Form von Klassen für eine objektorientierte Programmiersprache sein, wenn die Anwendung z.B. in Java, C# oder ähnlichen Sprachen programmiert werden soll. Es kann auch ein relationales Schema aus einem konzeptionellen Modell abgeleitet werden, wenn die Daten in einem relationalen Datenbanksystem wie MariaDB, PostgreSQL o.ä. gespeichert werden sollen.
Es können natürlich auch Datenstrukturen für strukturierte Datenaustauschformate wie XML oder JSON abgeleitet werden.
Wichtig ist, dass das konzeptionelle Modell möglichst nicht an eine konkrete Technologie gekoppelt ist. Auch bei einem Wechsel der Technologie, z.B. auf eine nicht-objektorientierte Programmiersprache oder eine nicht-relationale Datenbank können die neuen Datenstrukturen über einen automatisierten Transformationsschritt aus dem Modell generiert werden.</p>
......@@ -32,7 +32,7 @@ Wichtig ist, dass das konzeptionelle Modell möglichst nicht an eine konkrete Te
<img src="media/uml_assoziation.png" style="width:400px">
<label>2 Klassen, die durch eine Assoziation verbunden sind</label>
<p>Zunächst wird eine Klasse als ein Rechteck mit 3 Abschnitten dargestellt. Im oberen Abschnitt steht der Name der Klasse. Im mittleren Abschnitt folgen alle Attribute der Klasse, die von einem Basisdatentyp sind. Die Typen der Attribute können angegeben werden oder versteckt werden. Im unteren Abschnitt der Klasse werden später die Operationen stehen. In der obigen Abbildung ist durch die Multiplizitäten an der Assoziationskante zwischen den Klassen modelliert, dass jede Person einer oder keiner Abteilung (0..1) zugeordnet ist, wobei in einer Abteilung mehrere Personen (0..*) zusammengefasst werden. Der Default-Wert für Multiplizitäten ist 1 und muss nicht explizit angegeben werden.</p>
<p>Zunächst wird eine Klasse als ein Rechteck mit 3 Abschnitten dargestellt. Im oberen Abschnitt steht der Name der Klasse. Im mittleren Abschnitt folgen alle Attribute der Klasse, die von einem Basisdatentyp sind. Die Typen der Attribute können angegeben oder versteckt werden. Im unteren Abschnitt der Klasse werden später die Operationen stehen. In der obigen Abbildung ist durch die Multiplizitäten an der Assoziationskante zwischen den Klassen modelliert, dass jede Person einer oder keiner Abteilung (0..1) zugeordnet ist, wobei in einer Abteilung mehrere Personen (0..*) zusammengefasst werden. Der Default-Wert für Multiplizitäten ist 1 und muss nicht explizit angegeben werden.</p>
<p>In der folgenden Abbildung sehen wir ein Objektdiagramm, das einen beliebigen Zeitpunkt zur Laufzeit der Anwendung abbildet. Im dargestellten Zustand existieren 4 Objekte: ein Objekt vom Typ Abteilung mit 3 zugeordneten Objekten vom Typ Person, die jeweils unterschiedliche Ausprägungen in ihren Attributen aufweisen.</p>
......@@ -41,7 +41,7 @@ Wichtig ist, dass das konzeptionelle Modell möglichst nicht an eine konkrete Te
<h4>Assoziationen und Navigierbarkeit</h4>
Die beiden Klassen des obigen Modells entsprechen folgenden Code in Java.
Die beiden Klassen des obigen Modells entsprechen folgendem Code in Java.
<pre><code class="language-java">class Person {
Integer id;
String name;
......
<p></p><a href="https://openjfx.io/">JavaFX</a> ist ein auf Java basierendes UI-Framework insbesondere für Desktop-Anwendungen.
Es kann auch zur Entwicklung mobiler Anwendungen für spezifische eingettete Systeme und für die sehr verbreiteten Zielplattformen Android und iOS eingesetzt werden.
<p><a href="https://openjfx.io/">JavaFX</a> ist ein auf Java basierendes UI-Framework insbesondere für Desktop-Anwendungen.
Es kann auch zur Entwicklung mobiler Anwendungen für spezifische eingebettete Systeme und für die sehr verbreiteten Zielplattformen Android und iOS eingesetzt werden.
Als Laufzeitumgebung bietet sich für diesen Fall die <a href="https://gluonhq.com/products/mobile/vm/">Gluon VM</a> an.</p>
<p>JavaFX war seit Version 7 (2012) bis inkl. Version 10 (2018) Teil der <a href="https://www.oracle.com/technetwork/java/javase/downloads/">Java SE</a> und damit das standardmäßig empfohlene UI-Framework.
......@@ -23,7 +22,7 @@ Für JavaFX-Anfänger bietet der SceneBuilder-Editor die Möglichkeit die vorhan
<p>Bevor wir die Motivation hinter der Trennung von Präsentation und Steuerungslogik in einem UI erläutern, klären wir kurz den allgemeinen Begriff "View":
Als eine View bezeichnen wir hier den Ausschnitt des gesamten UI, der dem Anwender aktuell angezeigt wird.
Das gesamte UI besteht also aus mehreren Views, zwischen deren Anzeige der Anwender i.d.R. durch eigene Interaktion wie das Anklicken eines Buttons navigiert.
Das gesamte UI besteht also aus mehreren Views, zwischen deren Anzeige der Anwender i.d.R. durch eigene Interaktion, wie das Anklicken eines Buttons, navigiert.
Die möglichen Transitionen zwischen den Views einer Anwendung können als Zustandsautomat modelliert werden.
Je nach UI-Framework werden die Views unterschiedlich bezeichnet: In der Web-Entwicklung wird klassischerweise von Seiten (engl. <i>Pages</i>) oder in neueren Web-Frameworks wie <a href="https://angular.io/">Angular</a>, <a href="https://vuejs.org/">Vue.js</a> oder <a href="https://reactjs.org/">React</a> generisch von Komponenten (engl. <i>Components</i>) gesprochen. Im Android SDK navigiert der Anwender zwischen unterschiedlichen <i><a href="https://developer.android.com/guide/components/activities/activity-lifecycle">Activities</a></i> (oder ihren Fragmenten).
In JavaFX wurde zur Bezeichnung der Views eine Analogie zur Theaterbühne (engl. <i>Stage</i>) gewählt, auf der mehrere Szenen (engl. <i>Scenes</i>) mit unterschiedlichem Bühnenbild ablaufen.
......@@ -47,7 +46,7 @@ public class HelloWorldApp extends Application {
<img src="media/javafx_helloworld.png" style="width:460px">
<label>Minimale JavaFX-Anwendung mit leerer Stage</label>
<p>Der Inhalt einer <code>Scene</code> besteht in JavaFX aus mehreren Knoten (die entsprechende Klasse heißt <code><a href="https://openjfx.io/javadoc/12/javafx.graphics/javafx/scene/Node.html">Node</a></code>), die in einer Baumstruktur ineinander verschachtelt sind. Diese Baumstruktur wird in JavaFX als <i>Scene Graph</i> bezeichnet und entspricht konzeptionell dem <i>Document Object Model (DOM)</i> in der Web-Entwicklung. Container-Knoten, die mehrere andere Knoten als Kindelemente aufnehmen können, werden als <code><a href="https://openjfx.io/javadoc/12/javafx.graphics/javafx/scene/Parent.html">Parent</a></code> bezeichnet. Jede <code>Scene</code> hat einen Wurzelknoten, den <i>Root Parent Node</i>. Eine beliebig tief geschachtelte Baumstruktur entsteht dadurch, dass ein Container-Knoten auch andere Container-Knoten als Kindelemente aufnehmen kann. Grafische Animationen wie z.B. Verschiebungen, Rotationen und Skalierungen oder andere Effekte, die auf einen <code>Parent</code> angewendet werden, gelten auch für ihre untergeordneten Kindelemente. Konkrete Knoten, d.h. die Unterklassen der allgemeinen Klasse <code>Node</code> sind sämtliche Klassen für Steuerungselemente, Bilder oder Texte, die im UI angezeigt werden. Die folgende Abbildung und das folgende Code-Beispiel verdeutlichen den Aufbau eines <i>Scene Graph</i> in JavaFX.</p>
<p>Der Inhalt einer <code>Scene</code> besteht in JavaFX aus mehreren Knoten (die entsprechende Klasse heißt <code><a href="https://openjfx.io/javadoc/12/javafx.graphics/javafx/scene/Node.html">Node</a></code>), die in einer Baumstruktur ineinander verschachtelt sind. Diese Baumstruktur wird in JavaFX als <i>Scene Graph</i> bezeichnet und entspricht konzeptionell dem <i>Document Object Model (DOM)</i> in der Web-Entwicklung. Container-Knoten, die mehrere andere Knoten als Kindelemente aufnehmen können, werden als <code><a href="https://openjfx.io/javadoc/12/javafx.graphics/javafx/scene/Parent.html">Parent</a></code> bezeichnet. Jede <code>Scene</code> hat einen Wurzelknoten, den <i>Root Parent Node</i>. Eine beliebig tief geschachtelte Baumstruktur entsteht dadurch, dass ein Container-Knoten auch andere Container-Knoten als Kindelemente aufnehmen kann. Grafische Animationen, wie z.B. Verschiebungen, Rotationen und Skalierungen oder andere Effekte, die auf einen <code>Parent</code> angewendet werden, gelten auch für ihre untergeordneten Kindelemente. Konkrete Knoten, d.h. die Unterklassen der allgemeinen Klasse <code>Node</code> sind sämtliche Klassen für Steuerungselemente, Bilder oder Texte, die im UI angezeigt werden. Die folgende Abbildung und das folgende Code-Beispiel verdeutlichen den Aufbau eines <i>Scene Graph</i> in JavaFX.</p>
<img src="media/javafx_nodes.png" style="width:400px">
<label>Scene Graph in JavaFX</label>
......@@ -164,7 +163,7 @@ Die Anwendung folgt dem Ansatz <i>"Single scene, dynamic content"</i> und lädt
</ul>
Zusätzlich besteht die Anwendung noch aus 2 weiteren FXML-Dateien:
<ul>
<li><code>main.fxml</code>: Enthält die gemeinsame Rahmenstruktur alle inhaltlichen Views, insbesondere Header und Navigationsmenu.</li>
<li><code>main.fxml</code>: Enthält die gemeinsame Rahmenstruktur aller inhaltlichen Views, insbesondere Header und Navigationsmenu.</li>
<li><code>menu.fxml</code>: Enthält das Navigationsmenu, das in einem <i>MenuDrawer</i> dargestellt wird. Über das Menu kann zwischen den Views gewechselt werden.</li>
</ul>
Im Folgenden wird der Code auszugsweise und teilweise vereinfacht anhand ausgewählter Aspekte erläutert.
......@@ -252,7 +251,7 @@ Im Folgenden wird der Code auszugsweise und teilweise vereinfacht anhand ausgew
<span>Die UI-Elemente aus der FXML-Datei können an Attribute in der Controller-Klasse gebunden werden (<i>Two-Way-Binding</i>). Auch diese Attribute werden per Dependency Injection durch das Framework instantiiert. Dazu muss ...</span>
<ul>
<li>... der Bezeichner des Attributs in der Java-Klasse gleich dem Wert des Attributs <code>fx:id</code> in der FXML-Datei sein,</li>
<li>der Bezeichner des Attributs in der Java-Klasse gleich dem Wert des Attributs <code>fx:id</code> in der FXML-Datei sein,</li>
<li>der Datentyp des Attributs in der Java-Klasse gleich dem Datentyp in der FXML-Datei sein</li>
<li>und das Attribut in der Java-Klasse mit der Annotation <code>@FXML</code> versehen sein.</li>
</ul>
......
<p>Dieses Kapitel soll <u>keine</u> Einführung in die grundlegenden Web-Technologien wie HTML, JavaScript und CSS geben, die bereits in anderen Modulen des Studiengangs ausführlich behandelt worden sind. Es wird lediglich die Struktur einer Web-Anwendung dargestellt, die ähnlich zur der <a href="#unit-javafx" class="navigate">Desktop-Anwendung in JavaFX</a> aus dem vorherigen Kapitel mit der im <a href="#unit-spring" class="navigate">Spring-Kapitel</a> erstellten REST-API kommuniziert. Dadurch soll praktisch demonstriert werden, wie mehrere Clients, die in unterschiedlichen Programmiersprachen erstellt worden sind, sich eine gemeinsame API teilen können. Die Web-Anwendung weist die gleiche Funktionalität wie die JavaFX-Anwendung auf, was in folgendem Video zusammengefasst wird. Die Web-Anwendung nutzt die UI-Elemente von <a href="https://getmdl.io">Material Design Lite</a> zur Gestaltung des UI.</p>
<p>Dieses Kapitel soll <u>keine</u> Einführung in die grundlegenden Web-Technologien wie HTML, JavaScript und CSS geben, die bereits in anderen Modulen des Studiengangs ausführlich behandelt worden sind. Es wird lediglich die Struktur einer Web-Anwendung dargestellt, die ähnlich zu der <a href="#unit-javafx" class="navigate">Desktop-Anwendung in JavaFX</a> aus dem vorherigen Kapitel mit der im <a href="#unit-spring" class="navigate">Spring-Kapitel</a> erstellten REST-API kommuniziert. Dadurch soll praktisch demonstriert werden, wie mehrere Clients, die in unterschiedlichen Programmiersprachen erstellt worden sind, sich eine gemeinsame API teilen können. Die Web-Anwendung weist die gleiche Funktionalität wie die JavaFX-Anwendung auf, was in folgendem Video zusammengefasst wird. Die Web-Anwendung nutzt die UI-Elemente von <a href="https://getmdl.io">Material Design Lite</a> zur Gestaltung des UI.</p>
<video controls><source src="media/Web_Yacht_Shop.mp4" type="video/mp4"></video>
<label>Web-Beispielanwendung "Yacht Shop"</label>
......
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