Commit 0e794567 authored by Blanke, Daniela's avatar Blanke, Daniela
Browse files

Update ui-javafx.html

parent 1a71db1a
Pipeline #8037 passed with stage
in 1 minute and 9 seconds
<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>
......
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