GUI-Programmierung: Grundlagen

Aktives Lernen funktioniert besonders gut bei der GUI-Programmierung, weil Schülerinnen und Schüler hier sofort sehen, wie ihre Code-Änderungen das Verhalten und die Benutzerfreundlichkeit beeinflussen. Die Kombination aus visuellem Feedback und logischen Abläufen macht abstrakte Konzepte wie Event-Handler greifbar und nachvollziehbar.

• Klasse 10
• Digitale Welten Gestalten: Informatik in der Praxis
• 4 Aktivitäten
• 30 Min.–50 Min.

Lernziele

1. Erstellen Sie eine einfache grafische Benutzeroberfläche mit mindestens drei interaktiven Elementen (z. B. Button, Textfeld, Checkbox).
2. Analysieren Sie den Code einer bestehenden GUI-Anwendung, um die Trennung von Benutzeroberfläche und Programmlogik zu identifizieren.
3. Erklären Sie die Funktionsweise der Ereignissteuerung (Event-Handling) anhand eines konkreten Beispiels, wie das Klicken eines Buttons eine Aktion auslöst.
4. Bewerten Sie die Benutzerfreundlichkeit einer einfachen GUI anhand von Kriterien wie Klarheit der Beschriftung und Reaktionszeit auf Benutzereingaben.

Projektbasiertes Lernen

⏱ 45 Min.·Partnerarbeit

Pair Programming: Button-Event-App

Paare erstellen eine GUI mit zwei Buttons: Einer ändert Textfarbe, der andere startet eine Zählfunktion. Sie testen Events schrittweise und debuggen gemeinsam. Abschluss: Präsentation der App vor der Klasse.

Vorbereitung & Details

Wie trennt man die Programmlogik von der visuellen Darstellung?

Moderationstipp: Fordern Sie in der Pair-Programming-Phase gezielt dazu auf, dass ein Partner die Layout-Definition übernimmt und der andere die Event-Handler schreibt, um die Trennung zu erzwingen.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 50 Min.·Kleingruppen

Stationen-Rotation: Layout-Vergleich

Vier Stationen mit vorgegebenen GUIs: Grid, Border und Flow Layout testen. Gruppen notieren Vor- und Nachteile, implementieren eine Variante und rotieren. Plenum diskutiert beste Praktiken.

Vorbereitung & Details

Was bedeutet ereignisorientierte Programmierung im Kontext von Buttons und Menüs?

Moderationstipp: Stellen Sie bei der Stationen-Rotation sicher, dass jede Gruppe ein anderes GUI-Framework testet, damit der Vergleich zwischen Layout-Optionen und Event-Verhalten direkt sichtbar wird.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 40 Min.·Ganze Klasse

Whole Class Challenge: Menü-Entwicklung

Klasse entwirft gemeinsam ein Menü für eine Notizen-App: Menüpunkte definieren, Handler programmieren. Lehrer moderiert Live-Coding, Schüler voten über Features. Iteration basierend auf Feedback.

Vorbereitung & Details

Welche Design-Prinzipien machen eine Software intuitiv bedienbar?

Moderationstipp: Beobachten Sie während der Menü-Entwicklung die Diskussionen in den Kleingruppen genau, um zu erkennen, wo die Schülerinnen und Schüler die Verbindung zwischen Menüoptionen und zugehörigen Funktionen herstellen.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Projektbasiertes Lernen

⏱ 30 Min.·Einzelarbeit

Individual Prototyping: Persönliche GUI

Jede Schülerin und jeder Schüler baut eine einfache App mit Eingabe-Feld und Button, z. B. Rechner. Selbsttest und Peer-Review folgen. Portfolio-Eintrag mit Reflexion.

Vorbereitung & Details

Wie trennt man die Programmlogik von der visuellen Darstellung?

Moderationstipp: Geben Sie beim Individual-Prototyping klare Zeitlimits vor, damit die Schülerinnen und Schüler sich auf die Kernfunktionen konzentrieren und nicht in Design-Details verlieren.

Setup: Flexible Lernumgebung mit Zugang zu Materialien und moderner Technik

Materials: Project Brief mit einer Leitfrage, Planungsvorlage und Zeitplan, Bewertungsraster (Rubric) mit Meilensteinen, Präsentationsmaterialien

• Anwenden
• Analysieren
• Bewerten
• Erschaffen
• Selbststeuerung
• Beziehungsfähigkeit
• Entscheidungsfähigkeit

Dieses Thema unterrichten

Erfahrene Lehrkräfte beginnen mit minimalen Beispielen und bauen darauf schrittweise auf, um die Grundprinzipien der GUI-Programmierung zu vermitteln. Sie vermeiden komplexe Frameworks in der Einstiegsphase und nutzen stattdessen einfache Bibliotheken wie Tkinter oder JavaFX, um die Konzepte sichtbar zu machen. Wichtig ist, dass Schülerinnen und Schüler von Anfang an Feedback zur Benutzerfreundlichkeit erhalten, um ein Gespür für intuitive Interaktionen zu entwickeln.

Was Sie erwartet

