1. LS 2.1: Ereignisverarbeitung

1.1. LS 2.1.1: Grundlagen der Ereignisverarbeitung

Journal – Lernthema 2: Fachschicht implementieren

Grundlagen der Ereignisverarbeitung

• Ein Ereignis ist eine Benutzerinteraktion oder eine automatische Änderung, auf die ein Programm reagieren kann.
• Beispiele für Ereignisse sind:
  • Klick auf einen Button
  • Tippen auf eine Bildschirm-Tastatur
  • Ändern einer Texteingabe
  • Bewegung des Geräts (z. B. Kippen oder Schütteln eines Smartphones)
• Ein Event-Handler ist eine Funktion, die auf ein bestimmtes Ereignis wartet und darauf reagiert.
• Ein Event-Listener ist ein Mechanismus, der einem bestimmten Element sagt: „Falls dieses Ereignis passiert, rufe diese Funktion auf.“

Beispiele für Ereignisverarbeitung

Ergänzungen aus dem Austausch

• Mein Lernpartner hat noch das Beispiel „Scrollen auf einer Webseite“ genannt, das ich ergänzt habe.
• Mir war nicht bewusst, dass ein Event-Listener auch auf mehrere verschiedene Ereignisse hören kann.

2. Arbeitsauftrag 4c - Bildschirmrotation Übungsaufgabe

LS2-1-A4c-Bildschirmrotation-erfassen-Loesung - Snack

✅ Musterlösung – Bildschirmrotation-Übung (Arbeitsauftrag 4c)

📌 Codeauszug (ergänzt):

import React, { useState, useEffect } from 'react';
import { View, Text, Dimensions } from 'react-native';

export default function App() {
  const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);
  const [screenHeight, setScreenHeight] = useState(Dimensions.get('window').height);

  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setScreenWidth(window.width);
      setScreenHeight(window.height);
    });

    return () => {
      subscription.remove();
    };
  }, []);

  return (
    <View style={{ padding: 50 }}>
      <Text>Aktuelle Bildschirmbreite: {screenWidth}px</Text>
      <Text>Aktuelle Bildschirmhöhe: {screenHeight}px</Text>
    </View>
  );
}

✏️ Kurze Erklärung:

• Zusätzlich zur Breite wird nun auch die Höhe bei Rotation automatisch aktualisiert.
• Dafür wurde ein zweiter State screenHeight angelegt.
• In der addEventListener-Funktion wird setScreenHeight(window.height) ergänzt.
• Beide Werte werden im Interface mit <Text> angezeigt.

📋 Antworten auf Reflexionsfragen:

1. Werden Breite und Höhe gleichzeitig aktualisiert?
✅ Ja, beide setState-Funktionen werden im gleichen Event-Listener gesetzt.

2. Wie ist der Code strukturiert?
✅ Klar getrennt nach useState, useEffect und return. Die Anzeige ist übersichtlich.

3. Könnte man beide Werte in ein Objekt zusammenfassen?
✅ Ja, z. B. mit const [screenSize, setScreenSize] = useState({width: ..., height: ...}), aber zwei States sind bei diesem einfachen Beispiel ebenfalls gut lesbar.

4. Wird der Event Listener nur einmal registriert und wieder entfernt?
✅ Ja, useEffect läuft nur einmal beim Start ([] als Abhängigkeit) und entfernt den Listener im return.

✅ Abgabehinweis für Schüler:innen:
→ Journal-Eintrag unter: „Bildschirmrotation-Übung“
→ Code + kurze Erklärung + Antworten auf Kontrollfragen