Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- de:jltk:gui:temperaturgui [2023/12/14 17:52] – jltk
+++ de:jltk:gui:temperaturgui [2023/12/18 19:30] (aktuell) – jltk
@@ Zeile 1: / Zeile 1: @@
-====== Beispiel: Grafische Benutzeroberfläche für einen Temperaturrechner ======
+====== Beispiel: Temperaturumrechner mit grafischer Benutzeroberfläche ======
 Diese Anleitung zeigt, wie die abgebildete grafische Benutzeroberfläche (graphical user interface - gui) zur Umrechnung einer Temperatur von Celsius in Fahrenheit erstellt wird.
@@ 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#komponenten_einer_gui|Komponenten einer GUI]]. Für den Temperaturrechner benötigt man insgesamt 4 Elemente:
+  - 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.
@@ Zeile 44: / Zeile 44: @@
   - 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: