de:jltk:gui:temperaturgui

Dies ist eine alte Version des Dokuments!


Beispiel: Grafische Benutzeroberfläche für einen Temperaturrechner

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.
    1. import jltk.*;
    2. import jltk.gui.*;
    3.  
    4. public class TemperaturGUI extends App
    5. {
    6.  
    7. public TemperaturGUI()
    8. {
    9. super(300,200);
    10. this.window.setTitle("Temperaturrechner");
    11. }
    12. }
  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.
    1. import jltk.*;
    2. import jltk.gui.*;
    3.  
    4. public class TemperaturGUI extends App
    5. {
    6. Label lblTitle;
    7. TextField txtCelsius, txtFahrenheit;
    8. Button btnCalc;
    9.  
    10. public TemperaturGUI()
    11. {
    12. super(300,200);
    13. this.window.setTitle("Temperaturrechner");
    14. }
    15. }
  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.

TemperaturGUI.java
  1. import jltk.*;
  2. import jltk.gui.*;
  3.  
  4. public class TemperaturGUI extends App
  5. {
  6. Label lblTitle;
  7. TextField txtCelsius, txtFahrenheit;
  8. Button btnCalc;
  9.  
  10. public TemperaturGUI()
  11. {
  12. super(300,200);
  13. this.window.setTitle("Temperaturrechner");
  14. this.lblTitle = new Label(10,10,200,25,"Fahrenheit - Celsius");
  15. this.lblTitle.setFontSize(16);
  16. this.lblTitle.setFontStyle(true, false);
  17.  
  18. this.txtCelsius = new TextField(10,100,75,25,"°C");
  19.  
  20. this.txtFahrenheit = new TextField(215,100,75,25,"°F");
  21. this.txtFahrenheit.disableEdit();
  22.  
  23. this.btnCalc = new Button(10,135,280,25,"Berechne");
  24. this.btnCalc.setOnButtonClicked("convert");
  25.  
  26. }
  27.  
  28. public void convert(){
  29. double celsius = this.txtCelsius.getContentAsDouble();
  30. double fahrenheit = celsius*1.8+32;
  31. this.txtFahrenheit.setContent(fahrenheit);
  32. }
  33.  
  34. }
  • de/jltk/gui/temperaturgui.1702572774.txt.gz
  • Zuletzt geändert: 2023/12/14 17:52
  • von jltk