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.

1. Die Maße des Fensters (Window) betragen 300×200 Pixel.
2. 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.

   import jltk.*;
   import jltk.gui.*;
    
   public class TemperaturGUI extends App
   {
    
       public TemperaturGUI()
       {
           super(300,200);
           this.window.setTitle("Temperaturrechner");
       }
   }

3. Die einzelnen Komponenten einer GUI, die man nun auf dem Fenster platzieren kann, findet man in dieser Übersicht: 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.
4. 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.

   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");
       }
   }

5. 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.
6. Die Koordinaten und die Maße müssen dem Konstruktor des Textfeldes übergeben werden:

   this.txtCelsius = new TextField(10,100,75,25,"°C");

   Der Konstruktor des Textfeldes bekommt als fünften Parameter zusätzlich noch den Text, der am Anfang darin stehen soll.

7. 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 Dokumentation nachlesen.

   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");   
   }

8. 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().

     - this.btnCalc.setOnButtonClicked("convert");

9. 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.

   public void convert(){
       double celsius = this.txtCelsius.getContentAsDouble();
       double fahrenheit = celsius*1.8+32;
       this.txtFahrenheit.setContent(fahrenheit);
   }

• 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:

TemperaturGUI.java

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");
        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.txtFahrenheit.disableEdit();
 
        this.btnCalc = new Button(10,135,280,25,"Berechne");
        this.btnCalc.setOnButtonClicked("convert");
 
    }
 
    public void convert(){
        double celsius = this.txtCelsius.getContentAsDouble();
        double fahrenheit = celsius*1.8+32;
        this.txtFahrenheit.setContent(fahrenheit);
    }
 
}