Erfolgreiches Lernen zeigt sich darin, dass Schülerinnen und Schüler klar zwischen Programmlogik und UI-Code trennen können und selbstständig einfache GUIs mit funktionalen Interaktionen erstellen. Sie erkennen, wie Ereignisse Benutzeraktionen auslösen und welche Rolle der Event-Loop dabei spielt.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Während der Pair-Programming-Aktivität 'Button-Event-App' beobachten Sie, wie Schülerinnen und Schüler Logik direkt in die Layout-Methode schreiben.

Was Sie stattdessen lehren sollten

Fordern Sie die Paare auf, ihren Code nach dem MVC-Muster zu strukturieren: Legen Sie eine separate Klasse für die Logik an und binden Sie diese in den Event-Handler ein. Fragen Sie gezielt nach, warum diese Trennung sinnvoll ist und welche Vorteile sie für spätere Erweiterungen bietet.

Häufige Fehlvorstellung

Während der Stationen-Rotation 'Layout-Vergleich' erwarten Schülerinnen und Schüler, dass Button-Clicks sofort und linear ausgeführt werden.

Was Sie stattdessen lehren sollten

Fügen Sie in einer der Stationen eine Verzögerung von 2 Sekunden ein, bevor der Event-Handler reagiert. Diskutieren Sie im Anschluss gemeinsam, warum die Anwendung trotz Verzögerung noch responsiv bleibt und wie der Event-Loop im Hintergrund arbeitet.

Häufige Fehlvorstellung

Beim Individual-Prototyping 'Persönliche GUI' setzen Schülerinnen und Schüler auf überladene Designs mit vielen Farben und Effekten.

Was Sie stattdessen lehren sollten

Geben Sie in der Aufgabenstellung explizit vor, dass maximal drei Farben und zwei Schriftarten verwendet werden dürfen. Lassen Sie die Schülerinnen und Schüler ihre Designs in einer kurzen Präsentation erklären und begründen, warum ihre Wahl die Benutzerfreundlichkeit verbessert.

Ideen zur Lernstandserhebung

Lernstandskontrolle

Nach der Aktivität 'Button-Event-App' erhalten die Schülerinnen und Schüler eine Karteikarte mit der Aufgabe, den Unterschied zwischen einem Widget und einem Event-Handler anhand ihres erstellten Buttons zu erklären. Sie sollen aufzeichnen, welches Ereignis auftritt und welche Routine darauf reagiert.

Kurze Überprüfung

Während der Stationen-Rotation 'Layout-Vergleich' zeigen Sie den Schülerinnen und Schülern ein Code-Snippet mit einem Button und dessen Event-Handler. Fragen Sie: 'Welches Ereignis wird hier behandelt?' und 'Welche Aktion wird als Reaktion ausgeführt?'. Die Antworten sammeln Sie mündlich und korrigieren direkt vor Ort.

Gegenseitige Bewertung

Nach der Aktivität 'Individual Prototyping: Persönliche GUI' tauschen die Schülerinnen und Schüler ihre Programme mit einem Partner aus. Jeder Partner prüft anhand einer Checkliste: 'Sind die Elemente klar beschriftet?' und 'Reagieren die Elemente wie erwartet auf Klicks?'. Die Partner geben sich gegenseitig ein kurzes Feedback zur Benutzerfreundlichkeit.

Erweiterungen & Unterstützung

• Fordern Sie schnelle Schülerinnen und Schüler auf, ihre GUI mit einem Datenbank-Backend zu verbinden und so interaktive Anwendungen wie einen einfachen Notizeditor zu erstellen.
• Unterstützen Sie unsichere Schülerinnen und Schüler durch vorgefertigte Code-Snippets für Layout und Event-Handling, die sie nur noch anpassen müssen.
• Vertiefen Sie das Thema mit einer Challenge, bei der die Schülerinnen und Schüler eine GUI für ein bestimmtes Szenario (z.B. ein Quiz) entwickeln und dabei auf Barrierefreiheit achten müssen.

Schlüsselvokabular

GUI (Graphical User Interface)	Eine grafische Benutzeroberfläche, die es Benutzern ermöglicht, mit einem Computer über visuelle Elemente wie Icons, Fenster und Buttons zu interagieren, anstatt nur Textbefehle einzugeben.
Ereignissteuerung (Event Handling)	Ein Programmierparadigma, bei dem die Ausführung von Code von bestimmten Ereignissen abhängt, wie z. B. Mausklicks, Tastatureingaben oder Systemnachrichten.
Widget/Steuerelement	Ein grafisches Element einer Benutzeroberfläche, das dem Benutzer zur Interaktion dient, z. B. ein Button, ein Textfeld, eine Checkbox oder ein Schieberegler.
Ereignisbehandlungsroutine (Event Handler)	Eine Funktion oder Methode im Programmcode, die auf ein bestimmtes Ereignis reagiert und die entsprechende Aktion ausführt.
Layout-Manager	Ein Mechanismus in GUI-Toolkits, der für die automatische Anordnung und Größenanpassung von Widgets innerhalb eines Fensters oder Containers zuständig ist.