Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:grafik:mausereignisse [2021/01/06 14:31] – [Reagieren auf Mausereignisse (Event-Handler)] Martin Pabst
+++ api:documentation:grafik:mausereignisse [2023/04/28 10:41] (aktuell) – [Beispiel 4: Drag and Drop] Martin Pabst
@@ Zeile 1: / Zeile 1: @@
-====== Reagieren auf Mausereignisse (Event-Handler) ======
+====== Reagieren auf Maus- und Tastaturereignisse (Event-Handler) ======
 <WRAP center round info 100%>
-Jedes graphische Objekt (d.h. jede von ''Shape'' abgeleitete Klasse) besitzt Methoden, die bei Mausereignissen aufgerufen werden:
+Jedes graphische Objekt (d.h. jede von ''Shape'' abgeleitete Klasse) besitzt Methoden, die bei Maus- oder Tastaturereignissen aufgerufen werden:
-  * onMouseDown(int key) \\ wird aufgerufen, wenn sich der Mauszeiger über dem Objekt befindet und eine Maustaste **heruntergedrückt** wurde. ''key == 0'' bedeutet: linke Taste, ''key == 2'' bedeutet: rechte Taste.
+  * **onMouseDown(int key)** \\ wird aufgerufen, wenn sich der Mauszeiger über dem Objekt befindet und eine Maustaste **heruntergedrückt** wurde. ''key == 0'' bedeutet: linke Taste, ''key == 2'' bedeutet: rechte Taste.
-  * onMouseUp(int key) \\ wird aufgerufen, wenn sich der Mauszeiger über dem Objekt befindet und eine Maustaste **losgelassen** wurde. ''key == 0'' bedeutet: linke Taste, ''key == 2'' bedeutet: rechte Taste.
+  * **onMouseUp(int key)** \\ wird aufgerufen, wenn sich der Mauszeiger über dem Objekt befindet und eine Maustaste **losgelassen** wurde. ''key == 0'' bedeutet: linke Taste, ''key == 2'' bedeutet: rechte Taste.
+  * **onMouseEnter()** \\ wird aufgerufen, wenn der Mauszeiger sich in das Objekt **hineinbewegt**.
+  * **onMouseLeave()** \\ wird aufgerufen, wenn der Mauszeiger sich aus dem Objekt **herausbewegt**.
+  * **onKeyDown(String key)** \\ wird aufgerufen, wenn eine Taste der Tastatur gerade **heruntergedrückt** wurde.
+  * **onKeyUp(String key)** \\ wird aufgerufen, wenn eine Taste der Tastatur gerade **losgelassen** wurde.
+  * **onKeyTyped(String key)** \\ wird aufgerufen, wenn eine Taste der Tastatur angeschlagen (heruntergedrückt und losgelassen) wurde. Der Unterschied zu ''onKeyUp'' besteht darin, dass das Betriebssystem je nach Einstellung beim längeren Halten einer Taste viele KeyTyped-Ereignisse in Folge auslöst, jedoch nur ein einziges KeyUp-Ereignis beim Loslassen der Taste. \\ \\
+Diese Methoden der Grafikobjekte (''Rectangle'', ''Circle'', ...) sind allesamt leer, d.h. die Graphikobjekte reagieren erstmal nicht auf die Maus- und Tastaturereignisse. Damit sich das ändert, musst du wie folgt vorgehen:
+  - Schreibe eine eigene Klasse, die Unterklasse einer graphischen Klasse ist (z.B. ''class Test extends Rectangle {   }'').
+  - Überschreibe nun in dieser Klasse eine oder mehrere der obigen Methoden. Diese Methoden nennt man **Ereignishandler**.
+  - Wir eines der Ereignisse ausgelöst, so wird jetzt **deine** dazugehörige Methode aufgerufen und der Programmcode darin ausgeführt.
+Das klingt jetzt vielleicht kompliziert, ist es aber nicht! Du findest auf dieser Seite im Folgenden viele kleine Beispiele, an denen Du leicht sehen kannst, wie es geht.
 </WRAP>
@@ Zeile 11: / Zeile 23: @@
 </HTML>
 ===== Beispiel 1: Überschreiben der onMouseDown-Methode =====
