de:jltk:gui:example [jltk

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
====== 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]]