Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:grafik:gui [2023/04/01 17:38] – Martin Pabst
+++ api:documentation:grafik:gui [2023/04/02 14:24] (aktuell) – Martin Pabst
@@ Zeile 1: / Zeile 1: @@
 ====== GUI-Elemente ======
 <WRAP center round info 80%>
-Die Online-IDE bringt ein paar einfache GUI-Elemente mit, mit denen sich einfache Dialoge bauen lassen:
+Die Online-IDE bringt ein paar einfache GUI-Elemente mit, mit denen sich Dialoge bauen lassen:
   * Button
   * Textfield (einzeiliges Texteingabefeld)
   * Checkbox (Ankreuzfeld)
   * Radiubutton (Auswahlfeld)
+Das folgende kleine Beispiel zeigt die Verwendung.
 </WRAP>
@@ Zeile 14: / Zeile 16: @@
 <script type="text/plain" title="GUI-Test.java">
-TextField t = new TextField(50, 50, 300, 32, "Name:");
+MyButton b = new MyButton();
-CheckBox cb = new CheckBox(50, 150, 32, 32, "Ich habe Hunger.");
-Text t1 = new Text(50, 250, 32, "Ich bin");
+class MyButton extends Button {
-t1.setFillColor(0x808080);
+   TextField t = new TextField(50, 50, 300, 32, "Name");
+   CheckBox cb = new CheckBox(50, 150, 32, 32, "Ich habe Hunger.");
-RadioButton rSchueler = new RadioButton(50, 300, 32, 32, "Schüler/in", 0);
+   Text t1 = new Text(50, 250, 32, "Ich bin");
-RadioButton rLehrkraft = new RadioButton(50, 350, 32, 32, "Lehrkraft", 1);
-RadioButton rWederNoch = new RadioButton(50, 400, 32, 32, "weder-noch", 2);
-rSchueler.connectTo(rLehrkraft, rWederNoch);
+   RadioButton rSchueler = new RadioButton(50, 300, 32, 32, "Schüler/in", 0);
+   RadioButton rLehrkraft = new RadioButton(50, 350, 32, 32, "Lehrkraft", 1);
+   RadioButton rWederNoch = new RadioButton(50, 400, 32, 32, "weder-noch", 2);
-Button b = new Button(400, 500, 32, "Abschicken");
+   MyButton() {
+      super(400, 500, 32, "Abschicken");
+      t1.setFillColor(0x808080);
+      rSchueler.connectTo(rLehrkraft, rWederNoch);
+   }
+   public void onChange(String newValue) {
+      print("Sie heißen also " + t.getText() + " und sind ");
+      println(cb.isChecked() ? "hungrig." : "nicht hungrig.");
+      println("Index des selektierten Radiobuttons: " + rSchueler.getIndexOfSelectedRadiobutton());
+      println("Text des selektierten Radiobuttons: " + rSchueler.getTextOfSelectedRadiobutton());
+   }
+}
 </script>
@@ Zeile 32: / Zeile 47: @@
 </HTML>
+===== Methodenaufruf bei Benutzeraktionen =====
+<WRAP center round info 80%>
+Es gibt zwei Möglichkeiten, auf Benutzeraktionen zu reagieren:
+  * Überschreiben der Methode ''onChange(String newValue)'': \\ Jede GUI-Klasse verfügt über die Methode ''onChange(String newValue)'', die bei jeder Benutzeraktion aufgerufen wird, die den Zustand des GUI-Elements wesentlich verändert (d.h. nicht bei reinen Cursorbewegungen im ''Textfield'').
+  * Implementieren eines ''ChangeListeners'' und Registrieren bei den entsprechenden GUI-Objekten mittels ''addChangeListener(ChangeListener listener)''. Das Interface ''ChangeListener'' deklariert die Methode ''onChange(Objekt source, String newValue)'', die bei jeder Benutzeraktion aufgerufen wird. Da ihr auch das GUI-Objekt übergeben wird, das die Änderung verursacht hat, kann ein Listener-Objekt für mehrere GUI-Objekte verwendet werden.
+</WRAP>
+==== Überschreiben der onChange-Methode ====
+<HTML>
+<div class="java-online" style="height: 300px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'guitest3'}">
+<script type="text/plain" title="GUI-Test.java">
+MyTextField t = new MyTextField(50, 50, 500, 32, "Schreiben Sie hier was rein!");
+class MyTextField extends TextField {
+  	public void onChange(String newValue) {
+    		println("Neuer Wert: " + newValue);
+  	}
+}
+</script>
+</div>
+</HTML>
+==== OnChange-Listener ====
+<HTML>
+<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'guitest2'}">
+<script type="text/plain" title="GUI-Test.java">
+TextField t = new TextField(50, 50, 500, 32, "Schreiben Sie hier was rein!");
+t.addChangeListener(new MyChangeListener());
+class MyChangeListener implements ChangeListener {
+  	public void onChange(Object changedObject, String newValue) {
+    		println("Neuer Wert: " + newValue);
+  	}
+}
+</script>
+</div>
+</HTML>
+===== Verändern des Aussehens =====
+<WRAP center round info 80%>
+Alle GUI-Elemente verfügen über Methoden zum Ändern (fast) aller Farben und lassen sich beliebig vergrößern/verkleinern. Außerdem sind sie Unterklassen von ''shape'', so dass sie sich beliebig drehen, strecken und verschieben lassen und selbstverständlich auch auf Kollisionen reagieren könnten (falls das je gebraucht wird).
+</WRAP>
+==== Extrembeispiel ====
+<HTML>
+<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'guitest4'}">
+<script type="text/plain" title="GUI-Test.java">
+SystemTools.setSpeed(-1);
+MyTextField t = new MyTextField(200, 300, 500, 32, "Schreiben Sie hier was rein!");
+t.setFillColor(Color.bisque);
+t.setBorderColor(Color.blueviolet);
+t.setBorderWidth(8);
+t.setTextColor(0x942424);
+class MyTextField extends TextField {
+  	public void onChange(String newValue) {
+    		println("Neuer Wert: " + newValue);
+  	}
+   public void act() {
+      rotate(0.5);
+   }
+}
+</script>
+</div>
+</HTML>