+Stelle die Geschwindigkeit auf maximal, starte das Programm und klicke zuerst mit der linken Maustaste, dann mit der rechten Maustaste auf die Quadrate!
 <HTML>
 <div class="java-online" style="height: 500px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'onMouseDown'}">
@@ Zeile 43: / Zeile 56: @@
 </div>
 </HTML>
+===== Beispiel 2: Drehen eines Dreiecks mit den Tasten r und l =====
+Stelle die Programmgeschwindigkeit auf maximal, starte das Programm und drücke die Tasten r oder l. Probiere auch aus, was passiert, wenn Du die Tasten für längere Zeit hältst!
+ \\
+Falls das Programm nicht reagiert, hat vielleicht irgendein anderes Control im Browser den  Tastaturfokus. Klicke in diesem Fall einfach einmal mit der Maus in den Grafikbereich, damit er den Tastaturfokus erhält.
+<HTML>
+<div class="java-online" style="height: 550px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'onKeyTyped'}">
+<script type="text/plain" title="onKeyTyped.java">
+new World(1000, 1000);
+new Zeiger();
+while(true) { }
+class Zeiger extends Triangle {
+   public Zeiger() {
+      super(450, 600, 550, 600, 500, 300);
+   }
+   public void onKeyTyped(String key) {
+      if(key == "l") {
+         rotate(20);
+      }
+      if(key == "r") {
+         rotate(-20);
+      }
+   }
+}</script>
+</div>
+</HTML>
+===== Beispiel 3: Überschreiben der onMouseEnter/onMouseLeave-Methoden =====
+Setze die Geschwindigkeit auf maximal, starte das Programm und fahre mit der Maus über die Quadrate!
+<HTML>
+<div class="java-online" style="height: 500px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'onMouseEnterLeave'}">
+<script type="text/plain" title="onMouseEnterLeave.java">
+new World(1000, 1000);
+for(int i = 0; i < 10; i++) {
+   for(int j = 0; j < 10; j++) {
+      new MouseOverQuadrat(100 * i + 10, 100 * j + 10, 80);
+   }
+}
+while(true){ }
+class MouseOverQuadrat extends Rectangle {
+   MouseOverQuadrat(double x, double y, double breite) {
+      super(x, y, breite, breite);
+      setFillColor(Color.white);
+   }
+   public void onMouseEnter(double x, double y) {
+         setFillColor(Color.blue);
+         getWorld().setCursor("pointer");          // Ändert die Form des Mauszeigers.
+   }
+   public void onMouseLeave(double x, double y) {
+         setFillColor(Color.white);
+         getWorld().setCursor("default");          // Setzt die Form des Mauszeigers wieder auf "default" ( = Pfeil) zurück.
+   }
+}
+</script>
+</div>
+</HTML>
+===== Beispiel 4: Drag and Drop =====
+Durch geschickte Nutzung der obigen Handler lässt sich Drag and Drop per Maus verwirklichen:
+<HTML>
+<div class="java-online" style="height: 500px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'dragAndDrop1'}">
+<script type="text/plain" title="onMouseEnterLeave.java">
+println("Packen Sie das Rechteck mit der Maus und ziehen Sie es woanders hin!");
+new DraggableRectangle(100, 100, 50, 50);
+class DraggableRectangle extends Rectangle {
+   String state = "idle";    // "idle", "dragging"
+   double lastMouseX;
+   double lastMouseY;
+   public void onMouseDown(double x, double y, int key) {
+      if(state == "idle") {
+         lastMouseX = x;
+         lastMouseY = y;
+         state = "dragging";
+         startTrackingEveryMouseMovement();
+         getWorld().setCursor("grabbing");
+      }
+   }
+   public void onMouseEnter(double x, double y) {
+      if(state != "dragging") {
+         getWorld().setCursor("pointer");
+      }
+   }
+   public void onMouseLeave(double x, double y) {
+      if(state != "dragging") {
+         getWorld().setCursor("default");
+      }
+   }
+   public void onMouseMove(double x, double y) {
+      if(state == "dragging") {
+         move(x - lastMouseX, y - lastMouseY);
+         lastMouseX = x;
+         lastMouseY = y;
+      }
+   }
+   public void onMouseUp(double x, double y, int key) {
+      state = "idle";
+      stopTrackingEveryMouseMovement();
+      getWorld().setCursor("pointer");
+   }
+}
+</script>
+</div>
+</HTML>