Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- de:jltk:gui:example [2023/12/18 08:42] – ↷ Seitename wurde von de:jltk:gui:gui auf de:jltk:gui:example geändert jltk
+++ de:jltk:gui:example [2025/02/27 21:03] (aktuell) – jltk
@@ Zeile 3: / Zeile 3: @@
 ===== Ü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.
+//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 auf Ereignisse (z.B. anklicken) reagieren, müssen diese Objekte in einer Unterklasse [[de:jltk:classes:App]] sein.
+Damit die grafischen Elemente (Komponenten) auf Ereignisse (z.B. anklicken) reagieren, müssen diese Objekte in einer Unterklasse [[de:jltk:classes:App]] sein.
-===== Erstes Beispiel =====
+Auf der Seite [[de:jltk:gui:components|Komponenten einer grafischen Oberfläche]] werden alle Element, die man in einer GUI verwenden kann, vorgestellt.
-<file java GUIexample.java>
-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
+===== Beispiel: Fenster mit Label =====
-   Label lblTitle, lblCelsius, lblFahrenheit, lblResult;  // Etiketten
+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.
-   TextField txtCelsius;  // Texteingabe
-   Button btnConvert;   // Schaltfläche
+Erzeugt man dann ein Objekt aus dieser Klasse, so wird die zugehörige GUI erstellt.
-   // Konstruktor
+{{ :0_global:jltk:gui:window_gui_example.png?250 |Fenster mit Label}}
-   public GUIexample(){
-      super(400,600);   // Fenster der Größe 400x600 erzeugen
-      this.window.title("Temperaturumrechner");
-      this.lblTitle = new Label(100,25,200,50,"Temperaturumrechner");
+<file java FensterMitLabel.java  [enable_line_numbers="true"]>
-      this.lblTitle.setAlignment("center");
+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]]
-===== Komponenten einer GUI =====
-{{ :0_global:jltk:gui:gui_components_description.svg |Komponenten einer grafischen Oberfläche}}