Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- de:jltk:gui:temperaturgui [2023/12/14 12:44] – jltk
+++ de:jltk:gui:temperaturgui [2023/12/18 19:30] (aktuell) – jltk
@@ Zeile 1: / Zeile 1: @@
-====== Beispiel: Grafische Benutzeroberfläche für die Umrechnung von °C in °F ======
+====== Beispiel: Temperaturumrechner mit grafischer Benutzeroberfläche ======
-Diese Anleitung zeigt, wie die abgebildete Benutzeroberfläche (graphical user interface - gui) zur Umrechnung einer Temperatur von Celsius in Fahrenheit erstellt wird.
+Diese Anleitung zeigt, wie die abgebildete grafische Benutzeroberfläche (graphical user interface - gui) zur Umrechnung einer Temperatur von Celsius in Fahrenheit erstellt wird.
 {{ :de:jltk:gui:temepraturgui_1_de.png?direct&300 |}}
   - Die Maße des Fensters (Window) betragen 300x200 Pixel.{{ :de:jltk:gui:temepraturgui_2_de.png?direct&350 |}}
-  - Alle grafischen Oberflächen die mit //jltk// erzeugt werden, sind Unterklassen der Klasse App. Im Konstruktor der Unterklasse muss man den Konstruktor der Elternklasse App mit //super(...)// aufrufen. Die beiden Parameter geben die Größe des Fensters an. Auf das Fenster, das die Klasse App erzeugt, kann man über das Attribut //window// zugreifen. Hier wird in Zeile 10 der Fenstertitel gesetzt.<code java  [enable_line_numbers="true", highlight_lines_extra="9,10"]>
+  - Alle grafischen Oberflächen die mit //jltk// erzeugt werden, sind Unterklassen der Klasse App. Im Konstruktor der Unterklasse muss man den Konstruktor der Elternklasse App mit //super(...)// aufrufen. Die beiden Parameter geben die Größe des Fensters an. Auf das Fenster, das die Klasse App erzeugt, kann man über das Attribut //window// zugreifen. Hier wird in Zeile 10 der Fenstertitel gesetzt.<code java  [enable_line_numbers="true",highlight_lines_extra="9,10"]>
 import jltk.*;
 import jltk.gui.*;
@@ Zeile 19: / Zeile 19: @@
 }
 </code>
+  - Die einzelnen Komponenten einer GUI, die man nun auf dem Fenster platzieren kann, findet man in dieser Übersicht: [[de:jltk:gui:example#komponenten_einer_gui|Komponenten einer GUI]]. Für den Temperaturrechner benötigt man insgesamt 4 Elemente:
+       * Ein //Label// für die Überschrift.
+       * Ein //Textfeld// für die Eingabe der Temperatur in Grad Celsius.
+       * Ein //Textfeld// für die Ausgabe der Temperatur in Grad Fahrenheit.
+       * Ein //Button// zum Starten der Berechnung.
+  - Für jedes Element benötigt man ein Attribut der zugehörigen Klasse. Üblicherweise stellt man dem Attributsnamen drei Buchstaben voran, die das Element beschreiben, z. B. txt für ein Textfeld. Der folgende Quelltextauszug zeigt das Anlegen der Attribut in Zeile 6 bis 8.<code java  [enable_line_numbers="true",highlight_lines_extra="6,7,8"]>
+import jltk.*;
+import jltk.gui.*;
+public class TemperaturGUI extends App
+{
+    Label lblTitle;
+    TextField txtCelsius, txtFahrenheit;
+    Button btnCalc;
+    public TemperaturGUI()
+    {
+        super(300,200);
+        this.window.setTitle("Temperaturrechner");
+    }
+}
+</code>
+  -  Für alle Komponenten muss die Position der linken, oberen Ecke sowie die Breite und Höhe angegeben werden. Die folgenden Abbildung zeigt die Position am Beispiel eines Textfeldes.{{ :de:jltk:gui:temepraturgui_3_de.png?direct&350 |}}
+  - Die Koordinaten und die Maße müssen dem Konstruktor des Textfeldes übergeben werden:<code java>
+this.txtCelsius = new TextField(10,100,75,25,"°C");</code>Der Konstruktor des Textfeldes bekommt als fünften Parameter zusätzlich noch den Text, der am Anfang darin stehen soll.
+  - Der folgende Quelltextauszug zeigt das Erzeugen der vier Komponenten. Die einzelnen Komponenten besitzen eine Vielzahl von Methoden, mit denen man das Verhalten steuern kann. Hier wird z.B. in Zeile 6 und 7 die Schrift und der Schriftstil des Labels für die Überschrift geändert. Alle Methoden kann man in der [[http://doc.jltk.org|Dokumentation]] nachlesen.<code java [enable_line_numbers="true"]>public TemperaturGUI()
+{
+    super(300,200);
+    this.window.setTitle("Temperaturrechner");
+    this.lblTitle = new Label(10,10,200,25,"Fahrenheit - Celsius");
+    this.lblTitle.setFontSize(16);
+    this.lblTitle.setFontStyle(true, false);
+    this.txtCelsius = new TextField(10,100,75,25,"°C");
+    this.txtFahrenheit = new TextField(215,100,75,25,"°F");
+    this.btnCalc = new Button(10,135,280,25,"Berechne");
+}</code>
+  - Erzeugt man nun ein Objekt der Klasse TemperaturGUI, so sieht man schon die fertige grafische Oberfläche. Allerdings reagiert die GUI noch auf keinen Event. In diesem Fall soll der Event ein Buttonklick sein. Im nächsten Schritt muss dem Button also mitgeteilt werden, welche Aktion er ausführen soll, wenn er geklickt wurde. Der Button hat dazu die Methode //setOnClicked(String pMethodName)//. Als Parameter wird der Name einer Methode angegeben, die im Fall eines Klicks ausgeführt werden soll. In diesem Beispiel ist die Methode mit dem Namen //convert()//.<code java [enable_line_numbers="true"]>
+  - this.btnCalc.setOnButtonClicked("convert");</code>
+  - Die Methode muss nun angelegt werden (in derselben Klasse wie der Button). In dieser Methode muss dann implementiert werden, was bei einem Buttonklick erfolgen soll. Der folgende Quelltextauszug zeigt die vollständige Methode, darunter befinden sich die Erklärungen.<code java [enable_line_numbers="true"]>
+public void convert(){
+    double celsius = this.txtCelsius.getContentAsDouble();
+    double fahrenheit = celsius*1.8+32;
+    this.txtFahrenheit.setContent(fahrenheit);
+}</code>
+      * Wert aus dem Textfeld //txtCelsius// auslesen und in einer Variablen speichern.
+      * Diesen Wert in Fahrenheit umrechnen: //celsius · 1.8 + 32//
+      * Das Rechenergebnis in das Textfeld //txtFahrenheit// schreiben.\\
+Der Quelltext der gesamten Klasse sieht nun so aus:
-<file java TemperaturGUI.java>
+<file java  [enable_line_numbers="true"] TemperaturGUI.java>
 import jltk.*;
 import jltk.gui.*;
@@ Zeile 44: / Zeile 95: @@
         this.txtFahrenheit = new TextField(215,100,75,25,"°F");
+        this.txtFahrenheit.disableEdit();
         this.btnCalc = new Button(10,135,280,25,"Berechne");