-
Notifications
You must be signed in to change notification settings - Fork 0
/
guis-mit-javafx.html
88 lines (84 loc) · 34.1 KB
/
guis-mit-javafx.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html><html lang="de-ch"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>GUIs mit JavaFX - Finecloud</title><meta name="description" content="Einführung JavaFX ist das modernste in der Java SE integrierte GUI-Framework zum Erstellen grafischer Benutzeroberflächen (GUI: Graphical User Interface). JavaFX ist eine reine Java-Bibliothek, die zwar, auch deklarative Definitionen von GUIs über XML ermöglicht, die aber im Kern aus Java-Klassen besteht. Seit Java 8 liegt…"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="stylesheet" href="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism-black.css"><link rel="canonical" href="https://www.finecloud.ch/guis-mit-javafx.html"><link rel="alternate" type="application/atom+xml" href="https://www.finecloud.ch/feed.xml"><link rel="alternate" type="application/json" href="https://www.finecloud.ch/feed.json"><meta property="og:title" content="GUIs mit JavaFX"><meta property="og:site_name" content="Finecloud"><meta property="og:description" content="Einführung JavaFX ist das modernste in der Java SE integrierte GUI-Framework zum Erstellen grafischer Benutzeroberflächen (GUI: Graphical User Interface). JavaFX ist eine reine Java-Bibliothek, die zwar, auch deklarative Definitionen von GUIs über XML ermöglicht, die aber im Kern aus Java-Klassen besteht. Seit Java 8 liegt…"><meta property="og:url" content="https://www.finecloud.ch/guis-mit-javafx.html"><meta property="og:type" content="article"><link rel="shortcut icon" href="https://www.finecloud.ch/media/website/finecloud.png" type="image/png"><link rel="stylesheet" href="https://www.finecloud.ch/assets/css/style.css?v=39da73365516a098a9b73b721fc970e2"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.finecloud.ch/guis-mit-javafx.html"},"headline":"GUIs mit JavaFX","datePublished":"2022-07-05T14:37","dateModified":"2022-07-05T14:38","description":"Einführung JavaFX ist das modernste in der Java SE integrierte GUI-Framework zum Erstellen grafischer Benutzeroberflächen (GUI: Graphical User Interface). JavaFX ist eine reine Java-Bibliothek, die zwar, auch deklarative Definitionen von GUIs über XML ermöglicht, die aber im Kern aus Java-Klassen besteht. Seit Java 8 liegt…","author":{"@type":"Person","name":"Finecloud","url":"https://www.finecloud.ch/authors/finecloud/"},"publisher":{"@type":"Organization","name":"Finecloud"}}</script><meta name="google-site-verification" content="seFY9U12uiEq5U3_MyZiX6XWzk0AVFl9zITr2ZKsytY"></head><body><div class="site-container"><header class="top" id="js-header"><a class="logo" href="https://www.finecloud.ch/">Finecloud</a><nav class="navbar js-navbar"><button class="navbar__toggle js-toggle" aria-label="Menu" aria-haspopup="true" aria-expanded="false"><span class="navbar__toggle-box"><span class="navbar__toggle-inner">Menu</span></span></button><ul class="navbar__menu"><li><a href="https://www.finecloud.ch/" target="_self">Blog</a></li><li><a href="https://www.finecloud.ch/tags/" target="_self">Tags</a></li></ul></nav><div class="search"><div class="search__overlay js-search-overlay"><div class="search__overlay-inner"><form action="https://www.finecloud.ch/search.html" class="search__form"><input class="search__input js-search-input" type="search" name="q" placeholder="search..." aria-label="search..." autofocus="autofocus"></form><button class="search__close js-search-close" aria-label="Close">Close</button></div></div><button class="search__btn js-search-btn" aria-label="Search"><svg role="presentation" focusable="false"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#search"/></svg></button></div></header><main><article class="post"><div class="hero"><figure class="hero__image hero__image--overlay"><img src="https://www.finecloud.ch/media/website/download.jpg" srcset="https://www.finecloud.ch/media/website/responsive/download-xs.jpg 300w, https://www.finecloud.ch/media/website/responsive/download-sm.jpg 480w, https://www.finecloud.ch/media/website/responsive/download-md.jpg 768w, https://www.finecloud.ch/media/website/responsive/download-lg.jpg 1024w, https://www.finecloud.ch/media/website/responsive/download-xl.jpg 1360w, https://www.finecloud.ch/media/website/responsive/download-2xl.jpg 1600w" sizes="100vw" loading="eager" alt=""></figure><header class="hero__content"><div class="wrapper"><div class="post__meta"><time datetime="2022-07-05T14:37">Juli 5, 2022</time></div><h1>GUIs mit JavaFX</h1></div></header></div><div class="wrapper post__entry"><div class="post__toc"><h3>Table of Contents</h3><ul><li><a href="#mcetoc_1g72m7p9tbq6">Einführung</a></li><li><a href="#mcetoc_1g72m7p9tbq7">Installation</a><ul><li><a href="#mcetoc_1g72m7p9tbq8">VSCode</a></li></ul></li><li><a href="#mcetoc_1g72m7p9tbq9">Architektur von JavaFX</a><ul><li><a href="#mcetoc_1g72m7p9tbqa">Stage</a></li><li><a href="#mcetoc_1g72m7p9tbqb">Scene</a></li><li><a href="#mcetoc_1g72no33dbv0">Node Typen</a></li></ul></li><li><a href="#mcetoc_1g72no33dbv1">GUI Komponenten</a><ul><li><a href="#mcetoc_1g72no33dbv2">Beschriftungen</a></li><li><a href="#mcetoc_1g72no33dbv3">Schaltflächen</a><ul><li><a href="#mcetoc_1g775qiifdbg">Buttons</a></li><li><a href="#mcetoc_1g775qiifdbh">Radiobuttons</a></li><li><a href="#mcetoc_1g775qiifdbi">Toggle-Buttons</a></li><li><a href="#u16.4.3">Checkboxen </a></li><li><a href="#u16.4.3">Choiceboxen</a></li></ul></li><li><a href="#mcetoc_1g72no33dbv4">Eingabefelder</a></li><li><a href="#mcetoc_1g775qiifdbj">Menüs</a></li><li><a href="#mcetoc_1g775qiifdbk">Weitere Standardkomponenten</a></li><li><a href="#u16.4.7">Geometrische Komponenten</a></li><li><a href="#mcetoc_1g775qiifdbl">Diagramme</a></li></ul></li></ul></div><h2 id="mcetoc_1g72m7p9tbq6">Einführung</h2><p>JavaFX ist das modernste in der Java SE integrierte GUI-Framework zum Erstellen grafischer Benutzeroberflächen (<span class="italic">GUI: Graphical User Interface</span>). JavaFX ist eine reine Java-Bibliothek, die zwar, auch deklarative Definitionen von GUIs über XML ermöglicht, die aber im Kern aus Java-Klassen besteht.</p><h2 id="mcetoc_1g72m7p9tbq7">Installation</h2><p class="standard">Seit Java 8 liegt das JavaFX-SDK dem JDK bei. Allerdings kann es sein, dass Sie die JavaFX-Bibliothek explizit dem Klassenpfad hinzufügen müssen. Zu finden ist die entsprechende JAR-Datei unter <span class="italic"><JRE_HOME>/lib/ext/jfxrt.jar</span>, wobei <span class="italic"><JRE_HOME></span> für das root-Verzeichnis Ihrer JRE-Installation steht.</p><p class="standard">Die Versionsnummer von JavaFX ist seit Java/JavaFX 8 an die Version von Java angepasst.</p><h3 id="mcetoc_1g72m7p9tbq8">VSCode</h3><p>Damit man JavaFX in VSCode nutzen kann, müssen wir uns JavaFX zuerst <a href="https://gluonhq.com/products/javafx/" rel="nofollow">von hier</a> herunterladen. Anschliessend entpacken wir die Archivdatei.</p><p>In unserem VSCode Java Projekt müssen wir nun die JavaFX Libs einbinden: Um JavaFX als Abhängigkeiten zum Projekt hinzuzufügen, kann man einfach alle JAR-Dateien aus dem lib-Ordner des heruntergeladenen JavaFX-SDK kopieren, zum Beispiel /Users/your-user/Downloads/javafx-sdk-18.0.2/lib/ in die lib-Ordner Ihres Projekts. Alternativ kann man auch über den Java Projects Explorer hinzufügen. Dazu klickt man auf die Schaltfläche + neben den referenzierten Bibliotheken und wählt die JARs der JavaFX-Bibliothek aus, um sie hinzuzufügen.</p><p>Als letzter Schritt müssen wir VSCode beibringen, dass wir das Java Programm mit Parameter an die Java VM übergeben und ausführen wollen. Dazu erstellen wir in unserem Projekt im Ordner <code>.vscode</code> eine Datei namens <code>launch.json</code> mit dem folgenden Inhalt:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;">{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=<span class="hljs-number" style="color: #6897bb;">830387</span>
<span class="hljs-string" style="color: #6a8759;">"version"</span>: <span class="hljs-string" style="color: #6a8759;">"0.2.0"</span>,
<span class="hljs-attr">"configurations"</span>: [
{
<span class="hljs-attr">"type"</span>: <span class="hljs-string" style="color: #6a8759;">"java"</span>,
<span class="hljs-attr">"name"</span>: <span class="hljs-string" style="color: #6a8759;">"Launch BeispielAnwendung"</span>,
<span class="hljs-attr">"request"</span>: <span class="hljs-string" style="color: #6a8759;">"launch"</span>,
<span class="hljs-attr">"mainClass"</span>: <span class="hljs-string" style="color: #6a8759;">"app.Kap16.BeispielAnwendung"</span>,
<span class="hljs-attr">"projectName"</span>: <span class="hljs-string" style="color: #6a8759;">"labproject_3808de47"</span>,
<span class="hljs-attr">"vmArgs"</span>: <span class="hljs-string" style="color: #6a8759;">"--module-path /Users/Dave/Downloads/javafx-sdk-18.0.1/lib/ --add-modules javafx.controls,javafx.fxml"</span>
}
}</pre><p>Entscheidend ist die Angabe der <code>vmArgs</code>. Eine detailliertere Anleitung ist <a href="https://openjfx.io/openjfx-docs/#install-javafx" rel="nofollow">hier</a> zu finden.</p><h2 id="mcetoc_1g72m7p9tbq9">Architektur von JavaFX</h2><p>Am einfachsten wir schauen uns zuerst ein Beispiel an:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"><span class="hljs-keyword" style="color: #cc7832;">package</span> app.Kap16;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javafx.application.Application;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javafx.stage.Stage;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javafx.scene.Scene;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javafx.scene.control.Button;
<span class="hljs-keyword" style="color: #cc7832;">import</span> javafx.scene.layout.BorderPane;
<span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-class"><span class="hljs-keyword" style="color: #cc7832;">class</span> <span class="hljs-title" style="color: #ffc66d;">BeispielAnwendung</span> <span class="hljs-keyword" style="color: #cc7832;">extends</span> <span class="hljs-title" style="color: #ffc66d;">Application</span> </span>{
<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-keyword" style="color: #cc7832;">static</span> <span class="hljs-keyword" style="color: #cc7832;">void</span> <span class="hljs-title" style="color: #ffc66d;">main</span><span class="hljs-params">(String[] args)</span> </span>{
launch(args);
}
<span class="hljs-meta" style="color: #bbb529;">@Override</span>
<span class="hljs-function"><span class="hljs-keyword" style="color: #cc7832;">public</span> <span class="hljs-keyword" style="color: #cc7832;">void</span> <span class="hljs-title" style="color: #ffc66d;">start</span><span class="hljs-params">(Stage stage)</span> <span class="hljs-keyword" style="color: #cc7832;">throws</span> Exception </span>{
stage.setTitle(<span class="hljs-string" style="color: #6a8759;">"Beispielanwendung"</span>);
Button button = <span class="hljs-keyword" style="color: #cc7832;">new</span> Button();
button.setText(<span class="hljs-string" style="color: #6a8759;">"Klick mich"</span>);
BorderPane root = <span class="hljs-keyword" style="color: #cc7832;">new</span> BorderPane();
root.setCenter(button);
Scene scene = <span class="hljs-keyword" style="color: #cc7832;">new</span> Scene(root, <span class="hljs-number" style="color: #6897bb;">300</span>, <span class="hljs-number" style="color: #6897bb;">250</span>);
stage.setScene(scene);
stage.show();
}
}</pre><p>Die Ausgabe bei der Ausführung:</p><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/45/Screenshot-2022-07-03-at-20.39.58.png" alt="" width="333" height="310" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-03-at-20.39.58-xs.png 300w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-03-at-20.39.58-sm.png 480w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-03-at-20.39.58-md.png 768w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-03-at-20.39.58-lg.png 1024w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-03-at-20.39.58-xl.png 1360w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-03-at-20.39.58-2xl.png 1600w"></figure><h3 id="mcetoc_1g72m7p9tbqa">Stage</h3><p>Der Einstiegspunkt jeder JavaFX-Anwendung ist die javafx.application.Application Klasse. Application repräsentiert die Anwendungsklasse und stellt ein Fenster mit Rahmen, Systemmenü und Standardschaltflächen zur Verfügung. Die einzige Methode, die dabei überschrieben werden muss, ist die Methode start(), die als Parameter ein Objekt vom Typ javafx.stage.Stage übergeben bekommt.<br><br>Stage bildet an dieser Stelle das Hauptfenster der Anwendung, das alle weiteren Komponenten enthält. Die Methode start() dient dazu, den Inhalt dieses Fensters zu definieren. Um die Anwendung zu starten, reicht es, in der main-Methode die statische Methode launch() aufzurufen, die von Application bereitgestellt wird. Ausserdem darf man nicht vergessen, die Methode show() an dem Stage-Objekt aufzurufen, sonst wird das entsprechende Fenster gar nicht angezeigt.</p><h3 id="mcetoc_1g72m7p9tbqb">Scene</h3><p>Über einzelne Scenes (Instanzen der Klasse javax.scene.Scene) wird definiert, welche Komponenten in einer Anwendung dargestellt werden. Innerhalb einer Scene werden die einzelnen Komponenten als Knoten (nodes) in einer Baumstruktur verwaltet, dem sogenannten Scene Graph. Nodes können ihrerseits mehrere andere Nodes als Kindelemente enthalten, aber nur ein Elternelement haben. Bei Nodes mit Kindelementen spricht man von Branch Nodes, bei Nodes ohne Kindelemente von Leaf Nodes.</p><h3 id="mcetoc_1g72no33dbv0">Node Typen</h3><p>Die Basisklasse für alle Scene Graph Elemente bildet die Klasse javafx.scene.Node. Ihr folgt eine ganze Hierarchie an Unterklassen. Diese lassen sich in fünf Hauptkategorien unterteilen:</p><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/45/ClassNode.png" alt="" width="684" height="216" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/45/responsive/ClassNode-xs.png 300w, https://www.finecloud.ch/media/posts/45/responsive/ClassNode-sm.png 480w, https://www.finecloud.ch/media/posts/45/responsive/ClassNode-md.png 768w, https://www.finecloud.ch/media/posts/45/responsive/ClassNode-lg.png 1024w, https://www.finecloud.ch/media/posts/45/responsive/ClassNode-xl.png 1360w, https://www.finecloud.ch/media/posts/45/responsive/ClassNode-2xl.png 1600w"></figure><ul><li>Parent: alle Nodes, die Kindelemente haben können</li><li>Canvas: Grafikoperationen, mit der sogenannten Canvas-API kann man zweidimensionale Grafiken zeichnen</li><li>Shape: Oberklasse verschiedener geometrischer Formen</li><li>ImageView: Darstellung von Bildern</li><li>MediaView: Integration von Audio- und Videokomponenten</li></ul><h2 id="mcetoc_1g72no33dbv1">GUI Komponenten</h2><h3 id="mcetoc_1g72no33dbv2">Beschriftungen</h3><p>Die Klasse javafx.scene.control wird verwendet um Beschriftungen zu GUI Elementen benötigt werden. Den Text der Beschriftung setzen Sie dabei entweder über den Konstruktor oder über die Methode setText():</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;">Label label = <span class="hljs-keyword" style="color: #cc7832;">new</span> Label(<span class="hljs-string" style="color: #6a8759;">"Beschriftung"</span>);</pre><h3 id="mcetoc_1g72no33dbv3">Schaltflächen</h3><h4 id="mcetoc_1g775qiifdbg">Buttons</h4><p>Buttons bezeichnen einfache Schaltflächen. Repräsentiert werden Buttons durch die Klasse Button. Eine einfache Schaltfläche lässt sich folgendermassen erzeugen (gleiches Ergebnis wie oben):</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;">Button button = <span class="hljs-keyword" style="color: #cc7832;">new</span> Button(<span class="hljs-string" style="color: #6a8759;">"Klick mich"</span>);</pre><h4 id="mcetoc_1g775qiifdbh">Radiobuttons</h4><p>Radiobuttons eignen sich gut für Entweder-oder-Auswahlen. Repräsentiert werden Radiobuttons durch die Klasse RadioButton. Mit Hilfe der Klasse ToggleGroup können (und sollten) die einzelnen Radiobuttons ausserdem in Gruppen zusammengefasst werden. Innerhalb einer solchen Gruppe ist dann sichergestellt, dass jeweils nur ein Radiobutton ausgewählt werden kann. Über setSelected() lässt sich zudem der Radiobutton bestimmen, der (vor)selektiert werden soll. Im folgenden Beispiel wird eine ToggleGroup mit drei Radiobuttons erstellt, von denen der Radiobutton mit der Aufschrift Gelb vorselektiert ist:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"> ToggleGroup group = <span class="hljs-keyword" style="color: #cc7832;">new</span> ToggleGroup();
RadioButton radioButton1 = <span class="hljs-keyword" style="color: #cc7832;">new</span> RadioButton(<span class="hljs-string" style="color: #6a8759;">"Gelb"</span>);
radioButton1.setToggleGroup(group);
radioButton1.setSelected(<span class="hljs-keyword" style="color: #cc7832;">true</span>);
RadioButton radioButton2 = <span class="hljs-keyword" style="color: #cc7832;">new</span> RadioButton(<span class="hljs-string" style="color: #6a8759;">"Blau"</span>);
radioButton2.setToggleGroup(group);
RadioButton radioButton3 = <span class="hljs-keyword" style="color: #cc7832;">new</span> RadioButton(<span class="hljs-string" style="color: #6a8759;">"Grün"</span>);
radioButton3.setToggleGroup(group);</pre><figure class="post__image"><br><img loading="lazy" src="https://www.finecloud.ch/media/posts/45/Screenshot-2022-07-04-at-06.32.10.png" alt="" width="427" height="94" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.32.10-xs.png 300w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.32.10-sm.png 480w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.32.10-md.png 768w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.32.10-lg.png 1024w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.32.10-xl.png 1360w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.32.10-2xl.png 1600w"></figure><h4 id="mcetoc_1g775qiifdbi">Toggle-Buttons</h4><p>Toggle-Buttons (Klasse ToggleButton) eignen sich gut, wenn Sie eine Schaltfläche benötigen, die zwei Zustände darstellen kann (beispielsweise »An« und »Aus«). Über die Methode setSelected(), die einen booleschen Wert entgegennimmt, können Sie dabei zwischen beiden Zuständen wechseln und über isSelected() den aktuellen Zustand ermitteln. Wie Radiobuttons können auch Toggle-Buttons innerhalb einer Gruppe definiert werden. Im Unterschied zu Radiobuttons, bei denen immer genau einer der Buttons ausgewählt ist, ist es bei Toggle-Buttons also innerhalb einer Gruppe nicht zwingend notwendig, dass überhaupt ein Button ausgewählt ist. Standardmässig ist jedoch der erste Button einer Gruppe vorausgewählt:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"> ToggleGroup group2 = <span class="hljs-keyword" style="color: #cc7832;">new</span> ToggleGroup();
ToggleButton toggleButtonOne = <span class="hljs-keyword" style="color: #cc7832;">new</span> ToggleButton(<span class="hljs-string" style="color: #6a8759;">"Option1"</span>);
toggleButtonOne.setToggleGroup(group2);
toggleButtonOne.setSelected(<span class="hljs-keyword" style="color: #cc7832;">true</span>);
ToggleButton toggleButtonTwo = <span class="hljs-keyword" style="color: #cc7832;">new</span> ToggleButton(<span class="hljs-string" style="color: #6a8759;">"Option2"</span>);
toggleButtonTwo.setToggleGroup(group2);
ToggleButton toggleButtonThree = <span class="hljs-keyword" style="color: #cc7832;">new</span> ToggleButton(<span class="hljs-string" style="color: #6a8759;">"Option3"</span>);
toggleButtonThree.setToggleGroup(group2);</pre><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/45/Screenshot-2022-07-04-at-06.44.26.png" alt="" width="423" height="93" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.44.26-xs.png 300w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.44.26-sm.png 480w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.44.26-md.png 768w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.44.26-lg.png 1024w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.44.26-xl.png 1360w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.44.26-2xl.png 1600w"></figure><h4 id="u16.4.3">Checkboxen </h4><p>Checkboxen (Klasse CheckBox) bezeichnen Kästchen, über die bestimmte Auswahlen getroffen werden können. Ob eine Checkbox selektiert ist oder nicht, kann programmatisch über die Methode setSelected() bestimmt werden. Des Weiteren kann eine Checkbox über setIndeterminate() als »definiert« oder als »undefiniert« markiert werden. Beide Methoden erwarten jeweils einen booleschen Wert, in der Kombination ergeben sich so insgesamt drei (sichtbare) verschiedene Zustände pro Checkbox:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"> CheckBox checkBox1 = <span class="hljs-keyword" style="color: #cc7832;">new</span> CheckBox(<span class="hljs-string" style="color: #6a8759;">"Option1"</span>);
checkBox1.setSelected(<span class="hljs-keyword" style="color: #cc7832;">false</span>);
CheckBox checkBox2 = <span class="hljs-keyword" style="color: #cc7832;">new</span> CheckBox(<span class="hljs-string" style="color: #6a8759;">"Option2"</span>);
checkBox2.setSelected(<span class="hljs-keyword" style="color: #cc7832;">true</span>);
CheckBox checkBox3 = <span class="hljs-keyword" style="color: #cc7832;">new</span> CheckBox(<span class="hljs-string" style="color: #6a8759;">"Option3"</span>);
checkBox3.setSelected(<span class="hljs-keyword" style="color: #cc7832;">true</span>);
checkBox3.setIndeterminate(<span class="hljs-keyword" style="color: #cc7832;">true</span>);</pre><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/45/Screenshot-2022-07-04-at-06.50.34.png" alt="" width="386" height="85" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.50.34-xs.png 300w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.50.34-sm.png 480w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.50.34-md.png 768w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.50.34-lg.png 1024w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.50.34-xl.png 1360w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.50.34-2xl.png 1600w"></figure><h4 id="u16.4.3">Choiceboxen</h4><p>Bei einer Choicebox handelt es sich um eine Aufklappliste, aus der genau ein Wert ausgewählt werden kann. Choiceboxen werden durch die Klasse ChoiceBox repräsentiert. Zu beachten ist dabei, dass die einzelnen Elemente, die ausgewählt werden können, über die Methode setItems() in Form einer ObservableList hinzugefügt werden müssen. Eine ObservableList unterscheidet sich von normalen Listen, darin, dass Änderungen an einer solchen Liste von der jeweiligen GUI-Komponente wahrgenommen werden und sich direkt auf die grafische Darstellung auswirken. Eine solche ObservableList erzeugen Sie beispielsweise wie in folgendem Listing über die Helferklasse FXCollections:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"> ChoiceBox<String> choiceBox = <span class="hljs-keyword" style="color: #cc7832;">new</span> ChoiceBox<String>();
ObservableList<String> farben = FXCollections.observableArrayList(<span class="hljs-string" style="color: #6a8759;">"Rot"</span>, <span class="hljs-string" style="color: #6a8759;">"Blau"</span>, <span class="hljs-string" style="color: #6a8759;">"Grün"</span>);
choiceBox.setItems(farben);
farben.add(<span class="hljs-string" style="color: #6a8759;">"Orange"</span>);</pre><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/45/Screenshot-2022-07-04-at-06.57.00.png" alt="" width="370" height="217" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.57.00-xs.png 300w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.57.00-sm.png 480w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.57.00-md.png 768w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.57.00-lg.png 1024w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.57.00-xl.png 1360w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-06.57.00-2xl.png 1600w"></figure><br><br>Zunächst wird hierbei eine ObservableList mit den Werten "Rot", "Blau" und "Grün" angelegt, dann über setItems() der Choicebox hinzugefügt und anschliessend um ein weiteres Element ("Orange") ergänzt. Diese Änderung wirkt sich direkt auf die Choicebox aus: Es stehen anschliessend vier Werte in der Choicebox zur Verfügung.<p></p><h3 id="mcetoc_1g72no33dbv4">Eingabefelder</h3><p>Neben Schaltflächen, über die in der Regel bestimmte Aktionen ausgelöst oder Selektionen getroffen werden, benötigen Sie ausserdem Komponenten, über die die Nutzer Eingaben tätigen können. Dazu zählen unter anderem einzeilige Textfelder, Passwortfelder oder mehrzeilige Textfelder. Textfelder und Passwortfelder sehen auf den ersten Blick gleich aus und verfügen auch über ähnliche Methoden. Das wundert wenig, da PasswordField eine Subklasse von TextField ist. Der einzige sichtbare Unterschied ist, dass jedes Textzeichen, das Sie eingeben, bei einem Passwortfeld durch ein Bullet-Symbol auf dem Bildschirm dargestellt wird:</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"> TextField text = <span class="hljs-keyword" style="color: #cc7832;">new</span> TextField();
text.setPromptText(<span class="hljs-string" style="color: #6a8759;">"Benutzername"</span>);
PasswordField password = <span class="hljs-keyword" style="color: #cc7832;">new</span> PasswordField();
password.setPromptText(<span class="hljs-string" style="color: #6a8759;">"Passwort"</span>);</pre><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/45/Screenshot-2022-07-04-at-07.37.47.png" alt="" width="369" height="91" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-07.37.47-xs.png 300w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-07.37.47-sm.png 480w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-07.37.47-md.png 768w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-07.37.47-lg.png 1024w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-07.37.47-xl.png 1360w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-04-at-07.37.47-2xl.png 1600w"></figure><p>Ausserdem ist es bei einer Instanz von PasswordField im Gegensatz zu reinen TextField-Instanzen nicht möglich, den Text aus dem Feld zu kopieren oder auszuschneiden: Die Methoden copy() und cut() funktionieren hier nicht.</p><p>Für mehrzeilige Textfelder kann die Klasse TextArea verwendet werden.</p><h3 id="mcetoc_1g775qiifdbj">Menüs</h3><p>Für das Erstellen von Menüs kommen mehrere Klassen zum Einsatz: Das Menü selbst wird mit Hilfe der Klasse Menu dargestellt, die einzelnen Menüeinträge durch die Klasse MenuItem. Hier gibt es beispielsweise die Sonderformen CheckMenuItem und RadioMenuItem, die jeweils über eine Checkbox respektive einen Radiobutton verfügen. Da Menu selbst auch eine Unterklasse von MenuItem ist, lassen sich Menüs zudem auf sehr einfache Weise schachteln.</p><pre class="hljs" style="color: #a9b7c6; background: #282b2e none repeat scroll 0% 0%; display: block; overflow-x: auto; padding: 0.5em;"> MenuBar menuBar = <span class="hljs-keyword" style="color: #cc7832;">new</span> MenuBar();
Menu menu = <span class="hljs-keyword" style="color: #cc7832;">new</span> Menu(<span class="hljs-string" style="color: #6a8759;">"Datei"</span>);
MenuItem menuItem = <span class="hljs-keyword" style="color: #cc7832;">new</span> MenuItem(<span class="hljs-string" style="color: #6a8759;">"Neu"</span>);
CheckMenuItem checkMenuItem = <span class="hljs-keyword" style="color: #cc7832;">new</span> CheckMenuItem(<span class="hljs-string" style="color: #6a8759;">"Auswahl"</span>);
menu.getItems().add(menuItem);
menu.getItems().add(checkMenuItem);
menuBar.getMenus().add(menu);</pre><figure class="post__image"><img loading="lazy" src="https://www.finecloud.ch/media/posts/45/Screenshot-2022-07-05-at-14.30.06.png" alt="" width="339" height="137" sizes="100vw" srcset="https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-05-at-14.30.06-xs.png 300w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-05-at-14.30.06-sm.png 480w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-05-at-14.30.06-md.png 768w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-05-at-14.30.06-lg.png 1024w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-05-at-14.30.06-xl.png 1360w, https://www.finecloud.ch/media/posts/45/responsive/Screenshot-2022-07-05-at-14.30.06-2xl.png 1600w"></figure><h3 id="mcetoc_1g775qiifdbk">Weitere Standardkomponenten</h3><p>Weitere Komponenten sind <a href="https://docs.oracle.com/javafx/2/api/" target="_blank" rel="nofollow noopener noreferrer">hier</a> zu finden.</p><h3 id="u16.4.7" class="t3">Geometrische Komponenten</h3><p>Im Paket javafx.scene.shape findet man eine ganze Reihe geometrischer Formen wie Kreise (Klasse Circle), Pfade (Klasse Path), Rechtecke (Klasse Rectangle), Ellipsen (Klasse Ellipse) und einfachen Text (Klasse Text).</p><h3 id="mcetoc_1g775qiifdbl">Diagramme</h3><p>Im JavaFX-SDK sind verschiedene Diagrammformen enthalten (Paket javafx.scene.chart). Diese reichen von einfachen Balkendiagrammen (BarChart) und Tortendiagrammen (PieChart) über Liniendiagramme (LineChart) bis hin zu spezielleren Diagrammformen wie BubbleChart, ScatterChart und AreaChart.</p></div><footer class="wrapper post__footer"><p class="post__last-updated">This article was updated on Juli 5, 2022</p><ul class="post__tag"><li><a href="https://www.finecloud.ch/tags/gui/">gui</a></li><li><a href="https://www.finecloud.ch/tags/java/">java</a></li><li><a href="https://www.finecloud.ch/tags/softwareentwicklung/">software development</a></li><li><a href="https://www.finecloud.ch/tags/vscode/">vscode</a></li></ul><div class="post__share"></div></footer></article><nav class="post__nav"><div class="post__nav-inner"><div class="post__nav-prev"><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-prev"/></svg> <a href="https://www.finecloud.ch/kubernetes-auf-proxmox-mit-ansible-und-terraform-teil-2.html" class="post__nav-link" rel="prev"><span>Previous</span> Kubernetes auf Proxmox mit Ansible und Terraform (Teil 2)</a></div><div class="post__nav-next"><a href="https://www.finecloud.ch/jvm-und-jdk-unter-der-haube.html" class="post__nav-link" rel="next"><span>Next</span> JVM und JDK unter der Haube </a><svg width="1.041em" height="0.416em" aria-hidden="true"><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#arrow-next"/></svg></div></div></nav></main><footer class="footer"><div class="footer__copyright"><p>Powered by Publii</p></div><button onclick="backToTopFunction()" id="backToTop" class="footer__bttop" aria-label="Back to top" title="Back to top"><svg><use xlink:href="https://www.finecloud.ch/assets/svg/svg-map.svg#toparrow"/></svg></button></footer></div><script>window.publiiThemeMenuConfig = {
mobileMenuMode: 'sidebar',
animationSpeed: 300,
submenuWidth: 'auto',
doubleClickTime: 500,
mobileMenuExpandableSubmenus: true,
relatedContainerForOverlayMenuSelector: '.top',
};</script><script defer="defer" src="https://www.finecloud.ch/assets/js/scripts.min.js?v=6ca8b60e6534a3888de1205e82df8528"></script><script>var images = document.querySelectorAll('img[loading]');
for (var i = 0; i < images.length; i++) {
if (images[i].complete) {
images[i].classList.add('is-loaded');
} else {
images[i].addEventListener('load', function () {
this.classList.add('is-loaded');
}, false);
}
}</script><script defer="defer" src="https://www.finecloud.ch/media/plugins/syntaxHighlighter/prism.js"></script></body></html>