de:jltk:gui:example

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung
Nächste Überarbeitung		 Vorherige Überarbeitung
de:jltk:gui:example [2023/12/18 08:42] – gelöscht - Externe Bearbeitung (Unknown date) 127.0.0.1de:jltk:gui:example [2025/02/27 21:03] (aktuell) – jltk
Zeile 1: Zeile 1:
 +====== Grafische Benutzeroberflächen erzeugen ======
 +
 +===== Überblick =====
 +
 +//jltk// stellt eine einfache Möglichkeit zur Verfügung kleine [[wpde>Grafische_Benutzeroberfläche|Grafische Benutzeroberflächen]] (GUI- **G**raphical **U**ser **I**nterface) zu erstellen. Jede Komponente der grafischen Oberfläche ist dabei ein Objekt, das im Quelltext erzeugt werden muss. Der Konstrukor nimmt dabei die Position, die Größe und weitere Informationen entgegen.
 +
 +Damit die grafischen Elemente (Komponenten) auf Ereignisse (z.B. anklicken) reagieren, müssen diese Objekte in einer Unterklasse [[de:jltk:classes:App]] sein.
 +
 +Auf der Seite [[de:jltk:gui:components|Komponenten einer grafischen Oberfläche]] werden alle Element, die man in einer GUI verwenden kann, vorgestellt.
 +
 +
 +
 +===== Beispiel: Fenster mit Label =====
 +
 +Das erste Beispiel erzeugt ein Fenster mit einem //Label// (Etikett) zur Verfügung. Du kannst den Quelltext als Datei herunterladen und in blueJ über //Datei -> Klasse aus Datei hinzufügen...// importieren. Denke daran, das die [[de:jltk:install:bluej|jltk-Bibliothek importiert]] ist.
 +
 +Erzeugt man dann ein Objekt aus dieser Klasse, so wird die zugehörige GUI erstellt.
 +
 +{{ :0_global:jltk:gui:window_gui_example.png?250 |Fenster mit Label}}
 +
 +
 +
 +<file java FensterMitLabel.java  [enable_line_numbers="true"]>
 +import jltk.App;    // Klasse App
 +import jltk.gui.*;  // GUI Komponenten
 +
 +public class FensterMitLabel extends App{ // FensterMitLabel ist Unterklasse der Klasse App
 +
 +    // Etikett
 +    Label lblText; 
 +    
 +    // Konstruktor
 +    public FensterMitLabel(){
 +        super(200,100);   // Fenster der Größe 400x600 erzeugen
 +        this.lblText = new Label(50,25,100,25,"Hello World");
 +    }
 +}
 +</file>
 +
 +  * Zeile 1: Klasse //jltk.App// einbinden
 +  * Zeile 2: Alle Klassen aus dem Paket //jltk.gui// einbinden. Hier liegen die Klassen für die einzelnen Komponenten.
 +  * Zeile 4: Klassen, die grafische Oberflächen zur Verfügung stellen, müssen Unterklassen der Klasse //App// sein.
 +  * Zeile 7: Ein Attribut vom Typ //Label// anlegen.
 +  * Zeile 11: Im Konstruktor muss dann mit //super(…)// der Konstruktor von //App// aufgerufen werden. Die Parameter von //super// sind die Fensterbreite und Höhe in Pixel 
 +  * Zeile 12: Ein Objekt aus der Klasse //Label// wird erzeugt und dem Attribut //lblText// zugewiesen. 
 +    * Die ersten beiden Parameter sind die x- und y-Koordinate der linken oberen Ecke des Labels auf auf dem Fenster. 
 +    * Der dritte und vierte Parameter ist die Breite und Höhe des Labels.
 +    * Der Fünfte Parameter ist der Text, des in dem Label steht.
 +
 +
 +===== Beispiel: Label, TextField und Button =====
 +
 +Das folgende Beispiel zeigt eine Grafische Benutzeroberfläche mit einem Label (Etikett), TextField (Texteingabe) und einem Button (Schaltfläche). Wird der Button angeklickt, so wird eine Methode ausgeführt. 
 +
 +<file java GUIexample.java [enable_line_numbers="true",highlight_lines_extra="15,18,25"]>
 +import jltk.App;    // Klasse App
 +import jltk.gui.*;  // GUI Komponenten
 +
 +public class GUIexample extends App{ // GUIexample ist Unterklasse der Klasse App
 +
 +    //Komponenten der grafischen Oberfläche
 +
 +    Label lblName, lblText;  // Etiketten
 +    TextField txtName;  // Texteingabe
 +    Button btnWrite;   // Schaltfläche
 +
 +    // Konstruktor
 +    public GUIexample(){
 +        super(250,200);   // Fenster der Größe 400x600 erzeugen
 +        this.window.setTitle("Hallo");
 +        // Label erzeugen
 +        this.lblName = new Label(50,25,50,25,"Name: ");
 +        this.lblName.setTextAlignment("right");
 +        // Textfeld erzeugen
 +        this.txtName = new TextField(100,25,100,25,"");
 +        // Aufgabelabel
 +        this.lblText = new Label(50,100,200,25,"Is there anybody out there?");
 +        // Button erzeugen
 +        this.btnWrite = new Button(50,150,100,25,"Klick mich");
 +        this.btnWrite.setOnButtonClicked("write");
 +    }
 +
 +    public void write(){
 +        String name = this.txtName.getContentAsString();
 +        if(name.length() == 0){
 +            this.lblText.setText("Hallo Welt!");
 +        }else{
 +            this.lblText.setText("Hallo "+name + "!");
 +        }
 +    }
 +}
 +</file>
 +
 +  * Zeile 8-10: Für jede Komponente wird eine Attribut angelegt.
 +  * Zeile 15: Mit ''this.window'' kann man auf das Fenster (kommt aus der Klasse //App//) zugreifen. Hier wird der Title (siehe Bild oben) geändert.
 +  * Zeile 25: Dem Button wird mitgeteilt, dass er die Methode //write()// (Zeile 28) ausführen muss, wenn er angeklickt wird
 +  * Zeile 28-35: Wird die Methode aufgerufen, wird zunächst der Inhalt des Textfelds ausgelesen. Ist dieser leer, wird //Hallo Welt!// in das Label geschrieben, ansonsten //Hallo // gefolgt von dem Textfeldinhalt und dem Ausrufezeichen.
 +
 +===== Siehe auch =====
 +
 +  * [[de:jltk:gui:components|Komponenten einer grafischen Oberfläche]]
 +  * [[de:jltk:gui:temperaturgui|Beispiel: Temperaturumrechner mit grafischer Benutzeroberfläche]]